Integrar o AEM Sites e o Adobe Analytics

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

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

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

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

Abra a extensão do navegador Experience Platform Debugger

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.

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

Navegue até Site da WKND.

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.

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.

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

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

Atribua um nome à regra Página carregada.

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

Para Tipo de evento selecione Custom Code.

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'].

Salve as alterações.

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

Para Tipo de ação escolha Custom Code.

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.

Salve as alterações e execute um build na propriedade da tag para promover o código à ambiente usado no seu site 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 Elementos de dados e clique em Criar novo elemento de dados.

Para o Nome insira o Tipo de recurso do componente.

Para o Tipo de elemento de dados selecione Custom Code.

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

Salve as alterações.

Clique em Adicionar elemento de dados botão

Para o Nome insira Nome da página.

Para o Tipo de elemento de dados selecione Custom Code.

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

Salve as alterações.

Clique em Adicionar elemento de dados botão

Para o Nome insira Modelo da página.

Para o Tipo de elemento de dados selecione Custom Code.

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

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 o Adobe Analytics e clique em Instalar

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.

Marque a caixa para ativar Usar Activity Map.

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

Clique em Salvar para salvar as alterações.

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

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

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

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.

Defina o segundo valor como wknd/components/page.

Salve as alterações.

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

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

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

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.

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

Salve as alterações.

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

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

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

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

Abra o Site da WKND no navegador.

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

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

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:

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

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

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.

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.