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

Scopri come personalizzare Adobe Client Data Layer con i contenuti dei componenti AEM personalizzati. Scopri come utilizzare le API fornite da Componenti core AEM da estendere e personalizzare il livello dati.

Cosa intendi creare

Livello dati di Byline

In questa esercitazione esploreremo varie opzioni per estendere Adobe Client Data Layer aggiornando il WKND Componente Byline. Il Nome autore il componente è un componente personalizzato e le lezioni apprese in questa esercitazione possono essere applicate ad altri componenti personalizzati.

Obiettivi objective

  1. Inserisci i dati dei componenti nel livello dati estendendo un modello Sling e un codice HTL del componente
  2. Utilizzare le utility dei livelli dati dei Componenti core per ridurre l’impegno
  3. Utilizzare gli attributi di dati dei Componenti core per agganciare gli eventi dei livelli di dati esistenti

Prerequisiti prerequisites

A ambiente di sviluppo locale è necessario per completare questa esercitazione. Le schermate e i video vengono acquisiti mediante l’SDK as a Cloud Service per l’AEM in esecuzione su un macOS. I comandi e il codice sono indipendenti dal sistema operativo locale, salvo diversa indicazione.

Ti avvicini adesso ad AEM as a Cloud Service? Consulta la seguente guida per configurare un ambiente di sviluppo locale utilizzando SDK di AEM as a Cloud Service.

Ti avvicini ora a AEM 6.5? Consulta la sezione guida seguente alla configurazione di un ambiente di sviluppo locale.

Scarica e distribuisci il sito di riferimento WKND set-up-wknd-site

Questa esercitazione estende il componente Byline nel sito di riferimento WKND. Clona e installa la base di codice WKND nell’ambiente locale.

  1. Avvia un Quickstart locale autore istanza di AEM in esecuzione alle ore http://localhost:4502.

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

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd.git
    
  3. Distribuisci la base di codice WKND in un’istanza locale di AEM:

    code language-shell
    $ cd aem-guides-wknd
    $ mvn clean install -PautoInstallSinglePackage
    
    note note
    NOTE
    Per AEM 6.5 e il service pack più recente, aggiungi classic profilo al comando Maven:
    mvn clean install -PautoInstallSinglePackage -Pclassic
  4. Apri una nuova finestra del browser e accedi all’AEM. Apri un Rivista pagina come: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

    Componente Byline sulla pagina

    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

  5. Apri gli strumenti per sviluppatori e immetti il comando seguente nel Console:

    code language-js
    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.

    Adobe di risposta del livello dati

    Il componente Byline non è elencato in Data Layer.

Aggiornare il modello Sling Byline sling-model

Per inserire dati sul componente nel livello dati, aggiorniamo prima il modello Sling del componente. Quindi, aggiorna l’interfaccia Java™ di Byline e l’implementazione del modello Sling per avere un nuovo metodo. getData(). Questo metodo contiene le proprietà da inserire nel livello dati.

  1. Apri aem-guides-wknd progetto nell’IDE che preferisci. Accedi a core modulo.

  2. Apri il file Byline.java a core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

    Interfaccia Java Byline

  3. Aggiungi il metodo seguente all’interfaccia:

    code language-java
    public interface Byline {
        ...
        /***
         * Return data about the Byline Component to populate the data layer
         * @return String
         */
        String getData();
    }
    
  4. Apri il file BylineImpl.java a core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java. È l'attuazione del Byline e viene implementato come modello Sling.

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

    code language-java
    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;
    

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

  6. Aggiungi il metodo non implementato getData() a BylineImple.java:

    code language-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 visualizzata una nuova HashMap viene utilizzato per acquisire le proprietà da esporre come JSON. Tieni presente che i metodi esistenti come getName() e getOccupations() vengono utilizzati. Il @type rappresenta il tipo di risorsa univoco del componente, consente a un client di identificare facilmente eventi e/o trigger in base al tipo di componente.

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

  7. Apri una finestra del terminale. Genera e implementa solo il core utilizzando le abilità Maven:

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

Aggiornare il codice HTL della linea di base htl

