Adicionar o Adobe Analytics

A configuração da extensão, que gerencia as principais configurações da biblioteca AppMeasurement.js e pode definir variáveis globais

Ações de regras responsáveis pelos itens a seguir:

1. Definir variáveis
2. Limpar variáveis
3. Enviar o sinal do Analytics

Ir para Extensões > Catálogo

Localize a extensão Adobe Analytics

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. Se os usuários tiverem acesso ao Adobe Analytics, observe que, ao digitar na caixa, você verá uma lista pré-preenchida de todos os seus conjuntos de relatórios. (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)

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

Na seção Variáveis Globais, em Configurações Adicionais, defina a variável Nome da Página usando seu elemento de dados Page Name. Clique no para abrir o modal e escolher o elemento de dados Page Name da página)

Clique em Salvar na biblioteca

Vá para a seção Regras na navegação à esquerda e clique em Adicionar regra

Atribua um nome à regra All Pages - DOM Ready

Clique em Eventos > Adicionar para abrir a tela Event Configuration

Selecione Tipo de evento > Pronto para DOM (Observe que a ordem da regra é "50")

Clique em Manter alterações

Em Ações, clique em para adicionar uma nova ação

Selecione Extensão > Adobe Analytics

Selecione Tipo de ação > Enviar sinal

Deixar rastreamento configurado como s.t(). Observe que se quiser fazer uma chamada s.tl() em uma regra de clique-evento, seria possível fazer isso usando a ação Enviar sinal.

Clique no botão Manter alterações

Clique em Salvar na biblioteca e na build

Abra o site de demonstração do Luma no navegador Chrome

Clique no ícone Depurador para abrir o Adobe Experience Cloud Debugger

Certifique-se de que o Depurador está mapeando a propriedade da tag para o seu ambiente de desenvolvimento, conforme descrito na lição anterior

Clique para abrir a guia Analytics

Expanda o nome do seu conjunto de relatórios para mostrar todas as solicitações feitas

Confirme se a solicitação foi acionada com a variável e o valor do Nome da página

Clique em Elementos de dados na navegação à esquerda

Clique em Adicionar elemento de dados

Nomeie o elemento de dados Page Type

Selecione Tipo de elemento de dados > Variável JavaScript

Use digitalData.page.category.type como o nome da variável do JavaScript

Verifique as opções Limpar texto e Forçar caixa baixa

Clique em Salvar na biblioteca

Clique em Elementos de dados na navegação à esquerda

Clique em Adicionar elemento de dados

Nomeie o elemento de dados Product Id

Selecione Tipo de elemento de dados > Variável JavaScript

Use digitalData.product.0.productInfo.sku como o nome da variável do JavaScript

Verifique as opções Limpar texto e Forçar caixa baixa

Clique em Salvar na biblioteca

Acesse a página Extensões > Catálogo

Localize a extensão Adobe Analytics Product String pelos Serviços Adobe Consulting e clique em Instalar

Reserve um momento para ler as instruções

Clique em Salvar na biblioteca

Vá para a seção Regras na navegação à esquerda e clique em Adicionar regra

Atribua um nome à regra Product Details - DOM Ready - 40

Clique em Eventos > Adicionar para abrir a tela Event Configuration

Selecione Tipo de evento > Pronto para DOM

Defina a Ordem como 40, para que a regra seja executada antes da regra que contém a ação Analytics > Enviar sinal

Clique em Manter alterações

Em Condições, clique no para abrir a tela Condition Configuration

1. Selecione Tipo de Condição > Comparação de Valores

2. Use o seletor de elemento de dados, escolha Page Type no primeiro campo

3. Selecione Contém na lista suspensa do operador de comparação

4. No próximo tipo de campo product-page (essa é a parte exclusiva do valor do tipo de página extraído da camada de dados no PDP)

5. Clique em Manter alterações

   

Em Ações, clique em para adicionar uma nova ação

Selecione Extensão > Cadeia de Caracteres do Produto Adobe Analytics

