Personalizzare Adobe Client Data Layer con i componenti AEM

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

Cosa verrà creato

Livello dati byline

In questa esercitazione, esaminiamo diverse opzioni per estendere Adobe Client Data Layer aggiornando il WKND Componente Byline. La Byline un componente componente personalizzato e le lezioni imparate in questa esercitazione possono essere applicate ad altri componenti personalizzati.

Obiettivi

Inserisci i dati dei componenti nel livello dati estendendo un modello Sling e un componente HTL
Utilizza le utilità dei livelli dati dei componenti core per ridurre i tempi di esecuzione
Utilizzare gli attributi dei dati dei componenti core per eseguire il collegamento agli eventi dei livelli dati esistenti

Prerequisiti

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

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.

Nuovo a AEM 6.5? Consulta la sezione guida alla configurazione di un ambiente di sviluppo locale.

Scaricare e distribuire il sito WKND Reference

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

Avvia Quickstart locale autore istanza di AEM in esecuzione a http://localhost:4502.
Apri una finestra terminale e duplica 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
```
NOTA

Per AEM 6.5 e l'ultimo service pack aggiungi il classic profilo al comando Maven:

mvn clean install -PautoInstallSinglePackage -Pclassic
Apri una nuova finestra del browser e accedi a AEM. Apri un Rivista tipo di pagina: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Dovresti visualizzare un esempio del componente Byline che è stato aggiunto alla pagina come parte di un frammento esperienza. Puoi visualizzare il frammento 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 seguente comando 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.

Osserva che il componente Byline non è elencato nel Livello dati.

Aggiornare il modello Sling per riga

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

Apri aem-guides-wknd nell’IDE che preferisci. Passa a core modulo .
Apri il file . Byline.java a core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Aggiungi il metodo sottostante all'interfaccia:

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

Apri il file . BylineImpl.java a core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java. È l'attuazione Byline e viene implementato 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;

La fasterxml.jackson Le API vengono utilizzate per serializzare i dati da esporre come JSON. La ComponentUtils di AEM componenti core vengono utilizzati per verificare se il livello dati è abilitato.

Aggiungi 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, un nuovo HashMap viene utilizzato per acquisire le proprietà da esporre come JSON. Osserva che i metodi esistenti come getName() e getOccupations() sono utilizzati. La @type rappresenta il tipo di risorsa univoco del componente, che consente a un client di identificare facilmente gli eventi e/o i trigger in base al tipo di componente.

La 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 terminale. Crea e implementa solo le core modulo con le tue competenze Maven:
```
$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle
```

Aggiornare l’HTL per riga precedente

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

Attributo dati speciale data-cmp-data-layer in ogni componente AEM viene utilizzato per esporre il livello dati. JavaScript fornito da AEM componenti core cerca questo attributo di dati. Il valore di questo attributo di dati viene popolato con la stringa JSON restituita dal modello Byline Sling getData() e inserito in Adobe Client Data Layer.

Apri aem-guides-wknd proiettare nell’IDE. Passa a ui.apps modulo .
Apri il file . byline.html a ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.
Aggiorna byline.html per includere data-cmp-data-layer attributo:
```
  <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 è 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() attuato nell’esercizio precedente.
Apri una finestra terminale. Crea e implementa solo le ui.apps modulo con le tue competenze Maven:
```
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
```
Torna al browser e riapri la pagina con un componente Byline: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
Apri gli strumenti per sviluppatori ed esamina l’origine HTML della pagina per il componente Byline:

Dovresti vedere che la data-cmp-data-layer è stato popolato con la stringa JSON dal modello Sling.
Apri gli strumenti di sviluppo del browser e immetti il seguente comando nella Console:
```
window.adobeDataLayer.getState();
```

Naviga sotto la risposta in component per trovare l'istanza del byline componente è stato aggiunto al livello dati:

Byline part del livello dati

Dovresti visualizzare una voce come segue:

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"

Osserva che le proprietà esposte sono le stesse aggiunte nel HashMap nel modello Sling.

Aggiungi un evento clic

Adobe Client Data Layer è basato su eventi e uno degli eventi più comuni per attivare un'azione è la cmp:click evento. I componenti core AEM facilitano la registrazione del componente con l’aiuto dell’elemento dati: data-cmp-clickable.

Gli elementi selezionabili sono in genere un pulsante CTA o un collegamento di navigazione. Sfortunatamente il componente Byline non dispone di nessuno di questi ma lo registreremo comunque, in quanto potrebbe essere comune per altri componenti personalizzati.

Apri ui.apps modulo nell’IDE
Apri il file . byline.html a ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Aggiorna byline.html per includere data-cmp-clickable Attributo su Byline's name elemento:

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

Apri un nuovo terminale. Crea e implementa solo le ui.apps modulo con le tue competenze Maven:
```
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
```
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 alcuni JavaScript utilizzando la console per sviluppatori. Vedi Utilizzo di Adobe Client Data Layer con AEM componenti core per un video su come eseguire questa procedura.

