DokumentationAEMAnleitung zu den Hauptkomponenten

Verwenden der Adobe Client-Datenschicht in Verbindung mit den Kernkomponenten data-layer-core-components

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 installation-activation

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.

    code language-html 
    <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:

    code language-javascript 
    window.adobeDataLayer.getState();

Unterstützte Komponenten supported-components

Die folgenden Komponenten unterstützen die Datenschicht.

Siehe auch die von den Komponenten ausgelösten Ereignisse.

Datenschemas der Hauptkomponenten data-schemas

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

Komponenten-/Container-Element-Schema item

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 page

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 container

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 image

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 asset

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 content-fragment

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 events

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.

Ausgelöste Ereignisse nach Komponente events-components

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 event-path-info

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.
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c