Uso da camada de dados do cliente da Adobe com componentes principais do AEM

A Camada de dados do cliente da 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 da 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 da Adobe no site do AEM? Veja as instruções aqui.

Explorar a camada de dados

Você pode obter uma ideia da funcionalidade integrada da Camada de dados do cliente da Adobe usando as ferramentas do desenvolvedor do seu navegador e o site de referência WKND ao vivo.

OBSERVAÇÃO

Capturas de tela abaixo tiradas do navegador Chrome.

  1. Navegue até https://wknd.site

  2. Abra as ferramentas do desenvolvedor e insira o seguinte comando no Console:

    window.adobeDataLayer.getState();
    

    Inspecione a resposta para ver o estado atual da camada de dados em um site do AEM. Você deve ver informações sobre a página e os componentes individuais.

    Resposta da camada de dados da Adobe

  3. 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"
            }
        }
    });
    
  4. Execute o comando adobeDataLayer.getState() novamente e localize a entrada para training-data.

  5. Em seguida, adicione um parâmetro de caminho para retornar apenas o estado específico de um componente:

    window.adobeDataLayer.getState('component.training-data');
    

    Retornar apenas uma entrada de dados de componente único

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.

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

    CUIDADO

    Será importante e não atualizar o navegador durante todo esse exercício; caso contrário, o JavaScript do console será perdido.

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

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

  4. Na página, alterne os slides do carrossel e observe as instruções do console:

    Ative o carrossel e veja o ouvinte do evento

  5. 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);
    });
    
  6. 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.

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

  8. 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);
    });
    
  9. Você deve ver imediatamente uma declaração do console acionada com os dados da página:

    Mostrar 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 da Adobe, na medida em que é possível registrar ouvintes de eventos antes 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.

Próximas etapas

Consulte o tutorial a seguir para saber como usar a camada de Dados do cliente da 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 da Adobe com componentes do AEM

Recursos adicionais

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now