Anpassen der Adobe Client-Datenschicht mit AEM-Komponenten customize-data-layer

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

Ö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.

Ö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

Ö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.

Ö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.

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.

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.

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