Anpassen der Adobe Client-Datenschicht mit AEM-Komponenten

Letzte Aktualisierung: 2023-12-05

Themen:
Adobe Client Data Layer
Weitere Informationen zu diesem Thema
Core Components
Weitere Informationen zu diesem Thema

Erstellt für:
Intermediate

Experienced

Developer

Erfahren Sie, wie Sie die Adobe Client-Datenschicht mit Inhalten aus benutzerdefinierten AEM-Komponenten anpassen können. Erfahren Sie, wie Sie mit den von AEM-Kernkomponenten bereitgestellten APIs die Datenschicht erweitern und anpassen können.

Was Sie erstellen werden

Autorenzeilen-Datenschicht

In diesem Tutorial werden verschiedene Optionen zur Erweiterung der Adobe Client-Datenschicht durch Aktualisieren der Autorenzeilen-Komponente („Byline“) von WKND beschrieben. Die Autorenzeilen-Komponente ist eine benutzerdefinierte Komponente. Das im Rahmen dieses Tutorial gewonnene Wissen kann auch auf andere benutzerdefinierte Komponenten angewendet werden.

Ziele

Einfügen von Komponentendaten in die Datenschicht, indem Sling-Modell und Komponenten-HTL erweitert werden
Verwenden der Datenschicht-Dienstprogramme der Kernkomponenten, um den Aufwand zu reduzieren
Verwenden der Datenattribute der Kernkomponente, um sich in vorhandene Datenschichtereignisse sozusagen einzuklinken

Voraussetzungen

Für die Durchführung dieses Tutorials ist eine lokale Entwicklungsumgebung erforderlich. Screenshots und Videos werden mit dem AEM as a Cloud Service SDK erfasst, das hier unter macOS ausgeführt wird. Befehle und Code sind unabhängig vom lokalen Betriebssystem, sofern nicht anders angegeben.

Neu bei AEM as a Cloud Service? Sehen Sie sich eine detaillierte Anleitung zum Einrichten einer lokalen Entwicklungsumgebung mit dem AEM as a Cloud Service-SDK an.

Neu bei AEM 6.5? Sehen Sie sich die folgende Anleitung zum Einrichten einer lokalen Entwicklungsumgebung an.

Herunterladen und Bereitstellen der WKND-Referenz-Site

In diesem Tutorial wird die Autorenzeilen-Komponente auf die WKND-Referenz-Site ausgedehnt. Klonen und installieren Sie die WKND-Code-Basis in Ihrer lokalen Umgebung.

Starten Sie eine lokale Author-Schnellstartinstanz von AEM unter http://localhost:4502.
Öffnen Sie ein Terminal-Fenster und klonen Sie die WKND-Code-Basis mithilfe von Git:
```
$ git clone git@github.com:adobe/aem-guides-wknd.git
```
Stellen Sie die WKND-Code-Basis in einer lokalen AEM-Instanz bereit:
```
$ cd aem-guides-wknd
$ mvn clean install -PautoInstallSinglePackage
```
HINWEIS

Fügen Sie für AEM 6.5 und das neueste Service Pack das classic-Profil zum Maven-Befehl hinzu:

mvn clean install -PautoInstallSinglePackage -Pclassic
Öffnen Sie ein neues Browser-Fenster und melden Sie sich bei AEM an. Öffnen Sie eine Magazinseite wie http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Es sollte ein Beispiel der Autorenzeilen-Komponente angezeigt werden, die der Seite als Teil eines Experience Fragments hinzugefügt wurde. Sie können das Experience Fragment unter http://localhost:4502/editor.html/content/experience-fragments/wknd/language-masters/en/contributors/stacey-roswells/byline.html anzeigen
Öffnen Sie Ihre Entwickler-Tools und geben Sie den folgenden Befehl in die Konsole ein:
```
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.

Beachten Sie, dass die Autorenzeile-Komponente nicht auf der Datenschicht aufgeführt ist.

Aktualisieren des Autorenzeilen-Sling-Modells

Um Daten über die Komponente in die Datenschicht einzufügen, aktualisieren wir zunächst das Sling-Modell der Komponente. Aktualisieren Sie als Nächstes die Java™-Schnittstelle der Autorenzeile und ihre Sling-Modell-Implementierung, um eine neue Methode getData() zu erhalten. Diese Methode enthält die Eigenschaften, die in die Datenschicht eingefügt werden sollen.

Öffnen Sie das Projekt aem-guides-wknd in der IDE Ihrer Wahl. Navigieren Sie zum core-Modul.
Öffnen Sie die Datei Byline.java unter core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Fügen Sie folgende Methode zur Schnittstelle hinzu:

public interface Byline {
    ...
    /***
     * Return data about the Byline Component to populate the data layer
     * @return String
     */
    String getData();
}

Öffnen Sie die Datei BylineImpl.java unter core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java. Das ist die Implementierung der Byline-Schnittstelle, die als Sling-Modell implementiert wird.
Fügen Sie am Anfang der Datei die folgenden Importanweisungen hinzu:
```
import java.util.HashMap;
import java.util.Map;
import org.apache.sling.api.resource.Resource;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.adobe.cq.wcm.core.components.util.ComponentUtils;
```
Die fasterxml.jackson-APIs werden verwendet, um die Daten zu serialisieren, die als JSON bereitgestellt werden sollen. Die ComponentUtils-AEM-Kernkomponenten werden verwendet, um zu überprüfen, ob die Datenschicht aktiviert ist.

Fügen Sie die nicht implementierte Methode getData() zu BylineImple.java hinzu:

public class BylineImpl implements Byline {
    ...
    @Override
    public String getData() {
        Resource bylineResource = this.request.getResource();
        // Use ComponentUtils to verify if the DataLayer is enabled
        if (ComponentUtils.isDataLayerEnabled(bylineResource)) {

            //Create a map of properties we want to expose
            Map<String, Object> bylineProperties = new HashMap<String,Object>();
            bylineProperties.put("@type", bylineResource.getResourceType());
            bylineProperties.put("name", this.getName());
            bylineProperties.put("occupation", this.getOccupations());
            bylineProperties.put("fileReference", image.getFileReference());

            //Use AEM Core Component utils to get a unique identifier for the Byline component (in case multiple are on the page)
            String bylineComponentID = ComponentUtils.getId(bylineResource, this.currentPage, this.componentContext);

            // Return the bylineProperties as a JSON String with a key of the bylineResource's ID
            try {
                return String.format("{\"%s\":%s}",
                    bylineComponentID,
                    // Use the ObjectMapper to serialize the bylineProperties to a JSON string
                    new ObjectMapper().writeValueAsString(bylineProperties));
            } catch (JsonProcessingException e) {

                LOGGER.error("Unable to generate dataLayer JSON string", e);
            }

        }
        // return null if the Data Layer is not enabled
        return null;
    }
}

In der obigen Methode wird eine neue HashMap verwendet, um die Eigenschaften zu erfassen, die als JSON verfügbar gemacht werden sollen. Beachten Sie, dass vorhandene Methoden wie getName() und getOccupations() verwendet werden. Der @type repräsentiert den eindeutigen Ressourcentyp der Komponente und ermöglicht es einem Client, Ereignisse und/oder Trigger anhand des Komponententyps einfach zu identifizieren.

Der ObjectMapper wird verwendet, um die Eigenschaften zu serialisieren und eine JSON-Zeichenfolge zurückzugeben. Diese JSON-Zeichenfolge kann dann in die Datenschicht eingefügt werden.

Öffnen Sie ein Terminal-Fenster. Erstellen und implementieren Sie nur das core-Modul mithilfe Ihrer Maven-Kenntnisse:
```
$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle
```

Aktualisieren Sie die Autorenzeilen-HTL.

Aktualisieren Sie anschließend die Byline-HTL. HTL (HTML-Vorlagensprache) ist die Vorlage zum Rendern der Komponenten-HTML.

Ein spezielles Datenattribut data-cmp-data-layer auf jeder AEM-Komponente wird verwendet, um ihre Datenschicht anzuzeigen. Das von AEM-Kernkomponenten bereitgestellte JavaScript sucht nach diesem Datenattribut. Der Wert dieses Datenattributs wird mit der JSON-Zeichenfolge gefüllt, die von der getData()-Methode des Autorenzeilen-Sling-Modells zurückgegeben und in die Adobe Client-Datenschicht eingefügt wird.

Öffnen Sie das aem-guides-wknd-Projekt in IDE. Navigieren Sie zum ui.apps-Modul.
Öffnen Sie die Datei byline.html unter ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.
Aktualisieren Sie byline.html, um das data-cmp-data-layer-Attribut einzuschließen:
```
  <div data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.Byline"
    data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
    data-sly-test.hasContent="${!byline.empty}"