Quindi, aggiorna Byline HTL. HTL (HTML Template Language) è il modello utilizzato per eseguire il rendering del HTML del componente.

Un attributo di dati speciale data-cmp-data-layer su ciascun Componente AEM viene utilizzato per esporre il suo livello di dati. Il codice JavaScript fornito dai componenti core dell’AEM cerca questo attributo di dati. Il valore di questo attributo di dati viene popolato con la stringa JSON restituita dal modello Sling Byline getData() e inseriti nel livello dati client Adobe.

  1. Apri aem-guides-wknd nell'IDE. Accedi a ui.apps modulo.

  2. Apri il file byline.html a ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

    Byline HTML

  3. Aggiorna byline.html per includere data-cmp-data-layer attributo:

    code language-diff
      <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 chiamare un metodo Java™ Getter in HTL di getData() attuato nell'esercizio precedente.

  4. Apri una finestra del terminale. Genera e implementa solo il ui.apps utilizzando le abilità Maven:

    code language-shell
    $ cd aem-guides-wknd/ui.apps
    $ mvn clean install -PautoInstallPackage
    
  5. Torna al browser e riapri la pagina con un componente Byline: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

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

    Livello dati di Byline

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

  7. Apri gli strumenti di sviluppo del browser e immetti il comando seguente nel Console:

    code language-js
    window.adobeDataLayer.getState();
    
  8. Passa sotto la risposta in component per trovare l’istanza di byline il componente è stato aggiunto al livello dati:

    Parte Byline del livello dati

    Dovresti trovare una voce simile alla seguente:

    code language-json
    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 nella HashMap nel modello Sling.

Aggiungi un evento di clic click-event

Adobe Client Data Layer è guidato dagli eventi e uno degli eventi più comuni per attivare un’azione è cmp:click evento. I componenti core AEM consentono di registrare facilmente il componente con l’aiuto dell’elemento dati: data-cmp-clickable.

Gli elementi cliccabili sono in genere un pulsante CTA o un collegamento di navigazione. Sfortunatamente, il componente Byline non ha nessuno di questi componenti, ma è comunque possibile registrarlo, in quanto potrebbe essere comune per altri componenti personalizzati.

  1. Apri ui.apps modulo nell’IDE

  2. Apri il file byline.html a ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

  3. Aggiorna byline.html per includere data-cmp-clickable dell'attributo Byline nome elemento:

    code language-diff
      <h2 class="cmp-byline__name"
    +    data-cmp-clickable="${byline.data ? true : false}">
         ${byline.name}
      </h2>
    
  4. Apri un nuovo terminale. Genera e implementa solo il ui.apps utilizzando le abilità Maven:

    code language-shell
    $ cd aem-guides-wknd/ui.apps
    $ mvn clean install -PautoInstallPackage
    
  5. Torna al browser e riapri 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 console per sviluppatori. Consulta Utilizzo di Adobe Client Data Layer con i componenti core AEM per un video su come eseguire questa operazione.

  6. Apri gli strumenti di sviluppo del browser e immetti il metodo seguente nel Console:

    code language-javascript
    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.

  7. Immetti il seguente metodo in Console:

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

    Il metodo precedente spinge un listener di eventi sul livello dati per ascoltare cmp:click e chiama il bylineClickHandler.

    note caution
    CAUTION
    È importante non per aggiornare il browser durante questo esercizio, altrimenti il JavaScript della console andrà perso.
  8. Nel browser, con Console Apri, fai clic sul nome dell’autore nel componente Byline:

    Componente Byline su cui è stato fatto clic

    Dovresti visualizzare il messaggio della console Byline Clicked! e il nome del nome del nome del nome.

    Il cmp:click L’evento è il più semplice da agganciare. Per 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 una cmp:show ogni volta che viene attivata o disattivata una diapositiva. Consulta la codice sorgente per ulteriori dettagli.

Utilizzare l'utilità DataLayerBuilder data-layer-builder

