Rastrear componente clicado com o Adobe Analytics

Navegue até Página inicial da WKND

Abra as ferramentas de desenvolvedor do navegador e acesse o Console. Execute o seguinte comando:

adobeDataLayer.getState();

O código acima retorna o estado atual da Camada de dados de clientes Adobe.

Expandir a resposta e localizar entradas com o prefixo button- e teaser-xyz-cta entrada. Você deve ver um schema de dados como o seguinte:

Esquema do botão:

button-2e6d32893a:
    @type: "wknd/components/button"
    dc:title: "View All"
    parentId: "page-2eee4f8914"
    repo:modifyDate: "2020-07-11T22:17:55Z"
    xdm:linkURL: "/content/wknd/us/en/magazine.html"

Esquema de teaser:

teaser-da32481ec8-cta-adf3c09db9:
    @type: "wknd/components/teaser/cta"
    dc:title: "Surf's Up"
    parentId: "teaser-da32481ec8"
    xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"

Os dados acima baseiam-se no Esquema de itens de Componentes/Contêineres. A nova regra de tag usa esse esquema.

Navegue até o Experience Platform e para a propriedade de tag integrada ao site AEM.

Navegue até a Regras na interface de usuário da Propriedade de tag e clique em Adicionar regra.

Atribua um nome à regra CTA clicado.

Clique em Eventos > Adicionar para abrir o Configuração de evento assistente.

Para Tipo de evento selecione Custom Code.

Clique em Abrir editor no painel principal e insira o seguinte trecho de código:

var componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Tag Rule and pass event
      console.debug("cmp:click event: " + evt.eventInfo.path);
      var event = {
         //include the path of the component that triggered the event
         path: evt.eventInfo.path,
         //get the state of the component that triggered the event
         component: window.adobeDataLayer.getState(evt.eventInfo.path)
      };

      //Trigger the Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag Property data elements
      // i.e `event.component['someKey']`
      trigger(event);
   }
}

//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:click into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:click` and callback to the `componentClickedHandler` function
   dl.addEventListener("cmp:click", componentClickedHandler);
});

O trecho de código acima adiciona um ouvinte de evento de envio de uma função na camada de dados. Sempre que a variável cmp:click evento é acionado o componentClickedHandler é chamada. Nesta função, algumas verificações de sanidade são adicionadas e um novo event objeto é construído com o mais recente estado da camada de dados para o componente que acionou o evento.

Por último, a trigger(event) é chamada. A variável trigger() é um nome reservado na propriedade de tag e ele acionadores a regra. A variável event object é transmitido como um parâmetro que, por sua vez, é exposto por outro nome reservado na propriedade tag. Os elementos de dados na propriedade da tag agora podem fazer referência a várias propriedades usando um trecho de código como event.component['someKey'].

Salve as alterações.

Próximo em Ações click Adicionar para abrir o Configuração de ação assistente.

Para Tipo de ação escolha Custom Code.

Clique em Abrir editor no painel principal e insira o seguinte trecho de código:

console.debug("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);

A variável event o objeto é transmitido de trigger() chamado no evento personalizado. A variável component objeto é o estado atual do componente derivado da camada de dados getState() e é o elemento que provocou o clique.

Salve as alterações e execute um build na propriedade da tag para promover o código à ambiente usado no seu site AEM.

Navegue até a Site da WKND e abra as ferramentas do desenvolvedor para visualizar o console. Além disso, selecione a variável Preservar log caixa de seleção

Clique em uma das opções Teaser ou Botão Botões CTA para navegar para outra página.

Observe no console do desenvolvedor que a variável CTA clicado a regra foi acionada:

Navegue até o Experience Platform e para a propriedade de tag integrada ao site AEM.

Navegue até a Elementos de dados e clique em Adicionar novo elemento de dados.

Para Nome insira ID do componente.

Para Tipo de elemento de dados selecione Custom Code.

Clique em Abrir editor e insira o seguinte no editor de código personalizado:

if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}

Salve as alterações.

Navegue até a Elementos de dados e clique em Adicionar novo elemento de dados.

Para Nome insira Título do componente.

Para Tipo de elemento de dados selecione Custom Code.

Clique em Abrir editor e insira o seguinte no editor de código personalizado:

if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

Salve as alterações.

Na interface da Propriedade de tag, navegue até a CTA clicado regra criada anteriormente.

Em Condições click Adicionar para abrir o Configuração de condição assistente.

Para Tipo de condição selecione Custom Code.

Clique em Abrir editor e insira o seguinte no editor de código personalizado:

if(event && event.component && event.component.hasOwnProperty('@type')) {
    // console.log("Event Type: " + event.component['@type']);
    //Check for Button Type OR Teaser CTA type
    if(event.component['@type'] === 'wknd/components/button' ||
       event.component['@type'] === 'wknd/components/teaser/cta') {
        return true;
    }
}

// none of the conditions are met, return false
return false;

O código acima verifica primeiro se o tipo de recurso era de um Botão ou se o tipo de recurso foi de um CTA em um Teaser.

Salve as alterações.

No CTA clicado regra, remover o Núcleo - Código personalizado ação (as instruções do console):

Em Ações, clique em Adicionar para criar uma ação.

Defina o Extensão digite para Adobe Analytics e defina o Tipo de ação para Definir variáveis.

Defina os seguintes valores para eVars, Props, e Eventos:

• evar8 - %Component ID%
• prop8 - %Component ID%
• event8

Em seguida, adicione uma Ação extra à direita do Adobe Analytics - Definir variáveis tocando no mais ícone:

Defina o Extensão digite para Adobe Analytics e defina o Tipo de ação para Enviar sinal.

Em Rastreamento defina o botão de opção como s.tl().

Para Tipo de link escolha Link Personalizado e para Nome do link defina o valor como: %Component Title%: CTA Clicked:

A configuração acima combina a variável dinâmica do elemento de dados Título do componente e a string estática CTA clicado.

Salve as alterações. A variável CTA clicado A regra do agora deve ter a seguinte configuração:

• 1. Ouça o cmp:click evento.
• 2. Verifique se o evento foi acionado por um Botão ou Teaser.
• 3. Definir variáveis do Analytics para rastrear o ID do componente como um eVar, prop, e uma evento.
• 4. Envie o beacon de rastreamento de link do Analytics (e não trate-o como uma exibição de página).

Salve todas as alterações e crie sua biblioteca de tags, promovendo para o ambiente apropriado.

Abra o Site da WKND no navegador.

Clique no ícone Depurador para abrir o Experience Platform Debugger.

Verifique se o Depurador está mapeando a propriedade da tag para seu ambiente de desenvolvimento, conforme descrito anteriormente, e a Registro do console está marcado.

Abra o menu Analytics e verifique se o conjunto de relatórios está definido como seu conjunto de relatórios.

No navegador, clique em uma das opções Teaser ou Botão Botões CTA para navegar para outra página.

Retorne ao Depurador de Experience Platform e role para baixo e expanda Solicitações de rede > Seu conjunto de relatórios. Você deverá conseguir encontrar o eVar, prop, e evento definido.

Retorne ao navegador e abra o console do desenvolvedor. Navegue até o rodapé do site e clique em um dos links de navegação:

Observe a mensagem no console do navegador O "Código personalizado" para a regra "CTA clicado" não foi atendido.

A mensagem acima ocorre porque o componente de Navegação aciona um cmp:click evento mas devido a Condição para a regra que verifica o tipo de recurso em que nenhuma ação é tomada.