Data Layer - Guia Rápido com exemplos de dataLayer.push
dataLayer.push
Muitas pessoas me perguntam:
quando devo usar dataLayer.push() e quando usar a declaração do dataLayer (dataLayer = [{}] )?
O motivo que leva a esta dúvida é que a documentação do Google Tag Manager não é muito clara em certas partes.
Índice:
O que é dataLayer.push?
É um código que permite adicionar / atualizar dados armazenados na Camada de Dados, por exemplo:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push ({
'event': 'Lead',
'formLocation': 'Blog'
});
</script>Mas o que isso significa? Bem, vamos relembrar rapidamente o que é a camada de dados.
Se, depois de ler esta postagem, o tópico ainda parecer confuso, considere se inscrever no meu curso GTM - Básico, onde você vai ter mais detalhes sobre o Data Layer e o Google Tag Manager.
O que é Data Layer?
O Data Layer é um dos principais conceitos do Google Tag Manager e que garante o máximo de flexibilidade, portabilidade e facilidade de implementação.
Sem ele, o GTM não funcionaria. O Data Layer é o que mantém o gerenciamento de tags funcionando corretamente. E funciona como sendo a chave que ativa todo o potencial do Gerenciador de Tags do Google.
O Data Layer também é conhecido como Camada de Dados.
Resumindo, a camada de dados é como uma pasta que você guarda certas informações.
É um local central (camada virtual) de um site onde você, seus desenvolvedores ou ferramentas de terceiros podem armazenar dados/informações temporariamente (sobre o usuário, conteúdo da página, informações de um produto, ações, etc.).
O Google Tag Manager lê as informações, usa-as em tags, acionadores e variáveis ou as envia para outras ferramentas, como Google Analytics, Google Ads, Facebook, etc, podendo inclusive adicionar mais informações se necessário.
Depois de colocar o snippet de JavaScript do contêiner do Tag Manager no código-fonte do seu site, a camada de dados é criada automaticamente. Você não precisa adicionar mais nada.
Snippet é um trecho de código que precisamos adicionar para que o Google Tag Manager funcione em nosso site.
No entanto, se você quiser informações mais personalizadas como ID do usuário, preço do produto, total do pedido, etc. (e usá-las no Google Tag Manager), serão necessárias configurações adicionais.
E é para enviar estas informações personalizadas adicionais que serve o dataLayer.push.
Armazenar e Atualizar informações na Camada de Dados (Data Layer)
Existem duas maneiras de como os dados podem ser enviados para o Data Layer.
Mas você deve utilizar apenas uma, porém falarei sobre as duas para você conhecer:
Adicionando o snippet da camada de dados acima do snippet de contêiner do Google Tag Manager ( dataLayer = [] ). Este método também é mencionado na documentação oficial do GTM.
Enviando dados com o método dataLayer.push.
Você deve estar se perguntando qual a diferença entre eles, certo?
Declaração da Camada de Dados / Data Layer declaration (não recomendado)
Este método de inserção de informações na camada de dados pode ser usado se você quiser adicionar quaisquer dados logo quando a página for carregada, por exemplo o ID do usuário.
Como resultado, você pode utilizar a variável de ID do usuário no acionador All Pages (todas as páginas).
Nesse caso, seus desenvolvedores devem adicionar um snippet de camada de dados acima (isso é importante!) do snippet do Contêiner do GTM com o ID de usuário.
Depois que essas informações forem adicionadas à camada de dados, você pode começar a trabalhar com elas no Gerenciador de Tags do Google.
Segue um exemplo de código:
<script>
dataLayer = [{
'userID': 'AB124'
}];
</script>
<!-- Google Tag Manager -->
// aqui é onde você deve incluir o código de instalação do GTM
<!-- End Google Tag Manager -->Embora esse método seja mencionado na documentação oficial do Gerenciador de Tags do Google, você não deve usá-lo. Mas, por quê?
Se você ou um desenvolvedor colocar este snippet abaixo da instalação do Google Tag Manager, ele vai 'quebrar' várias coisas, por exemplo: o acionador padrão All Pages deixará de funcionar. Além disso, o Gerenciador de Tags do Google não será capaz de rastrear várias interações do site, como cliques, envios de formulários, etc.
A própria documentação do Google é bem inconsistente sobre a utilização desse tipo de Data Layer.
Por exemplo, na documentação de comércio eletrônico padrão (para GTM), eles dizem outra maneira de enviar os dados para camada de dados: dataLayer.push (explico um pouco mais abaixo).
Vários especialista em Google Tag Manager recomendam, assim como eu, a utilização apenas do dataLayer.push.
O por quê? Porque ao usar a sintaxe dataLayer = [], você está redefinindo a variável dataLayer para um novo Array (entenda da seguinte forma: você apaga tudo que tem no dataLayer para incluir novas informações), substituindo assim tudo o que estava nele antes (como as personalizações do Gerenciador de Tags do Google necessárias para que o rastreamento funcione).
Como você sobrescreve o dataLayer, ele não funcionará corretamente com o Google Tag Manager, e um sintoma típico é que os acionadores do GTM também não funcionam mais.
dataLayer.push (recomendado)
O segundo método de como enviar informações para o Data Layer é através do dataLayer.push, que é totalmente recomendado e deve ser sua única opção.
Independentemente de onde você o colocar (abaixo ou acima da instalação do Google Tag Manager), o dataLayer.push funcionará corretamente.
Segue alguns exemplos:
Você tem um formulário de inscrição de Newsletter que não pode ser facilmente rastreado com um listener de formulário padrão do GTM, então decidiu pedir a um desenvolvedor de site para disparar um evento na camada de dados 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 você quiser, pode inclusive pedir para ser adicionada informações adicionais para identificar em qual formulário o usuário fez seu cadastro:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'new_subscriber',
'formLocation': 'Blog'
});
</script>Quando um visitante adiciona um produto ao carrinho, um evento da camada de dados (contendo as informações do produto) pode ser disparado.
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'AddToCart',
'product': {
'sku': 'AA1243544',
'name': 'Meias',
'category': 'Vestuário',
'price': 9,99,
'quantity': 2
}
});
</script>Se você comparar o snippet de código que coloco aqui com os exemplificados na documentação oficial do Google Tag Manager para desenvolvedores, vai ver que meus exemplos possuem o prefixo “window” (em vez de dataLayer.push, eu utilizo window .dataLayer.push ).
Depois de usar o GTM por um tempo e conversar com outros profissionais, é recomendável que se utilize o prefixo window quando enviar o dataLayer.push.
Vale lembrar que você precisa escrever dataLayer exatamente assim.
Somente a letra L deve ser maiúscula:
DataLayer.push não funcionará (porque a letra D é maiúscula);
datalayer.push também não funcionará (todas as letras são minúsculas, embora o L devesse ser maiúsculo).
Já conhece os cursos que preparei pra você?
Dominando o Google Tag Manager: Um curso que vai te ajudar a dominar essa ferramenta incrível!
Google Tag Manager - Básico: Pra você que não precisa de nada muito avançado do GTM mas quer suas Tags, Pixels e eventos funcionando da forma correta.
Exemplos de dataLayer.push
Os exemplos de dataLayer.push mencionados anteriormente são bem básicos, mas se você precisar, também pode enviar dados como objetos ou matrizes. Um bom exemplo seria um código de transação de comércio eletrônico padrão :
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'transactionProducts': [{
'sku': 'DD44',
'name': 'Camiseta',
'category': 'Vestuário',
'price': 11,99,
'quantity': 1
}, {
'sku': 'AA1243544',
'name': 'Meias',
'category': 'Vestuário',
'price': 9,99,
'quantity': 2
}]
});
</script>Aqui enviamos um array (transactionsProducts) contendo dois objetos.
Cada objeto contém o mesmo conjunto de chaves (sku, name, category, price, quantity), mas seus valores são diferentes. E isso é lógico porque são dois produtos diferentes que possuem características diferentes.
Os dataLayer.push de comércio eletrônico avançado também usam estruturas de dados, porém um pouco mais difíceis:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'ecommerce': {
'promoView': {
'promotions': [
{
'id': 'PROMOCAO_BLACK_FRIDAY_2021', // ID or Name is required.
'name': 'Black Friday',
'creative': 'banner3',
'position': 'rodape'
},
{
'id': 'DESCONTO_40',
'name': '40% de Desconto',
'creative': 'skyscraper1',
'position': 'coluna_direita'
}]
}
}
});
</script>Com este dataLayer.push, adicionamos um objeto de comércio eletrônico avançado que contém o objeto promoView que contém a matriz de promoções que contém dois objetos de duas promoções exibidas em uma página.
Cada promoção tem 4 chaves, id, name, creative, position.
Considerações Finais
dataLayer.push é uma maneira de você, desenvolvedores ou plug-ins de terceiros passar alguns dados úteis para a camada de dados, os quais você pode utilizar no Gerenciador de Tags do Google em Tags, Acionadores e Variáveis.
dataLayer.push deve ser a única maneira pela qual você deve enviar dados. Embora a documentação oficial do Gerenciador de Tags do Google ainda mencione o uso de uma declaração regular da camada de dados ( dataLayer = [{}] ), você não deve utilizar.
Depois que os dados / eventos são enviados para a camada de dados, é hora de começar a trabalhar com eles:
Você deseja usar um evento da camada de dados como um acionador? Crie um acionador de evento personalizado .
Deseja acessar alguns dados (por exemplo, ID do usuário) e enviá-los para o Universal Analytics? Crie uma variável da camada de dados para cada dado que deseja acessar da camada de dados.
Até o próximo post.
Sobre o autor:
Me chamo Daniel Constant, trabalho com TI e Produtos Digitais há mais de 14 anos e vou te ensinar sobre o Google Tag Manager.
Já conhece os cursos de GTM que preparei pra você?
Dominando o Google Tag Manager: Um curso que vai te ajudar a dominar essa ferramenta incrível!
Google Tag Manager - Básico: Pra você que não precisa de nada muito avançado do GTM mas quer suas Tags, Pixels e eventos funcionando da forma correta.
.jpg)
