Coletar dados de página com o Adobe Analytics

Saiba como usar os recursos integrados do Camada de dados de clientes Adobe com componentes principais AEM para coletar dados sobre uma página no Adobe Experience Manager Sites. Tags no Experience Platform e a variável Extensão do Adobe Analytics são usadas para criar regras para enviar dados de página para o Adobe Analytics.

O que você vai criar

Neste tutorial, você acionará uma regra de tag com base em um evento da Camada de dados do cliente Adobe. Além disso, adicione condições para quando a regra deve ser acionada e envie o Nome da página e Modelo da página valores de uma página AEM para o Adobe Analytics.

Objetivos

1. Crie uma regra orientada por eventos na propriedade de tag que capture alterações da camada de dados
2. Mapear propriedades da camada de dados da página para Elementos de dados na propriedade da tag
3. Coletar e enviar dados de página para o Adobe Analytics usando o sinal de exibição de página

Pré-requisitos

Os seguintes são obrigatórios:

• Propriedade da tag no Experience Platform
• Adobe Analytics ID do conjunto de relatórios de teste/desenvolvimento e servidor de rastreamento. Consulte a documentação a seguir para criação de um conjunto de relatórios.
• Depurador Experience Platform extensão do navegador. Capturas de tela neste tutorial capturadas do navegador Chrome.
• (Opcional) Site AEM com a variável Camada de dados de clientes Adobe habilitada. Este tutorial usa informações voltadas ao público WKND site, mas você pode usar seu próprio site.

Alternar ambiente de tag para o site da WKND

A variável WKND é um site voltado para o público, criado com base em um projeto de código aberto concebido como referência e tutorial para uma implementação do AEM.

Em vez de configurar um ambiente AEM e instalar a base de código WKND, você pode usar o depurador Experience Platform para alternar o live Site da WKND para seu propriedade da tag. No entanto, você pode usar seu próprio site AEM se ele já tiver o Camada de dados de clientes Adobe habilitada.

1. Faça logon no Experience Platform e criar uma propriedade de tag (caso ainda não o tenha feito).

2. Verifique se uma tag inicial do JavaScript a biblioteca foi criada e promovido para a tag ambiente.

3. Copie o código de incorporação do JavaScript do ambiente de tag em que sua biblioteca foi publicada.

   

4. No navegador, abra uma nova guia e navegue até Site da WKND

5. Abra a extensão do navegador Experience Platform Debugger

   

6. Navegue até Tags do Experience Platform > Configuração e sob Códigos de inserção inseridos substituir o código incorporado existente por seu código incorporado copiado da etapa 3.

   

7. Ativar Registro do console e Bloquear o depurador na guia WKND.

   

Verificar a camada de dados do cliente Adobe no site WKND

A variável Projeto de referência WKND O é construído com os Componentes principais do AEM e tem o Camada de dados de clientes Adobe habilitada por padrão. Em seguida, verifique se a Camada de dados do cliente Adobe está ativada.

1. Navegue até Site da WKND.

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

   

3. Expanda a resposta e inspecione as page entrada. Você deve ver um schema de dados como o seguinte:

   page-2eee4f8914:
       @type: "wknd/components/page"
       dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
       dc:title: "WKND Adventures and Travel"
       repo:modifyDate: "2020-08-31T21:02:21Z"
       repo:path: "/content/wknd/us/en.html"
       xdm:language: "en-US"
       xdm:tags: ["Attract"]
       xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"
   

   Para enviar dados de página para o Adobe Analytics, vamos usar as propriedades padrão, como dc:title, xdm:language, e xdm:template da camada de dados.

   Para obter mais informações, consulte Esquema de página dos Esquemas de dados dos Componentes principais.

   OBSERVAÇÃO

   Se você não vir a variável adobeDataLayer Objeto JavaScript? Certifique-se de que o A Camada de Dados de Clientes Adobe foi ativada no seu site.

Criar uma regra de Página carregada

A Camada de dados de clientes Adobe é uma evento camada de dados orientada. Quando a camada de dados da página AEM é carregada, ela aciona um cmp:show evento. Crie uma regra que seja acionada quando o cmp:show é acionado a partir da camada de dados da página.

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

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

   

3. Atribua um nome à regra Página carregada.

4. No Eventos , clique em Adicionar para abrir o Configuração de evento assistente.