Quando il modello Sling aggiornato Nelle parti precedenti del capitolo, abbiamo scelto di creare la stringa JSON utilizzando un tag HashMap e impostando manualmente ciascuna proprietà. Questo metodo funziona bene per i componenti una tantum di piccole dimensioni, tuttavia per i componenti che estendono i Componenti core AEM ciò potrebbe comportare un notevole aumento del codice.

Una classe di utilità, DataLayerBuilder, esiste per eseguire la maggior parte del sollevamento pesante. Questo consente alle implementazioni di estendere solo le proprietà che desiderano. Aggiorniamo il modello Sling per utilizzare DataLayerBuilder.

  1. Torna all’IDE e passa a core modulo.

  2. Apri il file Byline.java a core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

  3. Modifica il getData() metodo per restituire un tipo di ComponentData

    code language-java
    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 dell’AEM. Genera una stringa JSON, come nell’esempio precedente, ma esegue anche un sacco di lavoro aggiuntivo.

  4. Apri il file BylineImpl.java a core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java.

  5. Aggiungi le seguenti istruzioni di importazione:

    code language-java
    import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
    import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder;
    
  6. Sostituisci il getData() metodo con le seguenti caratteristiche:

    code language-java
    @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, il DataLayerBuilder viene utilizzato per estendere il livello di dati del Image componente. L’oggetto JSON viene precompilato con tutti i dati sull’immagine utilizzata. Esegue anche alcune delle funzioni di routine come l'impostazione della @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().

  7. Apri una finestra del terminale. Genera e implementa solo il core utilizzando le abilità Maven:

    code language-shell
    $ cd aem-guides-wknd/core
    $ mvn clean install -PautoInstallBundle
    
  8. Torna all’IDE e apri la byline.html file in ui.apps

  9. Aggiornare HTL da utilizzare byline.data.json per popolare il data-cmp-data-layer attributo:

    code language-diff
      <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}"
    

    Ricorda che è in corso la restituzione di un oggetto di tipo ComponentData. Questo oggetto include un metodo getter getJson() e viene utilizzato per popolare il data-cmp-data-layer attributo.

  10. Apri una finestra del terminale. Genera e implementa solo il ui.apps utilizzando le abilità Maven:

    code language-shell
    $ cd aem-guides-wknd/ui.apps
    $ mvn clean install -PautoInstallPackage
    
  11. Torna al browser e riapri la pagina con il componente Byline aggiunto: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

  12. Apri gli strumenti di sviluppo del browser e immetti il comando seguente nel Console:

    code language-js
    window.adobeDataLayer.getState();
    
  13. Passa sotto la risposta in component per trovare l’istanza di byline componente:

    Livello dati della linea di base aggiornato

    Dovresti trovare una voce simile alla seguente:

    code language-json
    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"
    

    Osserva che ora esiste un’ image oggetto all'interno del byline voce del componente. Questa contiene molte più informazioni sulla risorsa in DAM. Osserva inoltre che il @type e l’id univoco (in questo caso byline-136073cfcb) sono stati compilati automaticamente e il repo:modifyDate che indica quando il componente è stato modificato.

Esempi aggiuntivi additional-examples

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

    • ImageList.java - Interfaccia Java in core modulo.
    • ImageListImpl.java - Modello Sling in core modulo.
    • image-list.html - Modello HTL in ui.apps modulo.
    note note
    NOTE
    È un po’ più difficile includere proprietà personalizzate come occupation quando si utilizza DataLayerBuilder. Tuttavia, se si estende un Componente core che include un’immagine o una pagina, l’utility consente di risparmiare molto tempo.
    note note
    NOTE
    Se crei un livello dati avanzato per gli oggetti riutilizzati in un’implementazione, si consiglia di estrarre gli elementi del livello dati nei propri oggetti Java™ specifici del livello dati. Ad esempio, i Componenti core di Commerce dispongono di interfacce per ProductData e CategoryData poiché possono essere utilizzate su molti componenti all’interno di un’implementazione Commerce. Revisione il codice nell’archivio aem-cif-core-components per ulteriori dettagli.

Congratulazioni. congratulations

Hai appena esplorato alcuni modi per estendere e personalizzare Adobe Client Data Layer con i componenti AEM.

Risorse aggiuntive additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d