Uso da camada de dados do cliente do Adobe com componentes principais AEM

A Camada de dados do cliente do Adobe apresenta um método padrão para coletar e armazenar dados sobre uma experiência de visitante em uma página da Web e, em seguida, facilitar o acesso a esses dados. A Camada de dados do cliente do Adobe é independente de plataforma, mas é totalmente integrada aos Componentes principais para uso com o AEM.

Explorar a camada de dados

Você pode obter uma ideia da funcionalidade integrada da Camada de dados do cliente do Adobe usando as ferramentas do desenvolvedor do seu navegador e o site de referência WKND ao vivo.

1. Navegue até https://wknd.site

2. Abra as ferramentas do desenvolvedor e insira o seguinte comando no Console:

   window.adobeDataLayer.getState();
   

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

   

3. Empurre um objeto de dados para a camada de dados inserindo o seguinte no console:

   window.adobeDataLayer.push({
       "component": {
           "training-data": {
               "title": "Learn More",
               "link": "learn-more.html"
           }
       }
   });
   

4. Execute o comando adobeDataLayer.getState() novamente e localize a entrada para training-data.

5. Em seguida, adicione um parâmetro de caminho para retornar apenas o estado específico de um componente:

   window.adobeDataLayer.getState('component.training-data');
   

   

Trabalhar com eventos

É uma prática recomendada acionar qualquer código personalizado com base em um evento da camada de dados. Em seguida, explore o registro e o acompanhamento de eventos diferentes.

1. Insira o seguinte método de ajuda no console:

   function getDataObjectHelper(event, filter) {
       if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
           var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
           if (dataObject != null) {
               for (var property in filter) {
                   if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                       return;
                   }
                   return dataObject;
               }
           }
       }
       return;
   }
   

   O código acima inspecionará o objeto event e usará o método adobeDataLayer.getState para obter o estado atual do objeto que acionou o evento. O método auxiliar inspecionará os critérios filter e somente se o dataObject atual atender ao filtro, ele será retornado.

   ATENÇÃO

   Será importante e não atualizar o navegador durante todo esse exercício; caso contrário, o JavaScript do console será perdido.

2. Em seguida, insira um manipulador de eventos que será chamado quando um componente Teaser for exibido em um Carrossel.

   function teaserShownHandler(event) {
       var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/teaser"});
       if(dataObject != null) {
           console.log("Teaser Shown: " + dataObject['dc:title']);
           console.log(dataObject);
       }
   }
   

   O teaserShownHandler chamará o método getDataObjectHelper e passará em um filtro de wknd/components/teaser como o @type para filtrar eventos acionados por outros componentes.

3. Em seguida, coloque um ouvinte de evento na camada de dados para ouvir o evento cmp:show.

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

   O evento cmp:show é acionado por vários componentes diferentes, como quando um novo slide é mostrado no Carrossel ou quando uma nova guia é selecionada no componente Guia.

4. Na página, alterne os slides do carrossel e observe as instruções do console:

   

5. Remova o ouvinte de evento da camada de dados para parar de ouvir o evento cmp:show:

   window.adobeDataLayer = window.adobeDataLayer || [];
   window.adobeDataLayer.push(function(dl) {
       dl.removeEventListener("cmp:show", teaserShownHandler);
   });
   

6. Retorne à página e alterne os slides do carrossel. Observe que não há mais declarações registradas e que o evento não está sendo escutado.

7. Em seguida, insira um manipulador de eventos que será chamado quando o evento de exibição de página for acionado:

   function pageShownHandler(event) {
       var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
       if(dataObject != null) {
           console.log("Page Shown: " + dataObject['dc:title']);
           console.log(dataObject);
       }
   }
   

   Observe que o tipo de recurso wknd/components/page é usado para filtrar o evento.

8. Em seguida, coloque um ouvinte de evento na camada de dados para ouvir o evento cmp:show, chamando o pageShownHandler.

   window.adobeDataLayer = window.adobeDataLayer || [];
   window.adobeDataLayer.push(function (dl) {
        dl.addEventListener("cmp:show", pageShownHandler);
   });
   

9. Você deve ver imediatamente uma declaração do console acionada com os dados da página:

   

   O evento cmp:show da página é acionado em cada carregamento de página no topo da página. Você pode perguntar, por que o manipulador de eventos foi acionado, quando a página claramente já foi carregada?

   Esse é um dos recursos exclusivos da Camada de dados do cliente do Adobe, na medida em que é possível registrar ouvintes de eventos antes de ou depois de a Camada de dados ter sido inicializada. Esse é um recurso essencial para evitar condições de corrida.

   A Camada de dados mantém uma matriz de filas de todos os eventos que ocorreram em sequência. A Camada de dados por padrão acionará retornos de chamada de evento para eventos que ocorreram no passado, bem como eventos no futuro. É possível filtrar os eventos para apenas passado ou futuro. Mais informações podem ser encontradas na documentação.

Próximas etapas

Consulte o tutorial a seguir para saber como usar a camada de Dados do cliente do Adobe orientada por eventos para coletar dados de página e enviar para o Adobe Analytics.

Ou saiba como Personalizar a camada de dados do cliente do Adobe com componentes AEM

Recursos adicionais

• Documentação da camada de dados do cliente Adobe
• Uso da camada de dados do cliente do Adobe e da documentação dos componentes principais