Personalizzare Adobe Client Data Layer con i componenti AEM customize-data-layer

Avvia un'istanza locale Quickstart author dell'AEM in esecuzione alle http://localhost:4502.

Apri una finestra del terminale e clona la base di codice WKND utilizzando Git:

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

Distribuisci la base di codice WKND in un’istanza locale di AEM:

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

Apri una nuova finestra del browser e accedi all’AEM. Apri una pagina di Rivista come: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Dovresti trovare un esempio del componente Byline aggiunto alla pagina come parte di un frammento di esperienza. Puoi visualizzare il frammento di esperienza in http://localhost:4502/editor.html/content/experience-fragments/wknd/language-masters/en/contributors/stacey-roswells/byline.html

Apri gli strumenti per sviluppatori e immetti il comando seguente nella Console:

window.adobeDataLayer.getState();

Per visualizzare lo stato corrente del livello dati su un sito AEM, controlla la risposta. Dovresti visualizzare informazioni sulla pagina e sui singoli componenti.

Il componente Byline non è elencato in Data Layer.

Aprire il progetto aem-guides-wknd nell'IDE desiderato. Passare al modulo core.

Aprire il file Byline.java in core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Aggiungi il metodo seguente all’interfaccia:

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

Aprire il file BylineImpl.java in core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java. Si tratta dell'implementazione dell'interfaccia Byline e viene implementata come modello Sling.

Aggiungi le seguenti istruzioni di importazione all’inizio del file:

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;

Le API fasterxml.jackson vengono utilizzate per serializzare i dati da esporre come JSON. ComponentUtils dei componenti core AEM vengono utilizzati per verificare se Data Layer è abilitato.

Aggiungere il metodo non implementato getData() a 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;
    }
}

Nel metodo precedente, viene utilizzato un nuovo HashMap per acquisire le proprietà da esporre come JSON. Si noti che vengono utilizzati metodi esistenti come getName() e getOccupations(). @type rappresenta il tipo di risorsa univoco del componente e consente a un client di identificare facilmente eventi e/o trigger in base al tipo di componente.

ObjectMapper viene utilizzato per serializzare le proprietà e restituire una stringa JSON. Questa stringa JSON può quindi essere inserita nel livello dati.

Apri una finestra del terminale. Crea e distribuisci solo il modulo core utilizzando le tue abilità Maven:

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

Aprire il progetto aem-guides-wknd nell'IDE. Passare al modulo ui.apps.

Aprire il file byline.html in ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Aggiorna byline.html per includere l'attributo 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">
    ...

Il valore di data-cmp-data-layer è stato impostato su "${byline.data}" dove byline è il modello Sling aggiornato in precedenza. .data è la notazione standard per la chiamata di un metodo Java™ Getter in HTL di getData() implementato nell'esercizio precedente.

Apri una finestra del terminale. Crea e distribuisci solo il modulo ui.apps utilizzando le tue abilità Maven:

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

Tornare al browser e riaprire la pagina con un componente Byline: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Apri gli strumenti per sviluppatori e controlla l’origine HTML della pagina per il componente Byline:

Dovresti notare che data-cmp-data-layer è stato popolato con la stringa JSON del modello Sling.

Apri gli strumenti per sviluppatori del browser e immetti il comando seguente nella Console:

window.adobeDataLayer.getState();

Passa sotto la risposta in component per trovare l'istanza del componente byline aggiunta al livello dati:

Dovresti trovare una voce simile alla seguente:

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"

Tieni presente che le proprietà esposte sono le stesse aggiunte in HashMap nel modello Sling.

Apri il modulo ui.apps nell'IDE

Aprire il file byline.html in ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Aggiorna byline.html per includere l'attributo data-cmp-clickable nell'elemento name di Byline:

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

Apri un nuovo terminale. Crea e distribuisci solo il modulo ui.apps utilizzando le tue abilità Maven:

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

Tornare al browser e riaprire la pagina con il componente Byline aggiunto: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Per testare il nostro evento, aggiungeremo manualmente un po’ di JavaScript utilizzando la Developer Console. Per un video su come eseguire questa operazione, vedi Utilizzo di Adobe Client Data Layer con i componenti core AEM.

Apri gli strumenti per sviluppatori del browser e immetti il metodo seguente nella Console:

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

Questo metodo semplice deve gestire il clic del nome del componente Byline.

Immetti il seguente metodo nella Console:

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

Il metodo precedente invia un listener di eventi sul livello dati per l'ascolto dell'evento cmp:click e chiama bylineClickHandler.

Nel browser, con Console aperta, fare clic sul nome dell'autore nel componente Byline:

Dovrebbero essere visualizzati il messaggio della console Byline Clicked! e il nome della riga di comando.

L'evento cmp:click è il più semplice da collegare. Per i componenti più complessi e per tenere traccia di altri comportamenti, è possibile aggiungere JavaScript personalizzati per aggiungere e registrare nuovi eventi. Un ottimo esempio è il componente Carosello, che attiva un evento cmp:show ogni volta che viene attivata una diapositiva. Per ulteriori dettagli, consulta il codice sorgente.

Tornare all'IDE e passare al modulo core.

Aprire il file Byline.java in core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Modificare il metodo getData() per restituire un tipo di 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 è un oggetto fornito dai componenti core AEM. Genera una stringa JSON, come nell’esempio precedente, ma esegue anche un sacco di lavoro aggiuntivo.

Aprire il file BylineImpl.java in core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java.

Aggiungi le seguenti istruzioni di importazione:

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

Sostituire il metodo getData() con il seguente:

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

Il componente Byline riutilizza parti del componente core Immagine per visualizzare un’immagine che rappresenta l’autore. Nel frammento precedente, DataLayerBuilder viene utilizzato per estendere il livello dati del componente Image. L’oggetto JSON viene precompilato con tutti i dati sull’immagine utilizzata. Esegue inoltre alcune delle funzioni di routine come l'impostazione di @type e l'identificatore univoco del componente. Nota che il metodo è piccolo!

L'unica proprietà ha esteso withTitle, che viene sostituito con il valore di getName().

Apri una finestra del terminale. Crea e distribuisci solo il modulo core utilizzando le tue abilità Maven:

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

Torna all'IDE e apri il file byline.html in ui.apps

Aggiorna HTL per utilizzare byline.data.json per popolare l'attributo 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}"

Ricordare che è in corso la restituzione di un oggetto di tipo ComponentData. Questo oggetto include un metodo getter getJson() utilizzato per popolare l'attributo data-cmp-data-layer.

Apri una finestra del terminale. Crea e distribuisci solo il modulo ui.apps utilizzando le tue abilità Maven:

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

Tornare al browser e riaprire la pagina con il componente Byline aggiunto: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Apri gli strumenti per sviluppatori del browser e immetti il comando seguente nella Console:

window.adobeDataLayer.getState();

Passare sotto la risposta in component per trovare l'istanza del componente byline:

Dovresti trovare una voce simile alla seguente:

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"

Si noti che ora è presente un oggetto image all'interno della voce del componente byline. Questa contiene molte più informazioni sulla risorsa in DAM. Inoltre, osserva che @type e l'ID univoco (in questo caso byline-136073cfcb) sono stati compilati automaticamente, e repo:modifyDate che indica quando il componente è stato modificato.

Un altro esempio di estensione del livello dati può essere visualizzato esaminando il componente ImageList nella base di codice WKND:

• ImageList.java - Interfaccia Java nel modulo core.
• ImageListImpl.java - Modello Sling nel modulo core.
• image-list.html - Modello HTL nel modulo ui.apps.