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 de clientes Adobe é independente de plataforma, mas é totalmente integrada aos Componentes principais para uso com o AEM.

OBSERVAÇÃO

Deseja ativar a Camada de dados do cliente do Adobe no site AEM? Veja as instruções aqui.

Explorar a camada de dados

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.

OBSERVAÇÃO

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');
```

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.

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.

ATENÇÃO

É 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.

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 aprenda como Personalizar a camada de dados do cliente do Adobe com componentes de AEM