Ferramenta Adobe Experience Manager ContextHub

Use a ferramenta AEM ContextHub para integrar o Dynamic Tag Management ao Adobe Experience Manager (AEM) ContextHub (versão da camada de dados no AEM). Use-a também para integrar o DTM a qualquer camada de dados, mesmo em sites que não usam o AEM.

Os clientes do DTM geralmente usam elementos de dados para mapear para as camadas de dados de seus sites. Por exemplo, a camada de dados pode incluir informações de que um usuário está observando determinado produto ou colocou um item no carrinho de compras. O DTM pode usar essas informações em condições e ações de regra de várias maneiras. Isso inclui o envio de dados para o Analytics para fins de relatórios ou para o Target para exibir conteúdo personalizado para o usuário.

A ferramenta AEM ContextHub resolve muitos problemas associados às camadas de dados. Algumas camadas de dados não são carregadas na parte superior da página. Outras camadas de dados são dinâmicas ou assíncronas e mudam frequentemente à medida que a página muda. No passado, esses dois problemas tornavam difícil para o DTM enviar dados ou acionar ações com eficiência.

A ferramenta AEM ContextHub elimina a necessidade de escrever código personalizado que verifica frequentemente para determinar se a camada de dados muda, é carregada em outro lugar que não o topo da página ou é modificada conforme a página muda.

Por exemplo, suponha que um cliente coloque um item no carrinho de compras e depois remova esse item. Se a página não for atualizada à medida que a camada de dados for alterada, o DTM não reconhecerá a alteração sem a adição de um código personalizado. A ferramenta AEM ContexHub contém um mecanismo de pesquisa que verifica a cada segundo para determinar se há alterações.

Como o DTM agora pode preencher proativamente elementos de dados por meio da camada de dados, os usuários também podem usar elementos de dados do AEM ContextHub em conjunto com condições lançadas anteriormente, como o Valor do elemento de dados. Isso permite que os usuários gerenciem valores de camada de dados em um carregamento de página ou combinem uma condição Valor do elemento de dados com o evento dataelementchanged nos casos em que a camada de dados mudou devido à interação do usuário.

Ao configurar essa ferramenta, você pode usar a configuração padrão para se integrar ao AEM ContextHub ou personalizar a estrutura para trabalhar com qualquer site.

  1. Clique em <Nome da propriedade da Web> > Overview > Add a Tool > AEM ContextHub.

  2. Especifique um nome descritivo para a ferramenta.

    Esse nome é exibido na guia Overview em Installed Tools.

  3. Clique em Create Tool para exibir a página AEM ContextHub Settings.

  4. Preencha os campos:

    Elemento Descrição
    Usar a camada de dados padrão do ContextHub Use o formato do AEM ContextHub. Com essa opção selecionada, o DTM faz referência ao esquema padrão do ContextHub para essa integração. Se você tiver alterado seu esquema do ContextHub ou quiser usar outra camada de dados, a opção personalizada.
    Personalizar a camada de dados do ContextHub Use um formato personalizado que mapeie para a estrutura da camada de dados de qualquer site, mesmo que ele não use o AEM. Essa opção permite editar o esquema de camada de dados. Por padrão, ela preenche a janela de edição com a camada de dados padrão do ContextHub, em que você pode fazer alterações ou que pode substituir completamente pelo seu código.
    Abrir editor Se você escolher a opção Personalizar a camada de dados do ContextHub, poderá usar o editor para inserir seu código personalizado.
    Adicionar uma observação Adicione observações sobre essa implementação.
  5. Clique em Save Changes.

Gerenciamento da camada de dados usando a ferramenta ContextHub

A ferramenta AEM ContextHub do Dynamic Tag Management (DTM) pode ser usada para implementações de camadas de dados genéricas e do ContextHub. O esquema da camada de dados do ContextHub é carregado por padrão na ferramenta e fornece uma integração simples com Adobe Experience Manager lojas ContextHub (AEM). São fornecidos exemplos da implementação padrão do ContextHub e uma implementação de camada de dados genérica personalizada.

Pré-requisitos

Para usar a ferramenta ContextHub, você deve atender aos seguintes pré-requisitos:

  • Uma camada de dados de objeto ContextHub ou JavaScript existente em um site.
  • Um esquema JSON que define corretamente a camada de dados em uso no site.
  • Uma propriedade da Web do DTM principal em uso no site.

Componentes da ferramenta AEM ContextHub

