Anpassen der Adobe Client-Datenschicht mit AEM Komponenten

Erfahren Sie, wie Sie die Adobe Client-Datenschicht mit Inhalten aus benutzerdefinierten AEM anpassen. Erfahren Sie, wie Sie die APIs verwenden, die von AEM der zu erweiternden Kernkomponenten und passen Sie die Datenschicht an.

Was Sie erstellen werden

Byte-Datenschicht

In diesem Tutorial werden verschiedene Optionen zur Erweiterung der Adobe Client-Datenschicht durch Aktualisierung des WKND untersucht. Byte-Komponente. Die Byte Komponente ist benutzerdefinierte Komponente und in diesem Tutorial gelernte Lektionen können auf andere benutzerdefinierte Komponenten angewendet werden.

Ziele

Fügen Sie Komponentendaten in die Datenschicht ein, indem Sie ein Sling-Modell und eine Komponenten-HTL erweitern.
Verwenden Sie Datenschichtprogramme der Kernkomponenten, um den Aufwand zu reduzieren
Verwenden Sie die Datenattribute der Kernkomponente , um in vorhandene Datenschichtereignisse einzubinden

Voraussetzungen

A lokale Entwicklungsumgebung ist erforderlich, um dieses Tutorial abzuschließen. Screenshots und Videos werden mit dem AEM as a Cloud Service SDK erfasst, das auf einer 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 die Befolgen Sie die Anleitung zum Einrichten einer lokalen Entwicklungsumgebung mit dem AEM as a Cloud Service SDK..

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

Herunterladen und Bereitstellen der WKND-Referenz-Website

In diesem Tutorial wird die Byline-Komponente auf der WKND-Referenz-Site erweitert. Klonen und installieren Sie die WKND-Codebasis in Ihrer lokalen Umgebung.

Starten eines lokalen Schnellstarts author Instanz AEM ausgeführt am http://localhost:4502.
Öffnen Sie ein Terminal-Fenster und klonen Sie die WKND-Codebasis mithilfe von Git:
```
$ git clone git@github.com:adobe/aem-guides-wknd.git
```
Stellen Sie die WKND-Codebasis in einer lokalen Instanz von AEM bereit:
```
$ cd aem-guides-wknd
$ mvn clean install -PautoInstallSinglePackage
```
HINWEIS

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

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

Es sollte ein Beispiel der Byline-Komponente angezeigt werden, die der Seite als Teil eines Experience Fragment 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
Öffnen Sie Ihre Entwickler-Tools und geben Sie den folgenden Befehl in das Konsole:
```
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 Byline-Komponente nicht auf der Datenschicht aufgeführt ist.

Aktualisieren des Byline 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 und die Sling-Modell-Implementierung von Byline, um eine neue Methode zu erhalten. getData(). Diese Methode enthält die Eigenschaften, die in die Datenschicht eingefügt werden sollen.

Öffnen Sie die aem-guides-wknd -Projekt 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. Es ist die Umsetzung der Byline und wird als Sling-Modell implementiert.
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.

Die nicht implementierte Methode hinzufügen getData() nach BylineImple.java:

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 wird 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. Die @type den eindeutigen Ressourcentyp der Komponente darstellt, ermöglicht es einem Client, Ereignisse und/oder Trigger anhand des Komponententyps einfach zu identifizieren.

Die 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 Bereitstellen von nur core Modul unter Verwendung Ihrer Maven-Fähigkeiten:
```
$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle
```

Aktualisieren der Byline-HTL

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

Ein spezielles Datenattribut data-cmp-data-layer auf jeder AEM Komponente verwendet wird, um ihre Datenschicht anzuzeigen. Von AEM Kernkomponenten bereitgestelltes JavaScript sucht nach diesem Datenattribut. Der Wert dieses Datenattributs wird mit der JSON-Zeichenfolge gefüllt, die von der getData() Methode und in die Adobe Client Data-Ebene eingefügt.

Öffnen Sie die aem-guides-wknd -Projekt in die 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 byline.html , um data-cmp-data-layer Attribut:
```
  <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}" where byline ist das Sling-Modell, das zuvor aktualisiert wurde. .data ist die Standardnotation zum Aufrufen einer Java™ Getter-Methode in HTL von getData() in der vorangegangenen Übung umgesetzt.
Öffnen Sie ein Terminal-Fenster. Erstellen und Bereitstellen von nur ui.apps Modul unter Verwendung Ihrer Maven-Fähigkeiten:
```
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
```
Kehren Sie zum Browser zurück und öffnen Sie die Seite mit einer Byline-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 Byline-Komponente:

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

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 im Abschnitt HashMap im Sling-Modell.

Klickereignis hinzufügen

Die Adobe Client-Datenschicht ist ereignisgesteuert und eines der häufigsten Ereignisse für den Trigger einer Aktion ist die 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 hat die Komponente "Byline"keine davon, aber wir registrieren sie auf jeden Fall, da dies für andere benutzerdefinierte Komponenten üblich sein könnte.

Öffnen Sie die 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 byline.html , um data-cmp-clickable -Attribut im name element:

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

