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 de clientes Adobe é independente de plataforma, mas é totalmente integrada aos Componentes principais para uso com o AEM.
Deseja ativar a Camada de dados do cliente do Adobe no site AEM? Veja as instruções aqui.
Você pode ter uma ideia da funcionalidade integrada da Camada de dados do cliente do Adobe usando as ferramentas do desenvolvedor do seu navegador e do Site de referência WKND.
Capturas de tela abaixo tiradas do navegador Chrome.
Navegar para https://wknd.site
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.
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"
}
}
});
Execute o comando adobeDataLayer.getState()
novamente e encontre a entrada para training-data
.
Em seguida, adicione um parâmetro de caminho para retornar apenas o estado específico de um componente:
window.adobeDataLayer.getState('component.training-data');
É 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.
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 event
e use o adobeDataLayer.getState
para obter o estado atual do objeto que acionou o evento. O método auxiliar inspecionará o filter
critérios e somente se o dataObject
atende ao filtro que será retornado.
É importante not 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 é 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á a função getDataObjectHelper
e passar em um filtro de wknd/components/teaser
como @type
para filtrar eventos acionados por outros componentes.
Em seguida, coloque um ouvinte de evento na camada de dados para ouvir o cmp:show
evento.
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", teaserShownHandler);
});
O cmp:show
é acionado por vários componentes diferentes, como quando um novo slide é exibido na Carrossel ou quando uma nova guia for selecionada na variável Tabulação componente.
Na página, alterne os slides do carrossel e observe as instruções do console:
Remova o ouvinte de eventos da camada de dados para parar de ouvir o cmp:show
evento:
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 declarações registradas e que o evento não está sendo escutado.
Em seguida, crie um manipulador de eventos 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
é usada para filtrar o evento.
Em seguida, coloque um ouvinte de evento na camada de dados para ouvir o cmp:show
, chamando o pageShownHandler
.
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", pageShownHandler);
});
Você deve ver imediatamente uma declaração do console acionada com os dados da página:
O 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?
Este é um dos recursos exclusivos da Camada de dados do cliente do Adobe, no qual você pode registrar ouvintes de eventos before ou after a Camada de dados foi 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 previous bem como os eventos na futura. É possível filtrar os eventos para apenas passado ou futuro. Mais informações podem ser encontradas na documentação.
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 aprenda como Personalizar a camada de dados do cliente do Adobe com componentes de AEM