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 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.
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.
Os seguintes são obrigatórios:
Precisa de ajuda para integrar a propriedade de tag e o site do AEM? Ver esta série de vídeos.
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.
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.
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.
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.
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.
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.
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, o 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.
Pode ser útil usar a variável Adobe Experience Platform Debugger para alternar o código incorporado para um Desenvolvimento ambiente.
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:
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.
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.
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.
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:
Em seguida, adicione a extensão do Analytics à propriedade de tag para enviar dados a um conjunto de relatórios.
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.
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
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.
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.
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.
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
.
É 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!
Salve as alterações.
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.
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:
cmp:show
evento.Salve todas as alterações e crie sua biblioteca de tags, promovendo para o ambiente apropriado.
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.
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.
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.
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.
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.
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.