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.
Deseja ativar a Camada de dados do cliente do Adobe no site AEM? Veja as instruções aqui.
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.
Capturas de tela abaixo tiradas do navegador Chrome.
Navegue até 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 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 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 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.
Será importante e não atualizar o navegador durante todo esse exercício; caso contrário, o JavaScript do console será perdido.
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.
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.
Na página, alterne os slides do carrossel e observe as instruções do console:
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);
});
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, 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.
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);
});
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.
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