+   data-cmp-data-layer="${byline.data}"
    class="cmp-byline">
    ...
```
Der Wert von data-cmp-data-layer wurde auf "${byline.data}" gesetzt, wobei byline das Sling-Modell ist, das zuvor aktualisiert wurde. .data ist die Standardnotation zum Aufrufen einer Java™-Getter-Methode in HTL vom in der vorangegangenen Übung implementierten getData().
Öffnen Sie ein Terminal-Fenster. Erstellen und implementieren Sie nur das ui.apps-Modul mithilfe Ihrer Maven-Kenntnisse:
```
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
```
Kehren Sie zum Browser zurück und öffnen Sie die Seite mit einer Autorenzeilen-Komponente erneut: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
Öffnen Sie die Entwickler-Tools und überprüfen Sie die HTML-Quelle der Seite für die Autorenzeilen-Komponente:

Sie sollten sehen, dass die data-cmp-data-layer mit der JSON-Zeichenfolge aus dem Sling-Modell gefüllt wurde.
Öffnen Sie die Entwickler-Tools des Browsers und geben Sie den folgenden Befehl in die Konsole ein:
```
window.adobeDataLayer.getState();
```
Navigieren Sie unter der Antwort zu component. Dort sehen Sie, dass die Instanz der byline-Komponente zur Datenschicht hinzugefügt wurde:

Es sollte ein Eintrag wie der folgende angezeigt werden:
```
byline-136073cfcb:
    @type: "wknd/components/byline"
    fileReference: "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
    name: "Stacey Roswells"
    occupation: (3) ["Artist", "Photographer", "Traveler"]
    parentId: "page-30d989b3f8"