Selecione Tipo de ação > Definir s.products

Na seção Evento de comércio eletrônico do Analytics, selecione prodView

Na seção Variáveis da camada de dados para dados do produto, use o Seletor de elementos de dados para escolher o elemento de dados Product Id

Clique em Manter alterações

Em Ações, clique em para adicionar uma nova ação

Selecione Extensão > Adobe Analytics

Selecione Tipo de ação > Definir variáveis

Selecione eVar 1 > Definir como e insira product detail page

Defina event1, deixando os valores opcionais em branco

Em Eventos, clique no botão Adicionar outro

Defina o evento prodView, deixando os valores opcionais em branco

Clique em Manter alterações

Clique em Salvar na biblioteca e na build

Abra o site de demonstração do Luma no navegador Chrome

Navegue até qualquer página de detalhes do produto

Clique no ícone Depurador para abrir o Adobe Experience Cloud Debugger

Clique na guia Analytics

Expanda o conjunto de relatórios

Observe as Variáveis de detalhes do produto que agora estão no depurador, especificamente se eVar1 tiver sido definida como "página de detalhes do produto", se a variável Events estiver definida como "event1" e "prodView", se a variável Produtos estiver definida com a ID de produto do produto que você está visualizando e que seu Nome de página ainda está definido pela extensão do Analytics.

Vá para a seção Regras na navegação à esquerda e clique em Adicionar regra

Atribua um nome à regra Homepage - Featured Products enters Viewport

Clique em Eventos > Adicionar para abrir a tela Event Configuration

Selecione Tipo de Evento > Inserir Viewport. Isso exibirá um campo onde você precisa entrar no seletor de CSS que identificará o item na página que deve acionar a regra quando ela entrar na exibição no navegador

Volte para a página inicial do Luma e role para baixo até a seção Produtos em destaque.

Clique com o botão direito do mouse no espaço entre o título "PRODUTOS EM DESTAQUE" e os itens desta seção e selecione Inspect no menu exibido com o botão direito do mouse. Isso vai te aproximar do que você quer

Nesse momento, possivelmente logo abaixo da seção selecionada, você procura por uma div com class="we-productgrid aem-GridColumn aem-GridColumn--default--12". Localize esse elemento

Clique com o botão direito do mouse neste elemento e selecione Copiar > Copiar Seletor

Retorne às marcas e cole esse valor da área de transferência no campo rotulado Elements matching the CSS selector.

1. Além disso, é você que decide como identificar os seletores de CSS. Esse método é um pouco frágil, pois determinadas alterações na página podem interromper esse seletor. Considere isso ao usar qualquer seletor de CSS nas tags.

Clique em Manter alterações

Em Condições, clique no para adicionar uma nova condição

Selecione Tipo de Condição > Comparação de Valores

Use o seletor de elemento de dados, escolha Page Name no primeiro campo

Selecione Igual na lista suspensa do operador de comparação

No próximo tipo de campo content:luma:us:en (esse é o nome da página inicial, conforme extraído da camada de dados, queremos que essa regra seja executada apenas na página inicial)

Clique em Manter alterações

Em Ações, clique em para adicionar uma nova ação

Selecione Extensão > Adobe Analytics

Selecione Tipo de ação > Definir variáveis

Defina eVar3 como Home Page - Featured Products

Defina prop3 como Home Page - Featured Products

Defina a variável Events como event3

Clique em Manter alterações

Em Ações, clique em para adicionar outra nova ação

Selecione Extensão > Adobe Analytics

Selecione Tipo de ação > Enviar sinal

Escolha a opção de rastreamento s.tl()

No campo Nome do Link, digite Scrolled down to Featured Products. Esse valor será colocado no relatório Links personalizados do Analytics

Clique em Manter alterações

Clique em Salvar na biblioteca e na build

Abra o site do Luma no navegador Chrome e verifique se você está na parte superior da página inicial.

Clique no ícone do depurador para abrir o Adobe Experience Cloud Debugger

Clique na guia Analytics

