[Integração]{class="badge positive"}

Rastrear componente clicado com o Adobe Analytics

Use a Camada de Dados de Clientes Adobe com Componentes Principais AEM orientada por eventos para rastrear cliques de componentes específicos em um site do Adobe Experience Manager. Saiba como usar regras na propriedade de tag para acompanhar eventos de clique, filtrar por componente e enviar os dados para uma Adobe Analytics com um beacon de rastreamento de link.

O que você vai criar what-build

A equipe de marketing da WKND está interessada em saber quais botões do Call to Action (CTA) estão tendo o melhor desempenho na página inicial. Neste tutorial, vamos adicionar uma regra à propriedade de tag que escuta os eventos cmp:click de componentes de Teaser e Botão. Em seguida, envie a ID do componente e um novo evento para a Adobe Analytics junto com o beacon de rastreamento de link.

O que você vai criar, rastrear cliques

Objetivos objective

  1. Crie uma regra orientada por eventos na propriedade de marca que capture o evento cmp:click.
  2. Filtre os diferentes eventos por tipo de recurso do componente.
  3. Defina a ID do componente e envie um evento para a Adobe Analytics com o sinal de rastreamento de link.

Pré-requisitos

Este tutorial é uma continuação do Coletar dados de página com o Adobe Analytics e presume que você tenha:

Inspect do esquema de botão e teaser

Antes de criar regras na propriedade da tag, é útil revisar o esquema para o Botão e o Teaser e inspecioná-los na implementação da camada de dados.

  1. Navegue até a Página inicial da WKND

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

    code language-js
    adobeDataLayer.getState();
    

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

    Estado da Camada de Dados via console do navegador

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

    code language-json
    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:

    code language-json
    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.

Criar uma regra clicada do CTA

A Camada de Dados de Clientes Adobe é uma camada de dados orientada por evento. Sempre que qualquer Componente principal é clicado, um evento cmp:click é despachado por meio da camada de dados. Para ouvir o evento cmp:click, vamos criar uma regra.

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

  2. Navegue até a seção Regras na interface do usuário da Propriedade de Marca e clique em Adicionar Regra.

  3. Nomeie a regra CTA Clicked.

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

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

    Nomeie a regra CTA clicado e adicione o evento de código personalizado

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

    code language-js
    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'].

  7. Salve as alterações.

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

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

    Tipo de Ação de Código Personalizado

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

    code language-js
    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.

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

    note note
    NOTE
    Pode ser útil usar o Adobe Experience Platform Debugger para alternar o código incorporado para um ambiente de Desenvolvimento.
  12. 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.

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

    Botão CTA para clicar

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

    Botão CTA Clicado

Criar elementos de dados

Em seguida, crie um Elemento de dados para capturar a ID do componente e o título que foi clicado. Lembre-se que no exercício anterior, a saída de event.path era algo semelhante a component.button-b6562c963d e o valor de event.component['dc:title'] era algo como "Exibir Percursos".

ID do componente

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

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

  3. Para o campo Nome, insira ID do Componente.

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

    Formulário de Elemento de Dados de ID de Componente

  5. Clique no botão Abrir editor e insira o seguinte no editor de código personalizado:

    code language-js
    if(event && event.path && event.path.includes('.')) {
        // split on the `.` to return just the component ID
        return event.path.split('.')[1];
    }
    
  6. Salve as alterações.

    note note
    NOTE
    Lembre-se de que o objeto event está disponível e com escopo baseado no evento que acionou a Regra na propriedade de marca. O valor de um Elemento de Dados não é definido até que o Elemento de Dados seja referenciado em uma Regra. Portanto, é seguro usar este Elemento de Dados dentro de uma Regra como a regra Página Carregada criada na etapa anterior mas não seria segura para uso em outros contextos.

Título do componente

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

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

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

  4. Clique no botão Abrir editor e insira o seguinte no editor de código personalizado:

    code language-js
    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    
  5. Salve as alterações.

Adicionar uma condição à regra CTA Clicado

Em seguida, atualize a regra Clicado no CTA para garantir que a regra só seja acionada quando o evento cmp:click for acionado para um Teaser ou um Botão. Como o CTA do Teaser é considerado um objeto separado na camada de dados, é importante verificar se o pai veio de um Teaser.

  1. Na interface da Propriedade de Marca, navegue até a regra CTA Clicado criada anteriormente.

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

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

    Código personalizado de condição clicada do CTA

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

    code language-js
    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.

  5. Salve as alterações.

Atualmente, a regra CLICK do CTA simplesmente gera uma instrução de console. Em seguida, use os elementos de dados e a extensão do Analytics para definir as variáveis do Analytics como uma ação. Também vamos definir uma ação extra para acionar o Rastrear link e enviar os dados coletados para a Adobe Analytics.

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

    Remover ação de código personalizado

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

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

  4. Defina os seguintes valores para eVars, Props e Events:

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

    Definir Propriedade e eventos de eVar

    note note
    NOTE
    Aqui %Component ID% é usado, pois garante um identificador exclusivo para o CTA que foi clicado. Uma possível desvantagem de usar %Component ID% é que o relatório do Analytics contém valores como button-2e6d32893a. O uso de %Component Title% daria um nome mais amigável, mas o valor pode não ser exclusivo.
  5. Em seguida, adicione uma Ação extra à direita de Adobe Analytics - Definir Variáveis tocando no ícone mais:

    Adicionar uma Ação Extra à Regra de Marca

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

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

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

    Configuração para enviar beacon de link

    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.

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

    Configuração da Regra de Marca Final

    • 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).
  10. Salve todas as alterações e crie sua biblioteca de tags, promovendo para o ambiente apropriado.

Agora que a regra CTA clicado envia o beacon do Analytics, você poderá ver as variáveis de rastreamento do Analytics usando o Depurador de Experience Platform.

  1. Abra o Site WKND em seu navegador.

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

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

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

    Depurador da guia Analytics

  5. No navegador, clique em um dos botões CTA Teaser ou Button para navegar para outra página.

    Botão CTA para clicar

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

    Eventos, evar e prop do Analytics rastreados no clique

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

    Clique no link Navegação no rodapé

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

    note note
    NOTE
    Se você não vir nenhum log de console, verifique se Log de console está marcado em Tags de Experience Platform no Depurador de Experience Platform.

Parabéns.

Você acabou de usar a Camada de dados do cliente Adobe orientada por eventos e a Tag no Experience Platform para rastrear os cliques de componentes específicos em um site de AEM.

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d