```
Beachten Sie, dass die angezeigten Eigenschaften dieselben sind, die in der HashMap im Sling-Modell hinzugefügt wurden.

Hinzufügen eines Klick-Ereignisses

Die Adobe Client-Datenschicht ist ereignisgesteuert, und eines der häufigsten Ereignisse für das Auslösen einer Aktion ist das cmp:click-Ereignis. Die AEM-Kernkomponenten vereinfachen die Registrierung Ihrer Komponente mithilfe des Datenelements: data-cmp-clickable.

Klickbare Elemente sind normalerweise eine CTA-Schaltfläche oder ein Navigations-Link. Leider besitzt die Autprenzeilen-Komponente nichts davon, aber wir registrieren sie trotzdem, da dies für andere benutzerdefinierte Komponenten üblich sein könnte.

Öffnen Sie das ui.apps-Modul in Ihrer IDE
Öffnen Sie die Datei byline.html unter ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Aktualisieren Sie byline.html, um das data-cmp-clickable-Attribut im Namenselement der Autorenzeile einzuschließen:

  <h2 class="cmp-byline__name"
+    data-cmp-clickable="${byline.data ? true : false}">
     ${byline.name}
  </h2>

Öffnen Sie ein neues Terminal. Erstellen und implementieren Sie nur das ui.apps-Modul mithilfe Ihrer Maven-Kenntnisse:
```
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
```
Kehren Sie zum Browser zurück und öffnen Sie die Seite mit der hinzugefügten Autorenzeilen-Komponente erneut: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Zum Testen unseres Ereignisses fügen wir mithilfe von Developer Console manuell JavaScript hinzu. In Verwenden der Adobe Client-Datenschicht mit AEM-Kernkomponenten finden Sie ein Video dazu.

Öffnen Sie die Entwickler-Tools des Browsers und geben Sie den folgenden Befehl in die Konsole ein:

function bylineClickHandler(event) {
    var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
    if (dataObject != null && dataObject['@type'] === 'wknd/components/byline') {
        console.log("Byline Clicked!");
        console.log("Byline name: " + dataObject['name']);
    }
}

Diese einfache Methode sollte den Klick auf den Namen der Autorenzeilen-Komponente verarbeiten.

Geben Sie die folgende Methode in die Konsole ein:
```
window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:click", bylineClickHandler);
});
```
Die obige Methode überträgt einen Ereignis-Listener auf die Datenschicht zum Lauschen auf das Ereignis cmp:click und ruft den bylineClickHandler auf.

VORSICHT

Es ist wichtig, den Browser während dieser Übung nicht zu aktualisieren, da sonst das Konsolen-JavaScript verloren geht.
Klicken Sie im Browser mit geöffneter Konsole in der Autorenzeilne-Komponente auf den Autorennamen:

Die Konsolenmeldung Byline Clicked! und der Name der Autorenzeile sollten angezeigt werden.

Das cmp:click-Ereignis ist am einfachsten einzubinden. Für komplexere Komponenten und zur Verfolgung anderer Verhaltensweisen ist es möglich, benutzerdefiniertes JavaScript hinzuzufügen, um neue Ereignisse hinzuzufügen und zu registrieren. Ein gutes Beispiel ist die Karussellkomponente, die immer dann ein cmp:show-Ereignis auslöst, wenn eine Folie umgeschaltet wird. Siehe den Quell-Code für weitere Details.

Verwenden des DataLayerBuilder-Dienstprogramms

Als das Sling-Modell am Anfang des Kapitels aktualisiert wurde, haben wir uns dafür entschieden, die JSON-Zeichenfolge mithilfe einer HashMap zu erstellen und jede Eigenschaft manuell festzulegen. Diese Methode funktioniert in Bezug auf kleine, einmalige Komponenten einwandfrei. Bei Komponenten, die die AEM-Kernkomponenten erweitern, kann dies jedoch zu viel zusätzlichem Code führen.

Eine Dienstprogrammklasse, DataLayerBuilder, dient für den größten Teil der schweren Hebearbeit. Dadurch können Implementierungen nur die Eigenschaften erweitern, die sie benötigen. Aktualisieren wir das Sling-Modell, um den DataLayerBuilder zu verwenden.

Kehren Sie zur IDE zurück und navigieren Sie zum core-Modul.
Öffnen Sie die Datei Byline.java unter core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.
Ändern Sie die getData()-Methode, um einen ComponentData-Typ zurückzugeben.
```
import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
...
public interface Byline {
    ...
    /***
     * Return data about the Byline Component to populate the data layer
     * @return ComponentData
     */
    ComponentData getData();
}
```
ComponentData ist ein Objekt, das von AEM-Kernkomponenten bereitgestellt wird. Dies führt wie im vorherigen Beispiel zu einer JSON-Zeichenfolge, führt aber auch viele zusätzliche Arbeiten durch.
Öffnen Sie die Datei BylineImpl.java unter core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java.

Fügen Sie die folgenden Importanweisungen hinzu:

import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder;

Ersetzen Sie die getData()-Methode durch die folgende:
```
@Override
public ComponentData getData() {
    Resource bylineResource = this.request.getResource();
    // Use ComponentUtils to verify if the DataLayer is enabled
    if (ComponentUtils.isDataLayerEnabled(bylineResource)) {

        return DataLayerBuilder.extending(getImage().getData()).asImageComponent()
            .withTitle(this::getName)
            .build();

    }
    // return null if the Data Layer is not enabled
    return null;
}
```
Die Autorenzeilen-Komponente verwendet Teile der Bild-Kernkomponente erneut, um ein Bild anzuzeigen, das die Autorin oder den Autor darstellt. Im obigen Snippet wird der DataLayerBuilder verwendet, um die Datenschicht der Image-Komponente zu erweitern. Dadurch wird das JSON-Objekt mit allen Daten zum verwendeten Bild vorausgefüllt. Es erfüllt auch einige der Routinefunktionen wie das Festlegen des @type und der eindeutigen Kennung der Komponente. Beachten Sie, dass die Methode klein ist!

Die einzige Eigenschaft erweitert die withTitle, die durch den Wert von getName() ersetzt wird.
Öffnen Sie ein Terminal-Fenster. Erstellen und implementieren Sie nur das core-Modul mithilfe Ihrer Maven-Kenntnisse:
```
$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle
```
Kehren Sie zur IDE zurück und öffnen Sie die Datei byline.html unter ui.apps.
Führen Sie eine HTL-Aktualisierung durch, um mithilfe von byline.data.json das Attribut data-cmp-data-layer aufzufüllen:
```
  <div data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.Byline"
    data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
    data-sly-test.hasContent="${!byline.empty}"
