Verwenden der Adobe Client-Datenschicht in Verbindung mit den Kernkomponenten

Ziel der Adobe Client-Datenschicht ist es, für beliebige Skripte anhand einer standardisierten Methode für die Bereitstellung und den Zugriff auf alle Arten von Daten den Aufwand für die Instrumentierung von Websites zu reduzieren.

Die Adobe Client-Datenschicht ist plattformunabhängig, aber für die Verwendung mit AEM vollständig in die Kernkomponenten integriert.

Wie auch die Kernkomponenten ist der Code für die Adobe Client-Datenschicht auf GitHub zusammen mit der zugehörigen Entwicklerdokumentation verfügbar. Das vorliegende Dokument gibt einen Überblick darüber, wie die Kernkomponenten mit der Datenschicht interagieren, für vollständige technische Details ist jedoch die Dokumentation auf GitHub zu konsultieren.

TIP

Weitere Informationen zur Adobe Client-Datenschicht finden Sie in den Ressourcen des entsprechenden GitHub-Repositorys

Weitere technische Details zur Integration der Adobe Client-Datenschicht mit den Kernkomponenten finden Sie in der Datei DATA_LAYER_INTEGRATION.md im Kernkomponenten-Repository.

Installation und Aktivierung

Ab Version 2.9.0 der Kernkomponenten ist die Datenschicht als AEM-Client-Bibliothek in den Kernkomponenten enthalten und muss nicht installiert werden. Alle vom AEM-Projektarchetyp ab Version 24 erstellten Projekte enthalten standardmäßig eine aktivierte Datenschicht.

Um die Datenschicht manuell zu aktivieren, müssen Sie eine kontextabhängige Konfiguration dafür erstellen:

  1. Erstellen Sie die folgende Struktur unter dem Ordner /conf/<mySite>, wobei <mySite> für den Namen des Projekts für Ihre Site steht:

    • /conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
    • Jeder Knoten hat einen Wert jcr:primaryType, der auf nt:unstructured eingestellt ist.
  2. Fügen Sie eine boolesche Eigenschaft mit dem Namen enabled hinzu und legen Sie sie auf true fest.

    Position von DataLayerConfig auf der WKND-Referenz-Site

    Position von DataLayerConfig auf der WKND-Referenz-Site

  3. Fügen Sie eine sling:configRef-Eigenschaft zum Knoten jcr:content Ihrer Site hinzu, dies unterhalb von /content (z. B. /content/<mySite>/jcr:content), und legen Sie für sie /conf/<mySite> fest.

  4. Sie können verifizieren, ob die Aktivierung erfolgreich war, indem Sie eine Seite der Site außerhalb des Editors laden. Überprüfen Sie die Seitenquelle. Das Tag <body> sollte das Attribut data-cmp-data-layer-enabled enthalten.

    <body class="page basicpage" id="page-id" data-cmp-data-layer-enabled>
        <script>
          window.adobeDataLayer = window.adobeDataLayer || [];
          adobeDataLayer.push({
              page: JSON.parse("{\x22page\u002D6c5d4b9fdd\x22:{\x22xdm:language\x22:\x22en\x22,\x22repo:path\x22:\x22\/content\/wknd\/language\u002Dmasters\/en.html\x22,\x22xdm:tags\x22:[],\x22xdm:template\x22:\x22\/conf\/wknd\/settings\/wcm\/templates\/landing\u002Dpage\u002Dtemplate\x22,\x22@type\x22:\x22wknd\/components\/page\x22,\x22dc:description\x22:\x22WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.\x22,\x22dc:title\x22:\x22WKND Adventures and Travel\x22,\x22repo:modifyDate\x22:\x222020\u002D09\u002D29T07:50:13Z\x22}}"),
              event:'cmp:show',
              eventInfo: {
                  path: 'page.page\u002D6c5d4b9fdd'
              }
          });
        </script>
    
  5. Sie können auch die Entwickler-Tools des Browsers öffnen. Das JavaScript-Objekt adobeDataLayer sollte verfügbar sein. Geben Sie den folgenden Befehl ein, um den Status der Datenschicht der aktuellen Seite abzurufen:

    window.adobeDataLayer.getState();
    

Datenschemas der Hauptkomponenten

Nachfolgend sind die Schemas aufgeführt, die die Kernkomponenten in Verbindung mit der Datenschicht verwenden.

Komponenten-/Container-Element-Schema

Das Komponenten-/Container-Element-Schema wird in den folgenden Komponenten verwendet:

Das Komponenten-/Container-Element-Schema wird wie folgt definiert:

id: {                   // component ID
    @type               // resource type
    repo:modifyDate     // last modified date
    dc:title            // title
    dc:description      // description
    xdm:text            // text
    xdm:linkURL         // link URL
    parentId            // parent component ID
}

Das folgende Ereignis ist für das Komponenten-/Container-Element-Schema relevant:

  • cmp:click

Seiten-Schema

Das Seiten-Schema wird von der folgenden Komponente verwendet:

Das Seiten-Schema wird wie folgt definiert:

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    xdm:tags            // page tags
    repo:path           // page path
    xdm:template        // page template
    xdm:language        // page language
}

Beim Laden der Seite wird ein cmp:show-Ereignis ausgelöst. Dieses Ereignis wird vom Inline-JavaScript direkt unterhalb des öffnenden <body>-Tags ausgelöst und ist damit das früheste Ereignis in der Ereignisschlange „Datenschicht“.

Container-Schema

Das Container-Schema wird von den folgenden Komponenten verwendet:

Das Container-Schema wird wie folgt definiert:

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    shownItems          // array of the displayed item IDs
}

Die folgenden Ereignisse sind für das Container-Schema relevant:

  • cmp:click
  • cmp:show
  • cmp:hide

Bild-Schema

Das Bild-Schema wird von der folgenden Komponente verwendet:

Das Bild-Schema wird wie folgt definiert:

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    image               // asset detail (see below section)
}

Das folgende Ereignis ist für das Bild-Schema relevant:

  • cmp:click

Asset-Schema

Das Asset-Schema wird innerhalb der Bild-Komponente verwendet:

Das Asset-Schema wird wie folgt definiert:

id: {
    repo:id             // asset UUID
    repo:path           // asset path
    @type               // asset resource type
    xdm:tags            // asset tags
    repo:modifyDate
}

Das folgende Ereignis ist für das Asset-Schema relevant:

  • cmp:click

Kernkomponenten-Ereignisse

Es gibt eine Reihe von Ereignissen, die Kernkomponenten über die Datenschicht auslösen. Die Best Practice für die Interaktion mit der Datenschicht besteht darin, einen Ereignis-Listener zu registrieren und dann eine Aktion auf Grundlage des Ereignistyps und/oder der Komponente zu ergreifen, die das Ereignis ausgelöst hat. Dadurch werden potenzielle Überschneidungen mit asynchronen Skripten vermieden.

Im Folgenden finden Sie die vorkonfigurierten Ereignisse in den AEM-Kernkomponenten:

  • cmp:click: Beim Klicken auf ein klickbares Element (ein Element mit einem data-cmp-clickable-Attribut) löst die Datenschicht ein cmp:click-Ereignis aus.
  • cmp:show und cmp:hide: Beim Manipulieren des Accordion (Erweitern/Reduzieren), des Karussells (nächste/vorherige Schaltflächen) und der Registerkarten (Registerkartenauswahl) löst die Datenschicht ein cmp:show- bzw. ein cmp:hide-Ereignis aus. Ein cmp:show-Ereignis wird auch beim Laden der Seite ausgelöst und wird als erstes Ereignis erwartet.
  • cmp:loaded: Sobald die Datenschicht mit den Kernkomponenten auf der Seite gefüllt ist, löst die Datenschicht ein cmp:loaded-Ereignis aus.

Von der -Komponente ausgelöste Ereignisse

In den folgenden Tabellen sind die standardmäßigen Kernkomponenten, die Ereignisse auslösen, zusammen mit diesen Ereignissen aufgeführt.

Komponente Ereignis(se)
Akkordeon cmp:show und cmp:hide
Schaltfläche cmp:click
Breadcrumb cmp:click
Karussell cmp:show und cmp:hide
Sprachnavigation cmp:click
Navigation cmp:click
Seite cmp:show
Registerkarten cmp:show und cmp:hide
Teaser cmp:click

Ereignis-Pfadinformationen

Jedes Datenschicht-EReignis, das von einer AEM-Kernkomponente ausgelöst wird, enthält eine Payload mit dem folgenden JSON-Objekt:

eventInfo: {
    path: '<component-path>'
}

Bei <component-path> handelt es sich um den JSON-Pfad zur Komponente in der Datenschicht, die das Ereignis ausgelöst hat. Der Wert, der über event.eventInfo.path verfügbar ist, ist wichtig, da er als für adobeDataLayer.getState(<component-path>) verwendet werden kann, das den aktuellen Status der Komponente abruft, die das Ereignis ausgelöst hat. So kann benutzerdefinierter Code auf zusätzliche Daten zugreifen und sie der Datenschicht hinzufügen.

Beispiel:

function logEventObject(event) {
    if(event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
        var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
        console.debug("The component that triggered this event: ");
        console.log(dataObject);
    }
}

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

Tutorial

Möchten Sie mehr über die Datenschicht und die Kernkomponenten erfahren? Sehen Sie sich dieses praxisorientierte Tutorial an.

TIP

Um die Flexibilität der Datenschicht weiter zu untersuchen, sollten Sie sich mit den Integrationsoptionen vertraut machen, einschließlich der Aktivierung der Datenschicht für Ihre benutzerdefinierten Komponenten.

Auf dieser Seite