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

Die Adobe Client-Datenschicht führt eine Standardmethode ein, um Daten über das Erlebnis eines Besuchers auf einer Webseite zu erfassen und zu speichern und den Zugriff auf diese Daten zu vereinfachen. Die Adobe Client-Datenschicht ist plattformunabhängig, aber für die Verwendung mit AEM vollständig in die Kernkomponenten integriert.

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.

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.

   

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');
   

   

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 die event -Objekt und verwendet die adobeDataLayer.getState -Methode, um den aktuellen Status des Objekts abzurufen, das das Ereignis ausgelöst hat. Anschließend überprüft die Hilfsmethode die filter und nur, wenn die aktuelle dataObject erfüllt die Filterkriterien, die zurückgegeben werden.

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

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);
   });
   

   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. Schalten Sie auf der Seite die Karussellfolien um und beachten Sie die Konsolenanweisungen:

   

5. So hören Sie nicht mehr auf cmp:show -Ereignis, 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:

   

   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 Ereignis-Handler ausgelöst wurde, wenn die Seite bereits eindeutig geladen ist.

   Eine der einzigartigen Funktionen der Adobe Client-Datenschicht besteht darin, Ereignislistener zu registrieren before oder after Wenn die Datenschicht initialisiert wurde, hilft dies, die 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 durchgeführt, die in vergangene und -Ereignissen in Future. Es ist möglich, die Ereignisse aus der Vergangenheit oder der Zukunft zu filtern. Weitere Informationen finden Sie in der Dokumentation.

Nächste Schritte

Es gibt zwei Möglichkeiten, das Lernen fortzusetzen. Zunächst sehen Sie sich die Seitendaten erfassen und an Adobe Analytics senden Tutorial, das die Verwendung der Adobe Client-Datenschicht veranschaulicht. Die zweite Möglichkeit ist, zu erfahren, wie man Anpassen der Adobe Client-Datenschicht mit AEM Komponenten

Zusätzliche Ressourcen

• Adobe Client-Datenschicht-Dokumentation
• Verwenden der Dokumentation zur Adobe Client-Datenschicht und zu Kernkomponenten

Ressourcen für Business.Adobe.com