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? Anweisungen finden Sie hier ..

Datenschicht durchsuchen

Die integrierte Funktionalität der Client-Datenschicht von Adobe lässt sich einfach mithilfe der Entwicklertools Ihres Browsers und der Live-Umgebung ermitteln. WKND-Referenz-Site.

HINWEIS

Die folgenden Screenshots stammen aus dem Chrome-Browser.

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

  2. Öffnen Sie Ihre Entwickler-Tools und geben Sie den folgenden Befehl in das Konsole:

    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 aus adobeDataLayer.getState() erneut 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 prüft die event -Objekt und verwenden Sie die adobeDataLayer.getState -Methode, um den aktuellen Status des Objekts abzurufen, das das Ereignis ausgelöst hat. Die Hilfsmethode prüft dann die filter Kriterien und nur, wenn die aktuelle dataObject erfüllt den Filter wird zurückgegeben.

    VORSICHT

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

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

    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 teaserShownHandler ruft die getDataObjectHelper -Methode verwenden und einen Filter von wknd/components/teaser als @type , um Ereignisse herauszufiltern, die von anderen Komponenten ausgelöst wurden.

  3. Senden Sie als Nächstes einen Ereignis-Listener auf die Datenschicht, um auf die cmp:show -Ereignis.

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

    Die cmp:show -Ereignis wird von vielen verschiedenen Komponenten ausgelöst, z. B. wenn eine neue Folie im Karussell oder wenn eine neue Registerkarte im Registerkarte -Komponente.

  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 das Listening auf die cmp:show event:

    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 wird zum Filtern des Ereignisses verwendet.

  8. Senden Sie als Nächstes einen Ereignis-Listener auf die Datenschicht, um auf die cmp:show -Ereignis, das die pageShownHandler.

    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

    Die cmp:show -Ereignis für die Seite wird bei jedem Laden der Seite am Anfang 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, mit der Sie Ereignis-Listener registrieren können before oder after die Datenschicht initialisiert wurde. Dies ist ein wichtiges Merkmal, um Wettlaufsituationen zu vermeiden.

    Die Datenschicht verwaltet ein Warteschlangenarray aller Ereignisse, die nacheinander aufgetreten sind. Auf der Datenschicht werden standardmäßig Ereignisrückrufe für Trigger von Ereignissen durchgeführt, die in der Variablen vergangene sowie Ereignissen 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 mit der ereignisgesteuerten Adobe Client Data-Schicht Seitendaten erfassen und an Adobe Analytics senden.

Oder lernen Sie Anpassen der Adobe Client-Datenschicht mit AEM Komponenten

Zusätzliche Ressourcen

Auf dieser Seite