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.
Deseja ativar a Camada de dados de clientes Adobe no site AEM? Veja as instruções aqui.
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.
Capturas de tela abaixo tiradas do navegador Chrome.
Navegue até https://wknd.site/us/en.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.
Envie 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 localize 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 a escuta de diferentes eventos.
Digite o seguinte método auxiliar 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 inspeciona o event
objeto e usa o adobeDataLayer.getState
para obter o estado atual do objeto que acionou o evento. Em seguida, o método auxiliar inspeciona o filter
e somente se o atual dataObject
atende aos critérios de filtro retornados.
É 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.
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ção getDataObjectHelper
e passa um filtro de wknd/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.
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 dados
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:
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 o pageShownHandler
.
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.
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