Personalizar a Camada de dados do cliente Adobe com componentes AEM customize-data-layer

Inicie uma instância de AEM do Quickstart author local em execução em http://localhost:4502.

Abra uma janela de terminal e clone a base de código WKND usando Git:

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

Implante a base de código WKND em uma instância local de AEM:

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

Abra uma nova janela do navegador e faça logon no AEM. Abra uma página de Revista como: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Você deve ver um exemplo do componente Subtítulo que foi adicionado à página como parte de um Fragmento de experiência. Você pode exibir o Fragmento de experiência em http://localhost:4502/editor.html/content/experience-fragments/wknd/language-masters/en/contributors/stacey-roswells/byline.html

Abra as ferramentas do desenvolvedor e digite o seguinte comando no Console:

window.adobeDataLayer.getState();

Para ver o estado atual da camada de dados em um site AEM, inspecione a resposta. Você deve ver informações sobre a página e os componentes individuais.

Observe que o componente Subtítulo não está listado na Camada de dados.

Abra o projeto aem-guides-wknd no IDE de sua escolha. Navegue até o módulo core.

Abra o arquivo Byline.java em core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Adicionar o método abaixo à interface:

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

Abra o arquivo BylineImpl.java em core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java. É a implementação da interface Byline e é implementada como um Modelo Sling.

Adicione as seguintes instruções de importação no início do arquivo:

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;

As APIs fasterxml.jackson são usadas para serializar os dados a serem expostos como JSON. O ComponentUtils dos Componentes principais do AEM são usados para verificar se a camada de dados está habilitada.

Adicionar o método não implementado 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;
    }
}

No método acima, um novo HashMap é usado para capturar as propriedades a serem expostas como JSON. Observe que métodos existentes como getName() e getOccupations() são usados. O @type representa o tipo de recurso exclusivo do componente. Ele permite que um cliente identifique eventos e/ou acionadores facilmente com base no tipo de componente.

O ObjectMapper é usado para serializar as propriedades e retornar uma cadeia de caracteres JSON. Essa cadeia de caracteres JSON pode ser inserida na camada de dados.

Abra uma janela de terminal. Crie e implante apenas o módulo core usando suas habilidades Maven:

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

Abra o projeto aem-guides-wknd no IDE. Navegue até o módulo ui.apps.

Abra o arquivo byline.html em ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Atualize byline.html para incluir o atributo 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">
    ...

O valor de data-cmp-data-layer foi definido como "${byline.data}", onde byline é o Modelo Sling atualizado anteriormente. .data é a notação padrão para chamar um método Getter Java™ no HTL de getData() implementado no exercício anterior.

Abra uma janela de terminal. Crie e implante apenas o módulo ui.apps usando suas habilidades Maven:

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

Retorne ao navegador e reabra a página com um componente Subtítulo: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Abra as ferramentas do desenvolvedor e inspecione o código-fonte HTML da página para o componente Subtítulo:

Você deve ver que data-cmp-data-layer foi preenchido com a sequência JSON do modelo Sling.

Abra as ferramentas de desenvolvedor do navegador e digite o seguinte comando no Console:

window.adobeDataLayer.getState();

Navegue abaixo da resposta em component para descobrir se a instância do componente byline foi adicionada à camada de dados:

Você deve ver uma entrada como a seguinte:

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"

Observe que as propriedades expostas são as mesmas adicionadas em HashMap no Modelo Sling.

Abra o módulo ui.apps no IDE

Abra o arquivo byline.html em ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Atualize byline.html para incluir o atributo data-cmp-clickable no elemento name da linha de dados:

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

Abra um novo terminal. Crie e implante apenas o módulo ui.apps usando suas habilidades Maven:

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

Retorne ao navegador e reabra a página com o componente Subtítulo adicionado: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Para testar nosso evento, adicionaremos manualmente alguns JavaScript usando o console do desenvolvedor. Consulte Usando a Camada de Dados do Cliente Adobe com Componentes Principais AEM para ver um vídeo sobre como fazer isso.

Abra as ferramentas de desenvolvedor do navegador e insira o seguinte método no 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']);
    }
}

Este método simples deve lidar com o clique do nome do componente Subtítulo.

Digite o seguinte método no Console:

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

O método acima envia um ouvinte de eventos para a camada de dados para ouvir o evento cmp:click e chama bylineClickHandler.

No navegador, com o Console aberto, clique no nome do autor no componente Subtítulo:

Você deve ver a mensagem de console Byline Clicked! e o nome de Subtítulo.

O evento cmp:click é o mais fácil de conectar. Para componentes mais complexos e rastrear outros comportamentos, é possível adicionar um JavaScript personalizado para adicionar e registrar novos eventos. Um ótimo exemplo é o componente Carrossel, que aciona um evento cmp:show sempre que um slide é alternado. Consulte o código-fonte para obter mais detalhes.

Retorne ao IDE e navegue até o módulo core.

Abra o arquivo Byline.java em core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Modifique o método getData() para retornar um tipo de 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 é um objeto fornecido pelos Componentes principais do AEM. Ele resulta em uma sequência JSON, como no exemplo anterior, mas também executa muito trabalho adicional.

Abra o arquivo BylineImpl.java em core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java.

Adicione as seguintes instruções de importação:

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

Substitua o método getData() pelo seguinte:

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

O componente Subtítulo reutiliza partes do Componente principal de imagem para exibir uma imagem representando o autor. No trecho acima, o DataLayerBuilder é usado para estender a camada de dados do componente Image. Isso preenche o objeto JSON previamente com todos os dados sobre a imagem usada. Também executa algumas funções de rotina, como definir o @type e o identificador exclusivo do componente. Observe que o método é pequeno!

A única propriedade estendeu o withTitle, que é substituído pelo valor de getName().

Abra uma janela de terminal. Crie e implante apenas o módulo core usando suas habilidades Maven:

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

Retorne ao IDE e abra o arquivo byline.html em ui.apps

Atualize o HTL para usar byline.data.json para popular o atributo 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}"

Lembre-se de que agora estamos retornando um objeto do tipo ComponentData. Este objeto inclui um método getter getJson() e é usado para preencher o atributo data-cmp-data-layer.

Abra uma janela de terminal. Crie e implante apenas o módulo ui.apps usando suas habilidades Maven:

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

Retorne ao navegador e reabra a página com o componente Subtítulo adicionado: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Abra as ferramentas de desenvolvedor do navegador e digite o seguinte comando no Console:

window.adobeDataLayer.getState();

Navegue abaixo da resposta em component para localizar a instância do componente byline:

Você deve ver uma entrada como a seguinte:

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"

Observe que agora há um objeto image dentro da entrada de componente byline. Há muito mais informações sobre o ativo no DAM. Observe também que @type e a ID exclusiva (neste caso, byline-136073cfcb) foram automaticamente preenchidas, e a repo:modifyDate que indica quando o componente foi modificado.

Outro exemplo de extensão da camada de dados pode ser visualizado ao inspecionar o componente ImageList na base de código WKND:

• ImageList.java - Interface Java no módulo core.
• ImageListImpl.java - Modelo Sling no módulo core.
• image-list.html - Modelo HTL no módulo ui.apps.