Integração

Integrar o AEM Sites e o Adobe Analytics

Última atualização em 2024-01-26
  • Criado para:
  • Intermediate
    Developer
OBSERVAÇÃO

O Adobe Experience Platform Launch foi reformulado como um conjunto de tecnologias de coleção de dados na Adobe Experience Platform. Como resultado, várias alterações de terminologia foram implementadas na documentação do produto. Consulte o seguinte documento para obter uma referência consolidada das alterações de terminologia.

Saiba como integrar o AEM Sites e o Adobe Analytics à extensão de tags da Adobe Analytics usando 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

Rastreamento de dados da página

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:

OBSERVAÇÃO

Precisa de ajuda para integrar a propriedade de tag e o site do AEM? Ver esta série de vídeos.

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.

    Copiar código de inserção da propriedade de tag

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

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

    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.

    Substituir código de inserção

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

    Registro do console

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.

    Estado da Camada de Dados 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 orientado por eventos camada de dados. 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.

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

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

  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.

    Tipo de ação do código personalizado

  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, a variável 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:

Mensagens de console carregadas na página

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.

    Tipo de recurso do componente

  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:

    Elementos de dados na 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

    Extensão do Adobe Analytics

  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.

    Insira as IDs do conjunto de relatórios

    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.

    Ativar Activity Map de uso

  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://

    Insira os servidores de rastreamento

  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 ícone de 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.

    Configuração de condição para a regra de página carregada

    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):

    Remover ação de código personalizado

  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

    Definir extensão de ação para variáveis de conjunto do Analytics

  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 Ícone de elementos de dados para selecionar o Modelo da página elemento.

    Definir como modelo da página de eVar

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

    Conjunto de variáveis de ambiente do 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:

    Adicionar uma ação de regra de tag adicional

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

    Enviar ação Beacon Adobe Analytics

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

    Configuração da regra de tag final

    • 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 Ícone do Experience Platform Debugger 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:

    Depurador de guia do Analytics

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

    Evar e Nome da página definidos

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

    Clique na página do carrossel

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

    Condição não atendida

    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.

Nesta página