Apri gli strumenti di sviluppo del browser e immetti il seguente metodo in 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.

Inserisci il seguente metodo nel Console:
```
window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:click", bylineClickHandler);
});
```
Il metodo di cui sopra spinge un listener di eventi sul livello dati per ascoltare cmp:click e chiama bylineClickHandler.

ATTENZIONE

È importante not per aggiornare il browser durante questo esercizio, altrimenti la console JavaScript viene persa.
Nel browser, con Console apri, fai clic sul nome dell’autore nel componente Byline :

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

La cmp:click l'evento è il più semplice in cui collegarsi. Per i componenti più complessi e per tenere traccia di altri comportamenti è possibile aggiungere JavaScript personalizzati per aggiungere e registrare nuovi eventi. Un esempio lampante è il componente Carosello, che attiva un cmp:show ogni volta che una diapositiva viene attivata. Consulta la sezione codice sorgente per ulteriori dettagli.

Utilizzare l'utility DataLayerBuilder

Quando il modello Sling era aggiornato in precedenza nel capitolo, abbiamo scelto di creare la stringa JSON utilizzando un HashMap e impostare manualmente ciascuna proprietà. Questo metodo funziona bene per i componenti una tantum di piccole dimensioni, tuttavia per i componenti che estendono i componenti core di AEM questo potrebbe causare un sacco di codice aggiuntivo.

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

Torna all’IDE e passa alla core modulo .
Apri il file . Byline.java a core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Modifica la getData() metodo 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 AEM componenti core. Si traduce in una stringa JSON, come nell’esempio precedente, ma esegue anche molto lavoro aggiuntivo.

Apri il file . BylineImpl.java a 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;

Sostituisci il getData() con il seguente metodo:
```
@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 di base immagine per visualizzare un’immagine che rappresenta l’autore. Nello snippet di codice riportato sopra, il DataLayerBuilder viene utilizzato per estendere il livello dati del Image componente. Questo precompila l’oggetto JSON con tutti i dati sull’immagine utilizzata. Esegue anche alcune delle funzioni di routine come l'impostazione del @type e l'identificatore univoco del componente. Notate che il metodo è piccolo!

L'unica proprietà estesa withTitle che viene sostituito con il valore di getName().
Apri una finestra terminale. Crea e implementa solo le core modulo con le tue competenze Maven:
```
$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle
```
Torna all’IDE e apri la byline.html file in ui.apps

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

  <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 ora stiamo restituendo un oggetto di tipo ComponentData. Questo oggetto include un metodo getter getJson() e viene utilizzato per popolare il data-cmp-data-layer attributo.

Apri una finestra terminale. Crea e implementa solo le ui.apps modulo con le tue competenze Maven:
```
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
```
Torna al browser e riapri la pagina con il componente Byline aggiunto: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
Apri gli strumenti di sviluppo del browser e immetti il seguente comando nella Console:
```
window.adobeDataLayer.getState();
```
Naviga sotto la risposta in component per trovare l'istanza del byline componente:

Dovresti visualizzare una voce come segue:
```
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 all'interno dell'oggetto byline voce del componente. Questo contiene molte più informazioni sulla risorsa in DAM. Osserva anche che @type e l'id univoco (in questo caso byline-136073cfcb) sono stati compilati automaticamente e le repo:modifyDate indica quando il componente è stato modificato.

Esempi aggiuntivi

Un altro esempio di estensione del livello dati può essere visualizzato analizzando il ImageList componente nella base di codice WKND:
- ImageList.java - Interfaccia Java nel core modulo .
- ImageListImpl.java - Modello Sling in core modulo .
- image-list.html - Modello HTL nel ui.apps modulo .
NOTA

È un po' più difficile includere proprietà personalizzate come occupation quando si utilizza DataLayerBuilder. Tuttavia, se estendi un componente di base che include un'immagine o una pagina, l'utility risparmia molto tempo.

NOTA

Se si crea un livello dati avanzato per gli oggetti riutilizzati durante un'implementazione, si consiglia di estrarre gli elementi del livello dati nei propri oggetti Java™ specifici per il livello dati. Ad esempio, i componenti core Commerce hanno aggiunto interfacce per ProductData e CategoryData poiché potrebbero essere utilizzati su molti componenti all’interno di un’implementazione Commerce. Revisione il codice nell’archivio dei componenti aem-cif-core per ulteriori dettagli.

Congratulazioni.

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

Personalizzare Adobe Client Data Layer con i componenti AEM

Cosa verrà creato

Obiettivi

Prerequisiti

Scaricare e distribuire il sito WKND Reference

Aggiornare il modello Sling per riga

Aggiornare l’HTL per riga precedente

Aggiungi un evento clic

Utilizzare l'utility DataLayerBuilder

Esempi aggiuntivi

Congratulazioni.

Risorse aggiuntive

Risorse Business.Adobe.com

In questa pagina

Visualizza successivo:

Scopri

Documentazione

Community

Assistenza

Risorse

Account Adobe

Adobe