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

Letzte Aktualisierung: 2024-01-29
  • Erstellt für:
  • Intermediate
    Developer

Die Adobe Client-Datenschicht führt eine Standardmethode ein, um Daten über ein Besuchererlebnis auf einer Web-Seite zu erfassen und zu speichern und so den Zugriff auf diese Daten zu erleichtern. Die Adobe Client-Datenschicht ist plattformunabhängig, aber für die Verwendung mit AEM vollständig in die Kernkomponenten integriert.

HINWEIS

Möchten Sie die Adobe Client-Datenschicht auf Ihrer AEM-Site aktivieren? Anweisungen finden Sie hier.

Erkunden der Datenschicht

Sie können sich einen Eindruck von der eingebauten Funktionalität der Client-Datenschicht von Adobe verschaffen, indem Sie einfach die Entwickler-Tools Ihres Browsers und die Live WKND-Referenzseite verwenden.

HINWEIS

Die folgenden Screenshots stammen aus dem Chrome-Browser.

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

  2. Ö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.

    Adobe Datenschicht-Antwort

  3. 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"
            }
        }
    });
    
  4. Führen Sie den Befehl adobeDataLayer.getState() erneut aus und suchen Sie nach dem Eintrag für training-data.

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

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

    Nur einen einzelnen Komponentendaten-Eintrag zurückgeben

Arbeiten mit Ereignissen

Es empfiehlt sich, jeden benutzerdefinierten Code auf der Grundlage eines Ereignisses aus der Datenschicht auszulösen. Erkunden Sie als Nächstes die Registrierung und das Listening verschiedener Ereignisse.

  1. 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.

    VORSICHT

    Es ist wichtig nicht den Browser während dieser Übung zu aktualisieren, da sonst das Konsolen-JavaScript verloren geht.

  2. 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/teaser"});
        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/teaser als @type, um die von anderen Komponenten ausgelösten Ereignisse herauszufiltern.

  3. 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.

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

    Karussell umschalten und Ereignis-Listener anzeigen

  5. 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);
    });
    
  6. 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.

  7. 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.

  8. 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);
    });
    
  9. Sie sollten sofort eine Konsolenanweisung sehen, die mit den Seitendaten ausgelöst wird:

    Seitenanzeigedaten

    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.

Nächste Schritte

Es gibt zwei Möglichkeiten, sich weiter zu informieren. Die erste wäre, sich das Tutorial zum Erfassen von Seitendaten und Senden der Daten an Adobe Analytics anzuschauen – hier wird die Verwendung der Adobe Client-Datenschicht veranschaulicht. Die zweite Möglichkeit wäre, hier nachzulesen: Anpassen der Adobe Client-Datenschicht mit AEM-Komponenten

Zusätzliche Ressourcen

Auf dieser Seite