A ferramenta AEM ContextHub adiciona duas funcionalidades ao DTM:

  • A definição da camada de dados
  • O tipo de camada de dados do AEM ContextHub

Além disso, um novo tipo de evento foi adicionado para facilitar o monitoramento da camada de dados, chamado dataelementchanged. Esse tipo de evento pode ser usado independentemente da ferramenta AEM ContextHub.

Cada área funcional corresponde a uma etapa de configuração descrita nos dois exemplos abaixo.

Monitoramento de elementos de dados

O novo tipo de evento dataelementchanged monitora todas as alterações que ocorrem em um valor de elemento de dados específico durante uma exibição de página. As observações a seguir devem ser levadas em consideração ao se usar esse tipo de evento.

  1. O elemento de dados deve ser mapeado para um valor simples de JavaScript. Valores complexos, como matrizes e objetos retornados em um script personalizado de elemento de dados, não funcionarão corretamente. Cookies, seletores de CSS e parâmetros de URL também produzem resultados inesperados e podem não funcionar. Valores simples como sequências de caracteres e números inteiros funcionam bem.
  2. Seja conservador quanto ao número de dataelementchanged tipos de evento referenciados em uma página única. Embora o monitoramento seja eficiente, um grande número de avaliações pode afetar o desempenho da página.
  3. O dataelementchanged tipo de evento funciona somente na exibição de página atual porque é um sistema de monitoramento baseado em DOM.
  4. O monitor do elemento de dados pesquisa os valores.

Exemplo padrão da camada de dados do ContextHub

Exemplo usando a ferramenta AEM ContextHub que faz referência à camada de dados padrão do ContextHub e a utiliza na configuração Dynamic Tag Management.

A camada de dados do ContextHub será carregada em um site de teste Adobe Experience Manager (AEM), mas o ContextHub pode ser usado separado do AEM. Entre em contato com seu representante da Adobe caso deseje usar o ContextHub separado do AEM.

Todos os armazenamentos do ContextHub podem ser referenciados no console do navegador.

O monitor da camada de dados do DTM é iniciado antes de qualquer outra função do DTM, de modo que os exemplos não implantarão a camada de dados por meio do DTM, mesmo que seja possível implantá-la. Em vez disso, eles dependerão da camada de dados gerada pelo servidor. Caso contrário, avisos do JavaScript podem ocorrer porque determinados valores da camada de dados podem não estar disponíveis.

Definir a camada de dados

A primeira etapa na configuração da ferramenta AEM ContextHub é adicioná-la a uma propriedade da Web.

OBSERVAÇÃO

No momento, somente uma ferramenta AEM ContextHub é permitida por propriedade da Web do DTM.

  1. Clique em <Nome da propriedade da Web> > Overview > Add a Tool > AEM ContextHub.

  2. Especifique um nome descritivo para a ferramenta.

  3. Clique em Create Tool para exibir a página AEM ContextHub Settings.

  4. Selecione Use Default ContextHub Data Layer para aproveitar os armazenamentos padrão do ContextHub.

    Ou

    Selecione Customize ContextHub Data Layer para modificar o esquema. Será necessário usar a opção personalizada se uma camada de dados não padrão do ContextHub estiver sendo usada na implementação.

    A Raiz da camada de dados padrão permite o acesso a todos os armazenamentos do ContextHub. Dada a natureza dinâmica dos armazenamentos do ContextHub, há funções adicionais disponíveis com essa camada de dados que não estão disponíveis na referência de objeto simples do JavaScript usada pela abordagem de camada de dados genérica.

  5. (Condicional) Para usar uma camada de dados personalizada, clique em Open Editor para visualizar a definição do esquema da camada de dados. Se a camada de dados personalizada for uma modificação do esquema do ContextHub, certifique-se de adicionar “ContextHub” no campo Data Layer Root.

    O esquema padrão do ContextHub é preenchido no editor.

    1. Modifique o esquema conforme necessário para corresponder ao esquema da camada de dados do site.
    2. Clique em Save and Close para salvar o esquema e fechar o editor.
  6. Clique em Save Changes.

Criar um elemento de dados de camada de dados

  1. Na propriedade da Web, clique na guia Rules e, em seguida, clique em Data Elements no menu esquerdo.

  2. Clique em Create New Data Element.

  3. Especifique um nome para o elemento de dados. Neste exemplo, nomeie o elemento de dados como “total_price”.

  4. Na lista suspensa Type, selecione AEM ContextHub.

    O nome da ferramenta AEM ContextHub é preenchido na “Origem”, mas somente uma ferramenta AEM ContextHub pode ser definida na versão atual.

  5. Mapeie o elemento de dados para a camada de dados selecionando um caminho no seletor Objeto.

    Neste exemplo, selecione o objeto cart.totalPriceFloat.

  6. Clique em Save Data Element.