-   data-cmp-data-layer="${byline.data}"
+   data-cmp-data-layer="${byline.data.json}"
```
Denken Sie daran, dass wir jetzt ein Objekt vom Typ ComponentData zurückgeben. Dieses Objekt enthält die Getter-Methode getJson(), worüber das Attribut data-cmp-data-layer aufgefüllt wird.
Öffnen Sie ein Terminal-Fenster. Erstellen und implementieren Sie nur das ui.apps-Modul mithilfe Ihrer Maven-Kenntnisse:
```
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
```
Kehren Sie zum Browser zurück und öffnen Sie die Seite mit der hinzugefügten Autorenzeilen-Komponente erneut: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
Öffnen Sie die Entwickler-Tools des Browsers und geben Sie den folgenden Befehl in die Konsole ein:
```
window.adobeDataLayer.getState();
```
Navigieren Sie unter der Antwort unter component, um die Instanz der byline-Komponente zu finden:

Es sollte ein Eintrag wie der folgende angezeigt werden:
```
byline-136073cfcb:
    @type: "wknd/components/byline"
    dc:title: "Stacey Roswells"
    image:
        @type: "image/jpeg"
        repo:id: "142658f8-4029-4299-9cd6-51afd52345c0"
        repo:modifyDate: "2019-10-25T23:49:51Z"
        repo:path: "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
        xdm:tags: []
    parentId: "page-30d989b3f8"
    repo:modifyDate: "2019-10-18T20:17:24Z"
```
Wie Sie sehen, ist nun ein image-Objekt innerhalb des Komponenteneintrags byline vorhanden. Dieses enthält wesentlich mehr Informationen zum Asset im DAM. Außerdem wurden @type, die eindeutige ID (in diesem Fall byline-136073cfcb) und repo:modifyDate automatisch aufgefüllt. Letzteres gibt an, wann die Komponente geändert wurde.

Weitere Beispiele

Ein weiteres Beispiel für die Erweiterung der Datenschicht ist zu finden, wenn Sie sich die ImageList-Komponente in der WKND-Code-Basis ansehen:
- ImageList.java – Java-Schnittstelle im core-Modul
- ImageListImpl.java – Sling-Modell im core-Modul
- image-list.html – HTL-Vorlage im ui.apps-Modul
HINWEIS

Es ist etwas schwieriger, benutzerdefinierte Eigenschaften wie occupation bei Verwendung von DataLayerBuilder einzuschließen. Wenn Sie jedoch eine Kernkomponente erweitern, die ein Bild oder eine Seite umfasst, spart das Dienstprogramm viel Zeit.

HINWEIS

Beim Erstellen einer erweiterten Datenschicht für Objekte, die in einer Implementierung wiederverwendet werden, wird empfohlen, die Datenschichtelemente in ihre eigenen, datenschichtspezifischen Java™-Objekte zu extrahieren. Beispielsweise besitzen die Commerce-Kernkomponenten Schnittstellen für ProductData und CategoryData, da diese für viele Komponenten innerhalb einer Commerce-Implementierung verwendet werden können. Weitere Informationen finden Sie im Code im aem-cif-core-components-Repository.

Herzlichen Glückwunsch!

Sie haben gerade verschiedene Möglichkeiten kennengelernt, um die Adobe Client-Datenschicht mit AEM-Komponenten zu erweitern und anzupassen.

Zusätzliche Ressourcen

Vorherige Seite

Anpassen der Adobe Client-Datenschicht mit AEM-Komponenten

Was Sie erstellen werden

Ziele

Voraussetzungen

Herunterladen und Bereitstellen der WKND-Referenz-Site

Aktualisieren des Autorenzeilen-Sling-Modells

Aktualisieren Sie die Autorenzeilen-HTL.

Hinzufügen eines Klick-Ereignisses

Verwenden des DataLayerBuilder-Dienstprogramms

Weitere Beispiele

Herzlichen Glückwunsch!

Zusätzliche Ressourcen

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe