Este guia rápido nasceu depois de receber várias perguntas de usuários iniciantes/intermediários do Google Tag Manager: quando devo usar dataLayer.push() e quando a declaração Data Layer (dataLayer = [{}])?
A razão pela qual essa questão foi levantada é que a documentação oficial do Google Tag Manager costumava ser um pouco enganosa em algumas partes. Continue lendo, e eu vou te mostrar onde.
dataLayer.push?
Então, o que é dataLayer.push em primeiro lugar? É um código que permite adicionar/atualizar dados armazenados na Camada de Dados, por exemplo:
<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ ‘evento’: ‘novo_assinante’, ‘formLocation’: ‘rodapé’ }); </script>
Mas o que isso significa? Bem, vamos fazer uma rápida atualização sobre o que é a Camada de Dados.
O que é Camada de Dados?
Data Layer é um dos principais conceitos do Google Tag Manager, que garante máxima flexibilidade, portabilidade e facilidade de implementação. Sem isso, o GTM não funcionaria. É o que mantém seu gerenciamento de tags funcionando corretamente. É a chave para desbloquear o potencial do Google Tag Manager.
Simplificando, uma Camada de Dados é como um balde que armazena certas informações. É um local central (camada virtual) de um site onde você, seus desenvolvedores ou ferramentas de terceiros podem armazenar temporariamente dados (sobre o usuário, conteúdo da página, etc.). A partir daí, o Google Tag Manager lê essas informações, as usa em tags/gatilhos/variáveis ou as envia para outras ferramentas, Google Analytics, Google Adwords, Facebook/Meta, o que você quiser.
Depois de colocar o Snippet JavaScript do contêiner do Google Tag Manager no código-fonte do seu site, a Camada de Dados é criada automaticamente. Você não precisa adicionar mais nada. No entanto, se você quiser mais dados personalizados, como ID de usuário, preço do produto, total do pedido, etc. (e usar isso no Google Tag Manager), configurações adicionais serão necessárias, e é aí que o dataLayer.push desempenha um papel importante.
Armazenar/atualizar dados na camada de dados
Há duas maneiras pelas quais os dados podem ser enviados para a camada de dados. Na verdade, há apenas um que você deveria estar usando, mas por uma questão de conhecimento, vou mencionar os dois:
- Adicionando um trecho de Data Layer acima do trecho de contêiner do Google Tag Manager ( dataLayer = [] ). Este método também é mencionado na documentação oficial da GTM. É chamado de declaração da Camada de Dados.
- Ou enviando dados com o método dataLayer.push.
Qual é a diferença, você pergunta?
Declaração da Camada de Dados (não recomendada)
Este método de inserção de dados na Camada de Dados pode ser usado se você quiser adicionar quaisquer dados logo quando a página é carregada, por exemplo, ID do usuário. Como resultado, você pode utilizar a variável de ID do usuário no gatilho Todas as Páginas.
Nesse caso, seus desenvolvedores devem adicionar um trecho da Camada de Dados acima (isso é importante!) Contêiner de rastreamento GTM com o ID de usuário real. Depois que essas informações forem adicionadas à Camada de Dados, você poderá começar a trabalhar com ela no Google Tag Manager. Aqui está um exemplo de código:
<script> dataLayer = [{ ‘ID do usuário’: ‘123456’ }]; </script> <!– Gerenciador de Tags do Google –> // é aqui que seu trecho de contêiner do Google Tag Manager deve ser colocado <!– Ence o Gerenciador de Tags do Google –>
Se um desenvolvedor colocar esse trecho abaixo do contêiner do Google Tag Manager, ele quebrará as coisas. Uma das consequências será o gatilho de todas as páginas. Além disso, o Google Tag Manager não poderá rastrear várias interações do site, como cliques, envios de formulários, etc.
Por quê? Porque usando a sintaxe dataLayer = [], você está redefinindo a variável dataLayer para uma nova Matriz (leia-se: você limpa o bucket), substituindo assim qualquer coisa que estivesse nele antes (como as personalizações do Google Tag Manager necessárias para que o rastreamento funcione). Como você substitui o dataLayer, ele não funciona mais corretamente com o Google Tag Manager, e o sintoma típico é que os gatilhos do GTM também não funcionam mais.
dataLayer.push (recomendado)
O segundo método de colocar dados na camada de dados é dataLayer.push, que é recomendado e deve ser sua única escolha. Independentemente de onde você o coloque (abaixo ou acima do contêiner do Google Tag Manager), o dataLayer.push funcionará corretamente. Aqui estão alguns exemplos:
- Você tem um formulário de inscrição no boletim informativo (que não pode ser facilmente rastreado com um ouvinte de formulário padrão do GTM), então você decidiu pedir a um desenvolvedor de site para disparar um evento Data Layer assim que um novo assinante inserir com sucesso seu e-mail em seu site:
<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({‘event’: ‘new_subscriber’}); </script>
Se desejar, você pode pedir ao seu desenvolvedor informações adicionais (por exemplo, localização do formulário (porque você pode ter mais de um formulário na mesma página)).
<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ ‘formLocation’: ‘rodapé’, ‘evento’: ‘new_subscriber’ }); </script>
- Quando um visitante adiciona um produto ao seu carrinho, um evento Data Layer (contendo as informações do produto) pode ser acionado.
Mais uma coisa. Suponha que você compare trechos de código nesta postagem do blog com aqueles explicados na documentação oficial do Google Tag Manager para desenvolvedores. Nesse caso, você notará que meus exemplos de código também têm o prefixo “janela” (em vez de dataLayer.push, eu uso window.dataLayer.push). Depois de usar o Google Tag Manager por um tempo e ver outros profissionais conversando, notei que eles recomendam mais uma coisa (como regra geral): adicionar uma janela de prefixo ao dataLayer.push.Como resultado, o trecho de código final dataLayer.push pode ser assim:
<script> window.dataLayer.push({ ‘formLocation’: ‘rodapé’, ‘evento’: ‘new_subscriber’ }); </script>
A propósito, o nome dataLayer diferencia maiúsculas de minúsculas. Isso significa que apenas a letra L deve ser maiúscula:
- DataLayer.push não funcionará (porque D é maiúsculo)
- datalayer.push também não funcionará (todas as letras são minúsculas, embora L devesse ter sido maiúscula).
Mais exemplos de dataLayer.push
Exemplos de dataLayer.push mencionados anteriormente são bastante básicos, mas se você precisar, também pode enviar dados como objetos ou matrizes, por exemplo:
<script> window.dataLayer = window.dataLayer || []; dataLayer.push({ ‘transactionProducts’: [{ ‘sku’: ‘DD44’, ‘nome’: ‘T-Shirt’, ‘categoria’: ‘Pauto’, ‘preço’: 11,99, ‘quantidade’: 1 },{ ‘sku’: ‘AA1243544’, ‘nome’: ‘Meias’, ‘categoria’: ‘Pauto’, ‘preço’: 9,99, ‘quantidade’: 2 }] }); </script>
O que aconteceu aqui é que, com onedataLayer.push, também empurramos uma matriz (transactionsProducts) contendo dois objetos. Cada objeto contém o mesmo conjunto de chaves (sku, nome, categoria, preço, quantidade), mas seus valores diferem. E isso é lógico porque dois produtos diferentes geralmente terão características diferentes.
Os pushs de camada de dados de comércio eletrônico aprimorado (Universal Analytics) também usam estruturas de dados um pouco mais difíceis:
<script> window.dataLayer.push({ ‘comércio eletrônico’: { ‘promoView’: { ‘promoções’: [ { ‘id’: ‘JUNE_PROMO13’, // ID ou Nome é obrigatório. ‘nome’: ‘June Sale’, ‘criativo’: ‘banner1’, ‘posição’: ‘slot1’ }, { ‘id’: ‘FREE_SHIP13’, ‘nome’: ‘Promoção de Frete Grátis’, ‘criativo’: ‘skyscraper1’, ‘posição’: ‘slot2’ }] } } }); </script>
Com este dataLayer.push, adicionamos um objeto de comércio eletrônico que contém o objeto promoView, que contém uma matriz de promoções que contém dois objetos de duas promoções exibidas em uma página. Cada promoção tem quatro chaves, ID, nome, criativo e posição.
OK, e agora?
Depois que os dados/eventos são enviados para a Camada de Dados, é hora de começar a trabalhar com eles:
- Você quer usar um evento Data Layer como gatilho? Faça isso com o Gatilho de Evento Personalizado.
- Você deseja acessar alguns dados (por exemplo, ID de usuário) e inseri-los na tag Universal Analytics? Crie uma Variável de Camada de Dados para cada ponto de dados que você deseja acessar a partir da Camada de Dados.
dataLayer.push: Palavras Finais
DataLayer.push é uma maneira de você/desenvolvedores/3rd-party-plugins passar alguns dados úteis para a Camada de Dados. A partir daí, você pode “brincar com ele” no Google Tag Manager e usá-lo no seu gerenciamento de tags.
dataLayer.push deve ser a única maneira de adicionar dados. Mesmo que a documentação oficial do Google Tag Manager ainda mencione/recomende o uso de uma declaração regular de Camada de Dados (dataLayer = [{}]), você não deve cair nessa. Lembre-se, sempre empurre para o dataLayer.
Texto traduzido: GTM Guide: dataLayer.push with examples – Analytics Mania
Também siga o Mundo do Traqueamento em outras redes sociais:
Inscreva-se no https://www.youtube.com/channel/UC6mX6bbcEmQoaznI0D7Aw5Q
Siga e curta no https://www.instagram.com/mundodotraqueamento/
Siga e comente no https://twitter.com/traqueamento
Siga também no https://www.linkedin.com/company/mundo-do-traqueamento