Expanda a ocorrência do conjunto de relatórios

Observe a ocorrência de exibição de página normal da página inicial com o nome da página etc. (mas nada na eVar3 ou prop3).

Deixando o Debugger aberto, role para baixo em seu site até visualizar a seção Produtos em destaque

Exiba o Debugger novamente e outra ocorrência do Analytics deve ser exibida. Essa ocorrência deve ter os parâmetros associados à ocorrência s.tl() que você configurou, ou seja:

1. LinkType = "link_o" (isso significa que a ocorrência é de link personalizado e não uma ocorrência de exibição de página).

2. LinkName = "Scrolled down to Featured Products"

3. prop3 = "Home Page - Featured Products"

4. eVar3 = "Home Page - Featured Products"

5. Events = "event3"

   

Vá para Extensões > Instalado

Na extensão do Adobe Analytics, clique em Configurar

Em Gerenciamento de biblioteca, selecione a caixa rotulada Make tracker globally accessible. Como você pode ver na bolha de ajuda, isso fará com que o rastreador seja destacado globalmente em window.s, o que é importante quando ao fazer referência a ele no JavaScript do cliente.

Ainda na extensão Analytics, role para baixo e expanda a seção intitulada Configure Tracker Using Custom Code.

Clique em Abrir editor

Cole o código a seguir no editor de códigos:

/* Plugin Config */
s.usePlugins=true
s.doPlugins=function(s) {
/* Add calls to plugins here */
}

Mantenha essa janela aberta para a próxima etapa

Copie o código a seguir

/* Adobe Consulting Plugin: getValOnce v2.01 */
s.getValOnce=function(vtc,cn,et,ep){if(vtc&&(cn=cn||"s_gvo",et=et||0,ep="m"===ep?6E4:864E5,vtc!==this.c_r(cn))){var e=new Date;e.setTime(e.getTime()+et*ep);this.c_w(cn,vtc,0===et?0:e);return vtc}return""};

Cole-o na janela de código na extensão Analytics (se ainda não estiver aberta, abra-a novamente de acordo com a etapa anterior), exatamente abaixo da função doPlugins (não dentro dela).

Copie o código a seguir:

s.campaign = s.Util.getQueryParam("cid");

Cole-o na função doPlugins. Isso buscará um parâmetro chamado cid no URL da página atual e o colocará na variável s.campaign.

Agora, chame a função getValOnce copiando o código a seguir e colando logo abaixo da chamada com getQueryParam:

s.campaign=s.getValOnce(s.campaign,'s_cmp',30);

Esse código garantirá que o mesmo valor não seja enviado mais de uma vez consecutiva por 30 dias (consulte a documentação para saber como personalizar esse código de acordo com suas necessidades).

Salve a janela do código

Clique em Salvar na biblioteca e na build

Abra o site de demonstração do Luma no navegador Chrome

Clique no ícone Depurador para abrir o Adobe Experience Cloud Debugger

Clique na guia Analytics

Expanda o conjunto de relatórios

Observe que a ocorrência do Analytics não tem uma variável do Campaign

Deixando o Debugger aberto, volte para o site Luma e adicione ?cid=1234 ao URL e, em seguida, pressione Enter para atualizar a página com a string de consulta incluída

Verifique o Debugger e confirme se há uma segunda solicitação do Analytics com uma variável do Campaign definida como 1234

Retorne e atualize a página Luma novamente com a string de consulta ainda no URL

Verifique a próxima ocorrência no Debugger, e a variável Campaign não deve estar presente, pois o plug-in getValOnce garantiu que ela não seja duplicada e pareça que outra pessoa veio do código de rastreamento da campanha.

BÔNUS: você pode testar isso repetidamente alterando o valor do parâmetro cid na string de consulta. A variável Campaign só deve estar lá se for a primeira vez que você estiver executando a página com o valor. Se você não estiver vendo o valor do Campaign no depurador, basta alterar o valor de cid na string de consulta do URL e pressionar Enter para vê-lo novamente no depurador.