Rastrear componente clicado com o Adobe Analytics

Navegue até a Página inicial da WKND

Abra as ferramentas de desenvolvedor do navegador e navegue até o Console. Execute o seguinte comando:

adobeDataLayer.getState();

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

Expanda a resposta e localize as entradas com prefixo button- e teaser-xyz-cta. 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 detalhes de dados acima se baseiam 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 seção Regras na interface do usuário da Propriedade de Marca e clique em Adicionar Regra.

Nomeie a regra CTA Clicked.

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

Para o campo Tipo de evento, selecione Código personalizado.

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 eventos ao enviar uma função para a camada de dados. Sempre que o evento cmp:click for acionado, a função componentClickedHandler será chamada. Nesta função, algumas verificações de integridade são adicionadas e um novo objeto event é construído com o estado mais recente da camada de dados para o componente que acionou o evento.

Finalmente, a função trigger(event) é chamada. A função trigger() é um nome reservado na propriedade de marca e aciona a regra. O objeto event é passado como um parâmetro que, por sua vez, é exposto por outro nome reservado na propriedade de marca. Os elementos de dados na propriedade da marca agora podem fazer referência a várias propriedades usando o trecho de código como event.component['someKey'].

Salve as alterações.

Em seguida, em Ações, clique em Adicionar para abrir o assistente de Configuração de Ação.

Para o campo Tipo de ação, escolha Código personalizado.

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

O objeto event é passado do método trigger() chamado no evento personalizado. O objeto component é o estado atual do componente derivado do método getState() da camada de dados e é o elemento que provocou o clique.

Salve as alterações e execute uma compilação na propriedade da marca para promover o código para o ambiente usado no site do AEM.

Navegue até o Site WKND e abra as ferramentas do desenvolvedor para exibir o console. Além disso, marque a caixa de seleção Preservar log.

Clique em um dos botões CTA Teaser ou Button para navegar para outra página.

Observe no console do desenvolvedor que a regra CTA Clicado foi acionada:

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

Navegue até a seção Elementos de Dados e clique em Adicionar Novo Elemento de Dados.

Para o campo Nome, insira ID do Componente.

Para o campo Tipo de elemento de dados, selecione Código personalizado.

Clique no botão 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 seção Elementos de Dados e clique em Adicionar Novo Elemento de Dados.

Para o campo Nome, insira Título do Componente.

Para o campo Tipo de elemento de dados, selecione Código personalizado.

Clique no botão 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 Marca, navegue até a regra CTA Clicado criada anteriormente.

Em Condições, clique em Adicionar para abrir o assistente de Configuração de Condição.

Para o campo Tipo de Condição, selecione Código Personalizado.

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 era de um CTA dentro de um Teaser.

Salve as alterações.

Na regra CTA Clicado, remova a ação Núcleo - Código Personalizado (as instruções do console):

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

Defina o tipo Extensão como Adobe Analytics e defina o Tipo de Ação como Definir Variáveis.

Defina os seguintes valores para eVars, Props e Events:

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

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

Defina o tipo Extensão como Adobe Analytics e defina o Tipo de Ação como Enviar Beacon.

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

Para o campo Tipo de Link, escolha Link Personalizado e, para o 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 cadeia de caracteres estática CTA Clicked.

Salve as alterações. A regra CTA Clicado agora deve ter a seguinte configuração:

• 1. Ouça o evento cmp:click.
• 2. Verifique se o evento foi acionado por um Botão ou Teaser.
• 3. Defina as variáveis do Analytics para rastrear a ID do Componente como um eVar, prop e um evento.
• 4. Enviar o sinal de rastreamento de link do Analytics (e não tratá-lo 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 WKND em seu navegador.

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

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

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

No navegador, clique em um dos botões CTA Teaser ou Button 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ê deve conseguir encontrar o conjunto eVar, prop e evento.

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 que no console do navegador a mensagem "Código personalizado" para a regra "CTA clicado" não foi atendida.

A mensagem acima ocorre porque o componente de Navegação não dispara um evento cmp:click but devido à Condição para a regra que verifica o tipo de recurso em que nenhuma ação é executada.