Öffnen Sie ein neues Terminal. Erstellen und Bereitstellen von nur ui.apps Modul unter Verwendung Ihrer Maven-Fähigkeiten:
```
$ 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 Byline-Komponente erneut: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Zum Testen unseres Ereignisses fügen wir mithilfe der Entwicklerkonsole manuell JavaScript hinzu. Siehe Verwenden der Adobe Client-Datenschicht in Verbindung mit AEM Kernkomponenten für ein Video dazu.

Öffnen Sie die Entwicklertools des Browsers und geben Sie die folgende Methode in die Konsole:

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 Byline-Komponente verarbeiten.

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

VORSICHT

Es ist wichtig not , um den Browser während dieser Übung zu aktualisieren, da ansonsten das JavaScript-Konsolen-JavaScript verloren geht.
Im Browser mit dem Konsole öffnen, klicken Sie in der Komponente "Byline"auf den Namen des Autors:

Die Konsolenmeldung sollte angezeigt werden. Byline Clicked! und den Namen der Byline.

Die 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 großartiges Beispiel ist die Karussellkomponente , die einen Trigger cmp:show -Ereignis immer dann, wenn eine Folie umgeschaltet wird. Siehe Quellcode für weitere Details.

Verwenden des DataLayerBuilder-Dienstprogramms

Zeitpunkt, zu dem das Sling-Modell aktualisiert Anfang des Kapitels haben wir uns dafür entschieden, die JSON-Zeichenfolge mithilfe einer HashMap und legen Sie jede Eigenschaft manuell fest. 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, besteht für den größten Teil der schweren Anhebung. Dadurch können Implementierungen nur die Eigenschaften erweitern, die sie benötigen. Aktualisieren wir das Sling-Modell, um die DataLayerBuilder.

Kehren Sie zur IDE zurück und navigieren Sie zur 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 Typ von ComponentData

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 mit der folgenden:
```
@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 Byline-Komponente verwendet Teile der Bild-Kernkomponente erneut, um ein Bild anzuzeigen, das den Autor darstellt. Im obigen Snippet wird die DataLayerBuilder wird verwendet, um die Datenschicht der Image -Komponente. Dadurch wird das JSON-Objekt mit allen Daten zum verwendeten Bild vorausgefüllt. Es erfüllt auch einige der Routinefunktionen wie das Festlegen der @type und die eindeutige Kennung der Komponente. Beachten Sie, dass die Methode klein ist!

Die einzige Eigenschaft erweiterte die withTitle wird durch den Wert von getName().
Öffnen Sie ein Terminal-Fenster. Erstellen und Bereitstellen von nur core Modul unter Verwendung Ihrer Maven-Fähigkeiten:
```
$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle
```
Kehren Sie zur IDE zurück und öffnen Sie die byline.html Datei unter ui.apps

Zu verwendende HTL aktualisieren byline.data.json , um die data-cmp-data-layer Attribut:

  <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, jetzt ein Objekt vom Typ ComponentData. Dieses Objekt enthält eine Getter-Methode getJson() und wird verwendet, um die data-cmp-data-layer -Attribut.

Öffnen Sie ein Terminal-Fenster. Erstellen und Bereitstellen von nur ui.apps Modul unter Verwendung Ihrer Maven-Fähigkeiten:
```
$ 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 Byline-Komponente erneut: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
Öffnen Sie die Entwicklertools des Browsers und geben Sie den folgenden Befehl in die Konsole:
```
window.adobeDataLayer.getState();
```
Navigieren Sie unter der Antwort unter component , um die Instanz der byline component:

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"
```
Beachten Sie, dass jetzt eine image -Objekt innerhalb der byline Komponenteneintrag. Dies enthält viel mehr Informationen über das Asset im DAM. Beachten Sie auch, dass @type und die eindeutige ID (in diesem Fall byline-136073cfcb) automatisch ausgefüllt wurden und die repo:modifyDate , der angibt, wann die Komponente geändert wurde.

Zusätzliche Beispiele

Ein weiteres Beispiel für die Erweiterung der Datenschicht kann durch Überprüfen der ImageList -Komponente in der WKND-Codebasis:
- ImageList.java - Java-Schnittstelle in der 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 der DataLayerBuilder. Wenn Sie jedoch eine Kernkomponente erweitern, die ein Bild oder eine Seite enthält, 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 Java™-Objekte zu extrahieren, die für die Datenschicht spezifisch sind. Beispielsweise haben die Commerce-Kernkomponenten Schnittstellen für ProductData und CategoryData da diese für viele Komponenten innerhalb einer Commerce-Implementierung verwendet werden können. Überprüfen den Code im aem-cif-core-components-repo für weitere Details.

Herzlichen Glückwunsch!

Sie haben gerade einige Möglichkeiten untersucht, um die Adobe Client-Datenschicht mit AEM Komponenten zu erweitern und anzupassen!

Anpassen der Adobe Client-Datenschicht mit AEM Komponenten

Was Sie erstellen werden

Ziele

Voraussetzungen

Herunterladen und Bereitstellen der WKND-Referenz-Website

Aktualisieren des Byline Sling-Modells

Aktualisieren der Byline-HTL

Klickereignis hinzufügen

Verwenden des DataLayerBuilder-Dienstprogramms

Zusätzliche Beispiele

Herzlichen Glückwunsch!

Zusätzliche Ressourcen

Ressourcen für Business.Adobe.com

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe