Integrar o AEM Sites e o Adobe Analytics

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

Certifique-se de que uma biblioteca de JavaScript de marca inicial tenha sido criada e promovida para o ambiente de marca.

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

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

Abra a extensão do navegador Experience Platform Debugger

Navegue até Marcas de Experience Platform > Configuração e, em Códigos Inseridos Injetados, substitua o código inserido existente por seu código inserido copiado da etapa 3.

Habilite o Log do Console e Bloqueie o depurador na guia WKND.

Navegue até WKND Site.

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 inspecione a entrada page. 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, reveja o Esquema de página dos Esquemas de dados dos Componentes principais.

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

Nomeie a regra Página carregada.

Na subseção Eventos, clique em 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 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 eventos ao enviar uma função para a camada de dados. Quando o evento cmp:show é acionado, a função pageShownEventHandler é chamada. Nesta função, algumas verificações de integridade são adicionadas e um novo 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.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']);

O objeto event é passado do método trigger() chamado no evento personalizado. Aqui, o component é a página atual derivada da camada de dados getState no evento personalizado.

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

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 Criar Novo Elemento de Dados.

Para o campo Nome, insira o Tipo de Recurso 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('@type')) {
    return event.component['@type'];
}

Salve as alterações.

Clique no botão Adicionar elemento de dados

Para o campo Nome, digite Nome da Página.

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.

Clique no botão Adicionar elemento de dados

Para o campo Nome, digite Modelo de Página.

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('xdm:template')) {
    return event.component['xdm:template'];
}

Salve as alterações.

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

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

Ir para Extensões > Catálogo

Localize a extensão Adobe Analytics e clique em Instalar

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

Marque a caixa para habilitar Usar Activity Map.

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

Clique em Salvar para salvar as alterações.

Na interface da Propriedade de tag, navegue até a regra Página carregada 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 a opção Comparação de Valores.

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

Defina o segundo valor como wknd/components/page.

Salve as alterações.

Na regra da Página Carregada, remova a ação Núcleo - Código Personalizado (as instruções do console):

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

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

No painel principal, selecione um eVar disponível e defina como o valor do Elemento de dados Modelo de página. Use o ícone Elementos de Dados para selecionar o elemento Modelo de Página.

Role para baixo, em Configurações Adicionais, defina Nome da Página como o elemento de dados Nome da Página:

Salve as alterações.

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. Como esta ação é considerada uma exibição de página, deixe o rastreamento padrão definido como s.t().

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

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

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. O Nome da página também deve ser preenchido:

Role para baixo e expanda Solicitações de Rede. Você deve encontrar o evar definido para o Modelo de Página:

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

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

Isso ocorre porque o Carrossel não aciona um evento cmp:show but devido à nossa verificação do Tipo de Recurso do Componente, nenhum evento é acionado.

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