Criar uma regra baseada em eventos que use o tipo de evento de alteração de elemento de dados

  1. Na propriedade da Web, clique na guia Rules e, em seguida, clique em Event Based Rules no menu esquerdo.

  2. Clique em Create New Rule.

  3. Atribua um nome à regra. Neste exemplo, nomeie a regra “cart_total_update”.

  4. Expanda a seção Condições.

  5. Na lista suspensa Event Type suspensa, selecione dataelementchanged.

  6. Selecione o elemento de dados criado na seção anterior (total_price).

  7. Em Rule Conditions, selecione Data Element Value na lista suspensa e clique em Add Criteria.

  8. Selecione o elemento de dados criado na seção anterior (total_price) e atribua um valor para fazer com que a regra seja acionada.

    Neste exemplo, uma expressão regular é usada para avaliar qualquer valor maior ou igual a 50: ^([5-9]\d|[1-9]\d{2,})$

    OBSERVAÇÃO

    Se os valores do elemento de dados forem usados dessa forma como condições, será importante que as configurações do elemento de dados sejam consideradas na correspondência. Por exemplo, selecionar a opção Force Lowercase Value nas configurações do elemento de dados converteria o valor totalmente em minúsculas antes da avaliação. Como o JavaScript diferencia maiúsculas de minúsculas, “test” não é o mesmo que “Test” e a condição não é acionada como esperado.

  9. Expanda a seção Javascript / Third Party Tags.

  10. Clique em Add New Script.

  11. Adicione um JavaScript não sequencial que forneça uma notificação se a regra for acionada. Nomeie a regra como “big_money_alert” e adicione um script de alerta semelhante ao seguinte exemplo:

    alert('$' + _satellite.getVar(‘total_price’) + ‘ is big money!’);

  12. Clique em Save Code e depois em Save Rule.

Validar a implementação

No site habilitado para DTM que executa a propriedade da Web acima, valide a implementação.

  • No console do desenvolvedor, verifique a existência da camada de dados (ContextHub).

  • Altere o objeto da camada de dados que está sendo monitorada para um valor que NÃO corresponda à condição acima: ContextHub.setItem('/store/cart/totalPriceFloat','5');

  • Altere o objeto de camada de dados que está sendo monitorado para um valor que CORRESPONDA à condição acima: ContextHub.setItem('/store/cart/totalPriceFloat','52');

  • No exemplo de implementação, uma caixa de alerta deve ser exibida:

Se a depuração do DTM estiver ativada, a falha de avaliação deverá aparecer no console.

Exemplo de camada de dados personalizada

Exemplo usando a ferramenta AEM ContextHub que usa e faz referência a uma camada de dados personalizada e não pertencente ao ContextHub na configuração do Dynamic Tag Management.

A camada de dados de exemplo (_dl) será carregada na página da Web de teste como uma definição de objeto JavaScript na seção <head/> da página antes de o código incorporado do DTM ser referenciado.

<head> 
    <script> 
        window._dl = { 
            page: { 
                name: 'homepage', 
                quantity: 1, 
                friend: 'No one' } 
        } 
    </script> 
    <script src="//assets.adobedtm.com/satelliteLib-*.js"></script> 
</head> 

O monitor da camada de dados do DTM (veja abaixo) é iniciado antes de qualquer outra função do DTM, portanto, os exemplos não implantarão a camada de dados por meio do DTM. Caso contrário, avisos do JavaScript podem ocorrer porque determinados valores da camada de dados podem não estar disponíveis.

Definir a camada de dados

A primeira etapa na configuração da ferramenta AEM ContextHub é adicioná-la a uma propriedade da Web.

OBSERVAÇÃO

No momento, somente uma ferramenta AEM ContextHub é permitida por propriedade da Web do DTM.

  1. Clique em <Nome da propriedade da Web> > Overview > Add a Tool > AEM ContextHub.

  2. Especifique um nome descritivo para a ferramenta.

  3. Clique em Create Tool para exibir a página AEM ContextHub Settings.

  4. Selecione Customize ContextHub Data Layer para modificar o esquema.

    Um nome de objeto JavaScript raiz deve ser adicionado ao campo Data Layer Root para camadas de dados que não sejam do ContextHub. A definição _dl é usada nos exemplos genéricos desta seção.

  5. Clique em Open Editor para visualizar a definição do esquema da camada de dados.

    Por padrão, o esquema do ContextHub padrão é preenchido no editor.

  6. Exclua o esquema padrão e cole no esquema da camada de dados do site.

    A amostra de esquema a seguir não pertencente ao ContextHub é usada nos exemplos genéricos:

    { 
      "$schema": "https://json-schema.org/draft-04/schema#", 
      "type": "object", 
      "properties": { 
        "page": { 
          "type": "object", 
          "properties": { 
            "name": { 
              "type": "string" 
            }, 
            "quantity": { 
              "type": "number" 
            }, 
            "friend": { 
              "type": "string" 
            } 
          }, 
          "required": [ 
            "name", 
            "quantity", 
            "friend" 
          ] 
        } 
       }, 
      "required": [ 
        "page" 
      ] 
    } 
    
  7. Clique em Save and Close para salvar o esquema e fechar o editor e, em seguida, clique em Save Changes.

Criar um elemento de dados de camada de dados

  1. Na propriedade da Web, clique na guia Rules e, em seguida, clique em Data Elements no menu esquerdo.

  2. Clique em Create New Data Element.

  3. Especifique um nome para o elemento de dados. Neste exemplo, nomeie o elemento de dados como “my_friend”.

  4. Na lista suspensa Type, selecione AEM ContextHub.

    O nome da ferramenta AEM ContextHub é preenchido na “Origem”, mas somente uma ferramenta AEM ContextHub pode ser definida na versão atual.

  5. Mapeie o elemento de dados para a camada de dados selecionando um caminho no seletor Objeto.

    Neste exemplo, selecione o objeto page.friend.

  6. Clique em Save Data Element.

Criar uma regra baseada em eventos que use o tipo de evento de alteração de elemento de dados

  1. Na propriedade da Web, clique na guia Rules e, em seguida, clique em Event Based Rules no menu esquerdo.

  2. Clique em Create New Rule.

  3. Atribua um nome à regra. Neste exemplo, nomeie a regra “find_a_friend”.

  4. Expanda a seção Condições.

  5. Na lista suspensa Event Type, selecione dataelementchanged.

  6. Selecione o elemento de dados criado na seção anterior (my_friend).

  7. Em Rule Conditions, selecione Data Element Value na lista suspensa e clique em Add Criteria.

  8. Selecione o elemento de dados criado na seção anterior (my_friend) e atribua um valor para fazer com que a regra seja acionada.

    Neste exemplo, use “Carl” como o valor.

    OBSERVAÇÃO

    Se os valores do elemento de dados forem usados dessa forma como condições, será importante que as configurações do elemento de dados sejam consideradas na correspondência. Por exemplo, selecionar a opção Force Lowercase Value nas configurações do elemento de dados converteria o valor totalmente em minúsculas antes da avaliação. Como o JavaScript diferencia maiúsculas de minúsculas, “test” não é o mesmo que “Test” e a condição não é acionada como esperado.

  9. Expanda a seção Javascript / Third Party Tags.

  10. Clique em Add New Script.

  11. Adicione um JavaScript não sequencial que forneça uma notificação se a regra for acionada. Nomeie a regra “found_my_friend” e adicione um script de alerta semelhante ao seguinte exemplo:

    alert(_satellite.getVar(‘my_friend’) + ‘ is my friend.’);

  12. Clique em Save Code e depois em Save Rule.

Validar a implementação

No site habilitado para DTM que executa a propriedade da Web acima, valide a implementação.

  • No console do desenvolvedor, verifique a existência da camada de dados (_dl).

  • Altere o objeto da camada de dados que está sendo monitorada para o valor que foi definido na condição acima (_dl.page.friend = ‘Carl’).

    • No exemplo de implementação, uma caixa de alerta deve ser exibido:

  • Altere o objeto para um valor diferente de (_dl.page.friend = ‘Bob’) e nenhum alerta deve ser exibido.

    OBSERVAÇÃO

    Se a depuração do DTM estiver ativada, a falha de avaliação deverá aparecer no console.

  • Altere o objeto para um valor em minúsculas da correspondência (_dl.page.friend = ‘carl’) e nenhum alerta deve ser exibido.

  • Altere o objeto para o valor correto de maiúsculas e minúsculas da correspondência (_dl.page.friend = ‘Carl’) e o alerta deve ser exibido novamente.

Nesta página