Anpassa Adobe-klientdatalagret med AEM customize-data-layer

Starta en lokal QuickStart author-instans av AEM som körs på http://localhost:4502.

Öppna ett terminalfönster och klona WKND-kodbasen med Git:

$ git clone git@github.com:adobe/aem-guides-wknd.git

Distribuera WKND-kodbasen till en lokal instans av AEM:

$ cd aem-guides-wknd
$ mvn clean install -PautoInstallSinglePackage

Öppna ett nytt webbläsarfönster och logga in på AEM. Öppna en tidskriftssida som: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Du bör se ett exempel på den Byline-komponent som har lagts till på sidan som en del av ett Experience Fragment. Du kan visa Experience Fragment på http://localhost:4502/editor.html/content/experience-fragments/wknd/language-masters/en/contributors/stacey-roswells/byline.html

Öppna dina utvecklarverktyg och ange följande kommando i konsolen:

window.adobeDataLayer.getState();

Om du vill se det aktuella läget för datalagret på en AEM plats kontrollerar du svaret. Du bör se information om sidan och enskilda komponenter.

Observera att komponenten Byline inte finns med i datalagret.

Öppna projektet aem-guides-wknd i den utvecklingsmiljö du vill använda. Navigera till modulen core.

Öppna filen Byline.java vid core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Lägg till nedanstående metod i gränssnittet:

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

Öppna filen BylineImpl.java vid core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java. Det är implementeringen av gränssnittet Byline och implementeras som en Sling-modell.

Lägg till följande importsatser i början av filen:

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;

fasterxml.jackson API:er används för att serialisera data som ska visas som JSON. ComponentUtils AEM kärnkomponenter används för att kontrollera om datalagret är aktiverat.

Lägg till den oimplementerade metoden getData() i 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;
    }
}

I ovanstående metod används en ny HashMap för att hämta de egenskaper som ska visas som JSON. Observera att befintliga metoder som getName() och getOccupations() används. @type representerar komponentens unika resurstyp, vilket gör att en klient enkelt kan identifiera händelser och/eller utlösare baserat på komponenttypen.

ObjectMapper används för att serialisera egenskaperna och returnera en JSON-sträng. Denna JSON-sträng kan sedan infogas i datalagret.

Öppna ett terminalfönster. Skapa och distribuera bara modulen core med dina Maven-kunskaper:

$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle

Öppna projektet aem-guides-wknd i IDE. Navigera till modulen ui.apps.

Öppna filen byline.html vid ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Uppdatera byline.html om du vill inkludera attributet data-cmp-data-layer:

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

Värdet för data-cmp-data-layer har angetts till "${byline.data}" där byline är den tidigare uppdaterade delningsmodellen. .data är standardnotation för anrop av Java™ Getter-metoden i HTML-koden för getData() som implementerades i föregående övning.

Öppna ett terminalfönster. Skapa och distribuera bara modulen ui.apps med dina Maven-kunskaper:

$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage

Gå tillbaka till webbläsaren och öppna sidan igen med en Byline-komponent: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Öppna utvecklingsverktygen och kontrollera HTML-källan för sidan för att se om det finns en Byline-komponent:

Du bör se att data-cmp-data-layer har fyllts i med JSON-strängen från Sling-modellen.

Öppna webbläsarens utvecklarverktyg och ange följande kommando i konsolen:

window.adobeDataLayer.getState();

Navigera under svaret under component för att hitta instansen av komponenten byline som har lagts till i datalagret:

med penna

Du bör se ett inlägg som följande:

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"

Observera att de egenskaper som visas är samma som läggs till i HashMap i segmentmodellen.

Öppna modulen ui.apps i din IDE

Öppna filen byline.html vid ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Uppdatera byline.html så att attributet data-cmp-clickable inkluderas i Bylines name-element:

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

Öppna en ny terminal. Skapa och distribuera bara modulen ui.apps med dina Maven-kunskaper:

$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage

Gå tillbaka till webbläsaren och öppna sidan igen med komponenten Byline tillagd: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

För att testa vår aktivitet lägger vi till JavaScript manuellt med hjälp av utvecklarkonsolen. Se Använda Adobe-klientdatalagret med AEM kärnkomponenter för en video om hur du gör detta.

Öppna webbläsarens utvecklarverktyg och ange följande metod i konsolen:

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']);
    }
}

Den här enkla metoden bör hantera klickningen på namnet på komponenten Byline.

Ange följande metod i konsolen:

window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:click", bylineClickHandler);
});

Ovanstående metod överför en händelseavlyssnare till datalagret för att avlyssna händelsen cmp:click och anropar bylineClickHandler.

I webbläsaren klickar du på författarens namn i Byline-komponenten när konsolen är öppen:

Du bör se konsolmeddelandet Byline Clicked! och namnet på byteboken.

Händelsen cmp:click är enklast att koppla in sig i. För mer komplexa komponenter och för att spåra andra beteenden är det möjligt att lägga till anpassade JavaScript för att lägga till och registrera nya händelser. Ett bra exempel är Carousel-komponenten, som utlöser en cmp:show-händelse när en bild växlas. Mer information finns i källkoden.

Återgå till IDE och navigera till modulen core.

Öppna filen Byline.java vid core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Ändra metoden getData() för att returnera typen 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 är ett objekt som tillhandahålls av AEM kärnkomponenter. Det resulterar i en JSON-sträng, precis som i det föregående exemplet, men utför även en hel del extraarbete.

Öppna filen BylineImpl.java vid core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java.

Lägg till följande importsatser:

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

Ersätt metoden getData() med följande:

@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;
}

Komponenten Byline återanvänder delar av Image Core Component för att visa en bild som representerar författaren. I ovanstående kodutdrag används DataLayerBuilder för att utöka datalagret för komponenten Image. JSON-objektet fylls i automatiskt med alla data om bilden som används. Den utför även några av rutinfunktionerna som att ställa in @type och komponentens unika identifierare. Observera att metoden är liten!

Den enda egenskapen utökade withTitle som ersätts med värdet getName().

Öppna ett terminalfönster. Skapa och distribuera bara modulen core med dina Maven-kunskaper:

$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle

Återgå till IDE och öppna filen byline.html under ui.apps

Uppdatera HTML så att byline.data.json används för att fylla i attributet data-cmp-data-layer:

  <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}"

Kom ihåg att vi nu returnerar ett objekt av typen ComponentData. Det här objektet innehåller en get-metod getJson() och det används för att fylla i attributet data-cmp-data-layer.

Öppna ett terminalfönster. Skapa och distribuera bara modulen ui.apps med dina Maven-kunskaper:

$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage

Gå tillbaka till webbläsaren och öppna sidan igen med komponenten Byline tillagd: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Öppna webbläsarens utvecklarverktyg och ange följande kommando i konsolen:

window.adobeDataLayer.getState();

Navigera under svaret under component för att hitta instansen av komponenten byline:

Du bör se ett inlägg som följande:

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"

Observera att det nu finns ett image-objekt i byline-komponentposten. Här finns mycket mer information om resursen i DAM. Observera också att @type och det unika ID:t (i det här fallet byline-136073cfcb) har fyllts i automatiskt och att repo:modifyDate anger när komponenten ändrades.

Ett annat exempel på hur du utökar datalagret kan visas genom att undersöka komponenten ImageList i WKND-kodbasen:

• ImageList.java - Java-gränssnittet i modulen core.
• ImageListImpl.java - Sling Model i modulen core.
• image-list.html - HTML-mall i modulen ui.apps.