Verwenden der Adobe Client-Datenschicht in Verbindung mit den Kernkomponenten

Letzte Aktualisierung: 12. Juli 2024

Erstellt für:

  • Entwickler
  • Admin

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. Nach der Aktivierung können Sie diese überprüfen, indem Sie eine Seite der Site außerhalb des Editors laden, z. B. mit der Option Als veröffentlicht anzeigen im Editor. Ü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();

Unterstützte Komponenten

Die folgenden Komponenten unterstützen die Datenschicht.

Siehe auch die von den Komponenten ausgelösten Ereignisse.

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

Inhaltsfragment-Schema

Das Inhaltsfragment-Schema wird von der Inhaltsfragment-Komponente verwendet.

Das Inhaltsfragment-Schema ist wie folgt definiert:

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    elements            // array of the Content Fragment elements
}

Das für das Inhaltsfragment-Element verwendete Schema lautet wie folgt:

{
    xdm:title           // title
    xdm:text            // text
}

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