Verwenden der Adobe Client-Datenschicht in Verbindung mit den (AEM) Kernkomponenten overview

Navigieren Sie zu https://wknd.site/us/en.html

Öffnen Sie Ihre Entwicklertools und geben Sie den folgenden Befehl in die Konsole:

window.adobeDataLayer.getState();

Um den aktuellen Status der Datenschicht auf einer AEM-Site anzuzeigen, überprüfen Sie die Antwort. Sie sollten Informationen über die Seite und einzelne Komponenten sehen.

Pushen Sie ein Datenobjekt in die Datenschicht, indem Sie Folgendes in die Konsole eingeben:

window.adobeDataLayer.push({
    "component": {
        "training-data": {
            "title": "Learn More",
            "link": "learn-more.html"
        }
    }
});

Führen Sie den Befehl adobeDataLayer.getState() erneut aus und suchen Sie nach dem Eintrag für training-data.

Als Nächstes fügen Sie einen Pfadparameter hinzu, um nur den spezifischen Status einer Komponente zurückzugeben:

window.adobeDataLayer.getState('component.training-data');

Geben Sie die folgende Hilfsmethode in Ihre Konsole ein:

function getDataObjectHelper(event, filter) {
    if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
        var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
        if (dataObject != null) {
            for (var property in filter) {
                if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                    return;
                }
                return dataObject;
            }
        }
    }
    return;
}

Der obige Code prüft das event-Objekt und verwendet die Methode adobeDataLayer.getState, um den aktuellen Status des Objekts abzurufen, das das Ereignis ausgelöst hat. Dann prüft die Hilfsmethode den filter, und nur wenn das aktuelle dataObject die Filterkriterien erfüllt, wird es zurückgegeben.

Geben Sie als Nächstes einen Ereignis-Handler ein, der aufgerufen wird, wenn eine Teaser-Komponente innerhalb eines Karussells aufgerufen wird.

function teaserShownHandler(event) {
    var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/carousel/item"});
    if(dataObject != null) {
        console.log("Teaser Shown: " + dataObject['dc:title']);
        console.log(dataObject);
    }
}

Die Funktion teaserShownHandler ruft die Funktion getDataObjectHelper auf und übergibt einen Filter von wknd/components/carousel/item als @type, um die von anderen Komponenten ausgelösten Ereignisse herauszufiltern.

Pushen Sie als Nächstes einen Ereignis-Listener auf die Datenschicht, um auf das Ereignis cmp:show zu warten.

window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", teaserShownHandler);
});

Das Ereignis cmp:show wird von vielen verschiedenen Komponenten ausgelöst, z. B. wenn eine neue Folie im Karussell angezeigt wird oder wenn eine neue Registerkarte in der Komponente Registerkarte ausgewählt wird.

Schalten Sie auf der Seite die Karussellfolien um und beobachten Sie die Konsolenanweisungen:

Um das Lauschen auf das Ereignis cmp:show zu beenden, entfernen Sie den Ereignis-Listener aus der Datenschicht.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function(dl) {
    dl.removeEventListener("cmp:show", teaserShownHandler);
});

Kehren Sie zur Seite zurück und schalten Sie die Karussellfolien um. Beachten Sie, dass keine weiteren Anweisungen protokolliert werden und dass das Ereignis nicht überwacht wird.

Erstellen Sie anschließend einen Ereignis-Handler, der aufgerufen wird, wenn das Ereignis „Seite angezeigt“ ausgelöst wird:

function pageShownHandler(event) {
    var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
    if(dataObject != null) {
        console.log("Page Shown: " + dataObject['dc:title']);
        console.log(dataObject);
    }
}

Beachten Sie, dass der Ressourcentyp wknd/components/page zum Filtern des Ereignisses verwendet wird.

Pushen Sie als Nächstes einen Ereignis-Listener auf die Datenschicht, um auf das Ereignis cmp:show zu warten, und rufen die pageShownHandler auf.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", pageShownHandler);
});

Sie sollten sofort eine Konsolenanweisung sehen, die mit den Seitendaten ausgelöst wird:

Das Ereignis cmp:show für die Seite wird bei jedem Laden der Seite oben auf der Seite ausgelöst. Sie fragen sich vielleicht, warum der Ereignis-Handler ausgelöst wurde, wenn die Seite bereits eindeutig geladen ist.

Eine der einzigartigen Funktionen der Adobe Client-Datenschicht besteht darin, dass Ereignis-Listener registriert werden können, und zwar bevor oder nachdem die Datenschicht initialisiert wurde. So lassen sich Überschneidungen zu vermeiden.

Die Datenschicht verwaltet ein Warteschlangen-Array aller Ereignisse, die nacheinander aufgetreten sind. Die Datenschicht löst standardmäßig Ereignisrückrufe für Ereignisse aus, die in der Vergangenheit eingetreten sind bzw. in der Zukunft eintreten können. Es ist möglich, nach Ereignissen aus der Vergangenheit oder der Zukunft zu filtern. Weitere Informationen finden Sie in der Dokumentation.