Utilização da camada de dados do cliente Adobe com componentes principais AEM overview
A Camada de dados de clientes Adobe apresenta um método padrão para coletar e armazenar dados sobre a experiência de um visitante em uma página da Web e, em seguida, facilitar o acesso a esses dados. A Camada de dados de clientes Adobe é independente de plataforma, mas é totalmente integrada aos Componentes principais para uso com o AEM.
Explorar a camada de dados
Você pode ter uma ideia da funcionalidade integrada da Camada de dados do cliente Adobe apenas usando as ferramentas de desenvolvedor do seu navegador e o Live Site de referência da WKND.
-
Navegue até https://wknd.site/us/en.html
-
Abra as ferramentas do desenvolvedor e digite o seguinte comando no Console:
code language-js 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.
-
Envie um objeto de dados para a camada de dados inserindo o seguinte no console:
code language-js window.adobeDataLayer.push({ "component": { "training-data": { "title": "Learn More", "link": "learn-more.html" } } });
-
Execute o comando
adobeDataLayer.getState()
novamente e localize a entrada paratraining-data
. -
Em seguida, adicione um parâmetro de caminho para retornar apenas o estado específico de um componente:
code language-js 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 a escuta de diferentes eventos.
-
Digite o seguinte método auxiliar no console:
code language-js 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 inspeciona o
event
objeto e usa oadobeDataLayer.getState
para obter o estado atual do objeto que acionou o evento. Em seguida, o método auxiliar inspeciona ofilter
e somente se o atualdataObject
atende aos critérios de filtro retornados.note caution CAUTION É importante não para atualizar o navegador durante todo este exercício, caso contrário, o JavaScript do console será perdido. -
Em seguida, insira um manipulador de eventos chamado quando um Teaser componente é exibido em um Carrossel.
code language-js function teaserShownHandler(event) { var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/teaser"}); if(dataObject != null) { console.log("Teaser Shown: " + dataObject['dc:title']); console.log(dataObject); } }
A variável
teaserShownHandler
chama a funçãogetDataObjectHelper
e passa um filtro dewknd/components/teaser
como o@type
para filtrar eventos acionados por outros componentes. -
Em seguida, envie um ouvinte de eventos para a camada de dados para ouvir o
cmp:show
evento.code language-js window.adobeDataLayer.push(function (dl) { dl.addEventListener("cmp:show", teaserShownHandler); });
A variável
cmp:show
evento é acionado por vários componentes diferentes, como quando um novo slide é mostrado no Carrossel ou quando uma nova guia é selecionada na variável Guia componente. -
Na página, alterne os slides do carrossel e observe as instruções do console:
-
Para parar de ouvir o
cmp:show
evento, remova o ouvinte de eventos da camada de dadoscode language-js window.adobeDataLayer = window.adobeDataLayer || []; window.adobeDataLayer.push(function(dl) { dl.removeEventListener("cmp:show", teaserShownHandler); });
-
Retorne à página e alterne os slides do carrossel. Observe que não há mais instruções registradas e que o evento não está sendo ouvido.
-
Em seguida, crie um manipulador de eventos que é chamado quando o evento de exibição de página é acionado:
code language-js 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. -
Em seguida, envie um ouvinte de eventos para a camada de dados para ouvir o
cmp:show
evento, chamar opageShownHandler
.code language-js window.adobeDataLayer = window.adobeDataLayer || []; window.adobeDataLayer.push(function (dl) { dl.addEventListener("cmp:show", pageShownHandler); });
-
Você deve ver imediatamente uma instrução do console acionada com os dados da página:
A variável
cmp:show
para a página é acionado em cada carregamento de página na parte superior da página. Você pode perguntar, por que o manipulador de eventos foi acionado quando a página claramente já foi carregada?Um dos recursos exclusivos da Camada de dados de clientes Adobe é que você pode registrar ouvintes de eventos antes ou após A Camada de dados foi inicializada e ajuda a evitar as 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 na passado e eventos na futuro. É possível filtrar os eventos do passado ou do futuro. Mais informações podem ser encontradas na documentação.
Próximas etapas
Há duas opções para continuar aprendendo: primeiro, confira o coletar dados de página e enviá-los para a Adobe Analytics tutorial que demonstra o uso da camada de dados do cliente Adobe. A segunda opção é aprender a Personalizar a Camada de dados do cliente Adobe com componentes AEM