Verwenden der Adobe Client-Datenschicht in Verbindung mit AEM Kernkomponenten

Die Adobe Client-Datenschicht führt eine Standardmethode ein, um Daten über ein Besuchererlebnis auf einer Webseite 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 aktivieren? Die Anweisungen finden Sie hier.

Datenschicht durchsuchen

Sie können die integrierte Funktionalität der Adobe Client-Datenschicht einfach mithilfe der Entwicklertools Ihres Browsers und der Live-Referenz-Site WKND ermitteln.

HINWEIS

Die folgenden Screenshots stammen aus dem Chrome-Browser.

  1. Navigieren Sie zu https://wknd.site

  2. Öffnen Sie Ihre Entwicklertools und geben Sie den folgenden Befehl in die Console ein:

    window.adobeDataLayer.getState();
    

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

    Adobe Data Layer Response

  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. Fügen Sie anschließend 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, benutzerspezifischen Code basierend auf einem Ereignis aus der Datenschicht Trigger. 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 überprüft das event-Objekt und ruft mithilfe der adobeDataLayer.getState-Methode den aktuellen Status des Objekts ab, das das Ereignis ausgelöst hat. Die Hilfsmethode prüft dann die filter-Kriterien und wird nur zurückgegeben, wenn die aktuelle dataObject den Filter erfüllt.

    VORSICHT

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

  2. Geben Sie als Nächstes einen Ereignis-Handler ein, der aufgerufen wird, wenn eine Teaser-Komponente in einer Karussell angezeigt 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);
        }
    }
    

    Der teaserShownHandler ruft die getDataObjectHelper-Methode auf und übergibt einen Filter von wknd/components/teaser als @type, um Ereignisse herauszufiltern, die von anderen Komponenten ausgelöst werden.

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

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

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

  4. Auf der Seite können Sie die Karussellfolien umschalten und die Konsolenanweisungen beachten:

    Karussell umschalten und Ereignis-Listener anzeigen

  5. Entfernen Sie den Ereignis-Listener aus der Datenschicht, um die Überwachung auf das cmp:show -Ereignis zu beenden:

    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. Geben Sie als Nächstes einen Ereignis-Handler ein, der aufgerufen wird, wenn das angezeigte Seitenereignis 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. Als Nächstes pushen Sie einen Ereignis-Listener auf die Datenschicht, um auf das cmp:show -Ereignis zu warten, und rufen Sie 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 cmp:show-Ereignis für die Seite wird bei jedem Laden der Seite ganz oben auf der Seite ausgelöst. Sie fragen sich vielleicht, warum der Ereignishandler ausgelöst wurde, wenn die Seite eindeutig bereits geladen wurde.

    Dies ist eine der einzigartigen Funktionen der Adobe Client-Datenschicht, da Sie Ereignis-Listener vor oder registrieren können, nachdem die Datenschicht initialisiert wurde. Dies ist ein wichtiges Merkmal, um Wettlaufsituationen zu vermeiden.

    Die Datenschicht verwaltet ein Warteschlangenarray aller Ereignisse, die nacheinander aufgetreten sind. Die Datenschicht Trigger standardmäßig Ereignisrückrufe für Ereignisse, die in after aufgetreten sind, sowie Ereignisse in future. Es ist möglich, die Ereignisse nach Vergangenheit oder Zukunft zu filtern. Weitere Informationen finden Sie in der Dokumentation.

Nächste Schritte

Sehen Sie sich das folgende Tutorial an, um zu erfahren, wie Sie die ereignisgesteuerte Adobe Client Data Layer verwenden, um Seitendaten zu erfassen und an Adobe Analytics zu senden.

Oder erfahren Sie, wie Sie die Adobe Client-Datenschicht mit AEM Komponenten 🔗 anpassen.

Zusätzliche Ressourcen

Auf dieser Seite