Gerenciador de tags do Google - a camada de dados

Uma camada de dados pode ser vista como um objeto contendo todas as informações para passar e processar com o Gerenciador de tags do Google. Este é um conceito um pouco técnico. O termo camada de dados é usado para denotar a estrutura de dados usada pelo Gerenciador de tags do Google para armazenar, processar e passar dados entre seu site / blog e o gerenciador de tags.

Para elaborá-lo ainda mais, uma camada de dados pode alimentar os dados em sua ferramenta de análise sobre o seu visitante. Tomando outra perspectiva para a definição, a camada de dados é, na verdade, uma lista de requisitos e objetivos de negócios para cada subconjunto do contexto digital.

Vamos dar um exemplo de site de comércio eletrônico, os requisitos de negócios podem incluir -

  • Informações transacionais, tendo os detalhes sobre o que foi comprado

  • Dados do visitante, sobre quem comprou

  • Outros detalhes sobre a compra, como onde a compra foi feita e a que horas

  • Por último, as informações sobre outros fatores, como se o visitante se inscreveu nas atualizações por e-mail ou não

Então, em poucas palavras, a camada de dados carrega informações que podem ser usadas por diferentes ferramentas / usuários / partes interessadas, conforme necessário.

No Gerenciador de tags do Google, dataLayer é uma matriz JavaScript. Consiste em pares de valores-chave. A seguir está um exemplo rápido de dataLayer com diferentes tipos de dados -

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

Aqui, temos diferentes valores, como um array de objetos (os produtos), valores numéricos (o preço), um array de strings (lojas), um objeto de data e um objeto (nome).

Por outro lado, quando você coloca o código de contêiner do Gerenciador de tags do Google em seu site, a camada de dados é criada automaticamente.

Em si mesma, a camada de dados é um conceito bastante complexo de entender à primeira vista. Este capítulo fornecerá mais informações sobre como interagir com a camada de dados.

Eventos de camada de dados

Um exemplo rápido de evento de camada de dados pode ser um formulário de inscrição em boletim informativo, que não pode ser facilmente rastreado com ouvintes automáticos de GTM. Um desenvolvedor de site pode ajudá-lo a enviar um evento de camada de dados assim que um novo assinante inserir seu e-mail em seu site. O código deste evento deve ser semelhante a este -

push({‘event’: ‘new_subscriber’});

Se necessário, você pode pedir ao desenvolvedor mais algumas informações, como o local do formulário. Isso é necessário se houver mais de um formulário em seu site. Isso pode ser alcançado usando o código a seguir.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

Além disso, o Gerenciador de tags do Google envia um determinado conjunto de valores para a camada de dados de aplicativos da web por padrão. Esses valores são -

  • gtm.js - Enviado para a camada de dados assim que o Gerenciador de tags do Google estiver pronto para ser executado

  • gtm.dom - Enviado para a camada de dados quando o DOM está pronto

  • gtm.load - Enviado para a camada de dados quando a janela está totalmente carregada

Inspecionando a camada de dados

Como já sabemos, existem certos eventos que são criados como resultado de qualquer interação na tela.

Por exemplo, vamos considerar este evento simples de carregamento de página. Para ver os eventos, você precisa ter o depurador em execução. Depois de ter o depurador em execução (no modo de visualização), visite o blog. Se você olhar para a janela de resumo no canto esquerdo inferior, isso é o que você verá -

Step 1 - Clique em Window Loaded e depois em Data Layer.

As informações mostradas na guia Camada de dados são sobre o evento Window Loaded.

É mostrado como - {event: 'gtm.load', gtm.uniqueEventId: 3}

Além disso, se quiser dar uma olhada mais de perto, você precisa obter suporte da guia do console do Chrome. Inspecionar uma camada de dados torna-se fácil quando você sabe como usar o depurador do Chrome da maneira correta.

Step 2- Quando você estiver em seu blog, clique com o botão direito em qualquer parte da página. No menu de contexto exibido, clique em Inspecionar. O painel será exibido no lado direito da tela, com a guia Elementos ativada.

Step 3- Clique em Console. Quando no modo de console, clique no ícone do canto superior esquerdo para limpar todas as mensagens mostradas. Veja a imagem a seguir para referência.

Step 4- Assim que a janela for limpa para todas as mensagens anteriores, digite dataLayer, certifique-se de que a capitalização para L seja feita. Este nome é fornecido pelo Gerenciador de tags do Google para sua camada de dados. No entanto, seus desenvolvedores podem atribuir a ele um nome diferente conforme e quando necessário.

Step 5- Pressione Enter após dataLayer. Ele mostrará os seguintes detalhes.

Existem três objetos e cada objeto contém algumas informações. Agora, esses objetos podem não ser os mesmos para você, como são mostrados na imagem acima. O dataLayer é configurável e está sob o controle do desenvolvedor configurá-lo de acordo com os requisitos.

Os valores presentes são devidos ao gadget do Blogger que está em uso nessa posição / espaço específico. Esta é a razão pela qual existem certas informações lá.

Se você olhar para o objeto 1, notará que o evento que é disparado é - gtm.dom . Ele é disparado pelo GTM ao carregar a página.

Dessa forma, você pode inspecionar a camada de dados e adicionar informações a ela como e quando necessário.

Variáveis ​​na camada de dados

Agora que estamos familiarizados com a camada de dados, vamos tentar ler uma das variáveis ​​usando a interface do Gerenciador de tags do Google.

Aqui, vamos tentar ler o evento usando uma variável da camada de dados.

Se virmos a figura acima, o evento variável contém o gtm.dom . Vamos criar uma variável a partir da interface GTM e ver como ela se reflete na guia Variáveis ​​no Gerenciador de tags do Google.

Step 1- Na interface do Gerenciador de tags do Google, vá para Variáveis. Role para baixo até as variáveis ​​definidas pelo usuário. Clique em NOVO.

Step 2 - Dê um nome a essa nova variável, vamos chamá-la de varEvent.

Step 3 - Clique em Escolha um tipo de variável para iniciar a configuração ...

Step 4 - Selecione Variável da camada de dados na lista.

Step 5 - Ao selecionar Variável da camada de dados, será necessário fornecer o nome e a versão.

Este nome virá da camada de dados real do Gerenciador de tags do Google. Conforme mencionado anteriormente, a variável que rastrearemos é - evento.

Step 6 - Insira o evento em Nome da variável da camada de dados.

Step 7 - Clique em SALVAR.

Step 8 - Clique em Visualizar para ver as alterações refletidas no depurador.

Step 9- Depois que a página for carregada, clique em Janela carregada e em Variáveis. Role até o final da seção Variáveis, você verá varEvent, como destacado na captura de tela acima.

Como visto na imagem acima, o valor será gtm.load.

Desta forma, pode-se inspecionar a camada de dados e capturar os valores na camada de dados conforme necessário.