5. Para Tipo de evento selecione Custom Code.

   

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

   var pageShownEventHandler = function(evt) {
      // defensive coding to avoid a null pointer exception
      if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
         //trigger the Tag Rule and pass event
         console.log("cmp:show 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 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:show into the data layer
   window.adobeDataLayer.push(function (dl) {
      //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
      dl.addEventListener("cmp:show", pageShownEventHandler);
   });
   

   O trecho de código acima adiciona um ouvinte de evento de envio de uma função na camada de dados. Quando cmp:show evento é acionado o pageShownEventHandler é chamada. Nesta função, algumas verificações de sanidade são adicionadas e um novo event é 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'].

7. Salve as alterações.

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

9. Para Tipo de ação escolha Custom Code.

   

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

    console.log("Page Loaded ");
    console.log("Page name: " + event.component['dc:title']);
    console.log("Page type: " + event.component['@type']);
    console.log("Page template: " + event.component['xdm:template']);
    

    A variável event o objeto é transmitido de trigger() chamado no evento personalizado. Aqui, o component é a página atual derivada da camada de dados getState no evento personalizado.

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

    OBSERVAÇÃO

    Pode ser útil usar a variável Adobe Experience Platform Debugger para alternar o código incorporado para um Desenvolvimento ambiente.

12. Navegue até o site AEM e abra as ferramentas do desenvolvedor para visualizar o console. Atualize a página e você verá que as mensagens do console foram registradas:

Criar elementos de dados

Em seguida, crie vários Elementos de dados para capturar valores diferentes da Camada de dados do cliente Adobe. Como visto no exercício anterior, é possível acessar as propriedades da camada de dados diretamente pelo código personalizado. A vantagem de usar elementos de dados é que eles podem ser reutilizados nas regras de tag.

Os elementos de dados são mapeados para o @type, dc:title, e xdm:template propriedades.

Tipo de recurso do componente

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

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

3. Para o Nome insira o Tipo de recurso do componente.

4. Para o Tipo de elemento de dados selecione Custom Code.

   

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

   if(event && event.component && event.component.hasOwnProperty('@type')) {
       return event.component['@type'];
   }
   

6. Salve as alterações.

   OBSERVAÇÃO

   Lembre-se de que a event objeto é disponibilizado e escopo com base no evento que acionou o Regra na propriedade da tag. O valor de um elemento de dados não é definido até que o elemento de dados seja referenciado em uma Regra. Portanto, é seguro usar esse elemento de dados em uma Regra como a Página carregada regra criada na etapa anterior mas não seria seguro usar em outros contextos.

Nome da Página

1. Clique em Adicionar elemento de dados botão

2. Para o Nome insira Nome da página.

3. Para o Tipo de elemento de dados selecione Custom Code.

4. 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'];
   }
   

5. Salve as alterações.

Modelo da página

1. Clique em Adicionar elemento de dados botão

2. Para o Nome insira Modelo da página.

3. Para o Tipo de elemento de dados selecione Custom Code.

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

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

5. Salve as alterações.

6. Agora você deve ter três elementos de dados como parte da regra:

   

Adicionar a extensão Analytics

Em seguida, adicione a extensão do Analytics à propriedade de tag para enviar dados a um conjunto de relatórios.

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

2. Ir para Extensões > Catálogo

3. Localize o Adobe Analytics e clique em Instalar

   

4. Em Gerenciamento de biblioteca > Conjuntos de relatórios, insira as IDs do conjunto de relatórios que você deseja usar com cada ambiente de tag.

   

   OBSERVAÇÃO

   Não há problema em usar um conjunto de relatórios para todos os ambientes neste tutorial, mas na vida real você pode usar conjuntos de relatórios separados, como mostrado na imagem abaixo

   DICA

   Recomendamos usar o Opção Gerenciar a biblioteca para mim como a configuração Gerenciamento de biblioteca, pois facilita muito a manutenção da variável AppMeasurement.js biblioteca atualizada.

5. Marque a caixa para ativar Usar Activity Map.

   

6. Em Geral > Servidor de rastreamento, insira o servidor de rastreamento, por exemplo, tmd.sc.omtrdc.net. Insira seu servidor de rastreamento SSL se o site suporta https://

   

7. Clique em Salvar para salvar as alterações.

Adicionar uma condição à regra Página carregada

Em seguida, atualize o Página carregada regra para usar o Tipo de recurso do componente elemento de dados para garantir que a regra só seja acionada quando o cmp:show evento é para o Página. Outros componentes podem acionar o cmp:show por exemplo, o componente Carrossel é acionado quando os slides são alterados. Portanto, é importante adicionar uma condição para essa regra.

1. Na interface da Propriedade de tag, navegue até a Página carregada regra criada anteriormente.

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

3. Para Tipo de condição selecione Value Comparison opção.

4. Defina o primeiro valor no campo de formulário como %Component Resource Type%. Você pode usar o ícone Elemento de dados para selecionar o Tipo de recurso do componente elemento de dados. Deixe o comparador definido como Equals.

5. Defina o segundo valor como wknd/components/page.

   

   OBSERVAÇÃO

   É possível adicionar essa condição na função de código personalizada que atende à cmp:show evento criado anteriormente no tutorial. No entanto, adicioná-la na interface do dá mais visibilidade a usuários adicionais que podem precisar fazer alterações na regra. Além disso, podemos usar nosso elemento de dados!

6. Salve as alterações.

Definir variáveis do Analytics e acionar o sinal de Exibição de página

Atualmente, o Página carregada A regra do simplesmente gera uma instrução do console. Em seguida, use os elementos de dados e a extensão Analytics para definir as variáveis do Analytics como uma ação no Página carregada regra. Também definimos uma ação extra para acionar o Beacon de Exibição de página e enviar os dados coletados para o Adobe Analytics.

1. Na regra Página carregada, remover o Núcleo - Código personalizado ação (as instruções do console):

   

2. Na subseção Ações, clique em Adicionar para adicionar uma nova ação.

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

   

4. No painel principal, selecione uma opção disponível eVar e definido como o valor do Elemento de dados Modelo da página. Usar o ícone Elementos de dados para selecionar o Modelo da página elemento.

   

5. Role para baixo, em Configurações adicionais set Nome da página ao elemento de dados Nome da página:

   

6. Salve as alterações.

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

   

8. Defina o Extensão digite para Adobe Analytics e defina o Tipo de ação para Enviar sinal. Como essa ação é considerada uma exibição de página, deixe o rastreamento padrão definido como s.t().

   

9. Salve as alterações. A variável Página carregada A regra do agora deve ter a seguinte configuração:

   

   • 1. Ouça o cmp:show evento.
   • 2. Verifique se o evento foi acionado por uma página.
   • 3. Definir variáveis do Analytics para Nome da página e Modelo da página
   • 4. Enviar o sinal de Exibição de página do Analytics

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

Validar o sinal de Exibição de página e a chamada do Analytics

Agora que o Página carregada Se uma regra enviar o beacon do Analytics, você poderá ver as variáveis de rastreamento do Analytics usando o Depurador de Experience Platform.

1. Abra o Site da WKND no navegador.

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

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

4. Abra o menu Analytics e verifique se o conjunto de relatórios está definido como seu conjunto de relatórios. O Nome da página também deve ser preenchido:

   

5. Rolar para baixo e expandir Solicitações de rede. Você deverá conseguir encontrar o evar definido para o Modelo da página:

   

6. Retorne ao navegador e abra o console do desenvolvedor. Clique na guia Carrossel na parte superior da página.

   

7. Observe a instrução do console no console do navegador:

   

   Isso ocorre porque o Carrossel aciona um cmp:show evento mas devido à nossa verificação do Tipo de recurso do componente, nenhum evento é acionado.

   OBSERVAÇÃO

   Se você não visualizar nenhum log do console, verifique se Registro do console está marcado em Tags do Experience Platform no Experience Platform Debugger.

8. Acesse uma página de artigo como Austrália Ocidental. Observe que o Nome da página e o Tipo de modelo são alterados.

Parabéns!

Você acabou de usar a Camada de dados do cliente Adobe orientada por eventos e as Tags no Experience Platform para coletar dados da página de dados de um site AEM e enviá-los para o Adobe Analytics.

Próximas etapas

Dê uma olhada no tutorial a seguir para saber como usar a camada de dados do cliente Adobe orientada por eventos para rastrear cliques de componentes específicos em um site do Adobe Experience Manager.

Recursos do Business.Adobe.com