Uliana Lesiv
AuthorO Google Tag Manager (GTM) é uma ótima ferramenta para elevar a análise e o rastreamento de sites. E o data layer é um dos recursos que ajuda a levar o rastreamento para o próximo nível.
Uma camada de dados é um objeto JavaScript que coleta detalhes sobre as interações do usuário em seu site. Com sua ajuda, você pode coletar praticamente qualquer dado, desde visualizações do produto até o sistema operacional do usuário. A utilização de data layers no GTM permite configurar tags e gatilhos de rastreamento mais direcionados, fornecendo insights mais ricos sobre o comportamento do usuário.
Por isso, criamos um guia completo sobre a camada de dados que cobrirá muitos aspectos de sua implementação e uso no Google Tag Manager. Explicaremos o que é um data layer, seus casos de uso, implementação do data layer no site, como criar um data layer no Tag Manager, como testar a configuração, além de identificar os erros comuns de configuração.
Vamos começar!
O data layer é um objeto JavaScript usado para passar dados para tags. Ele permite transferir eventos ou variáveis e definir gatilhos com base em valores de variáveis específicas. O data layer é usado no Google Tag Manager na gtag.js.
O data layer é um intermediário entre o seu site e o Google Tag Manager, funcionando como um hub para armazenar dados estruturados para o seu contêiner.
Você precisa criar um data layer se você quiser:
Você não encontrará esse problema com data layer, pois o contêiner GTM extrai dados do data layer da página, que é muito mais estável que o HTML DOM. Os dados param de serem gravados somente se alguém quebrar o data layer da página.
Você pode especificar exatamente quais dados deseja armazenar nesta camada. Existem dois métodos para criar o data layer e preenchê-la com os parâmetros necessários para rastrear, que revisaremos na próxima seção.
O GTM lê e pega os valores necessários do data layer dados e os envia para ferramentas analíticas como Google Analytics, Google Ads, Facebook Pixel, etc.
No Google Tag Manager, o dataLayer é um array, conforme indicado por "[]", e contém um objeto, representado por "{}" conforme mostrado no script abaixo:
dataLayer = [{}];Os elementos dentro de um data layer são chamados de variáveis e são formatados como pares ‘key’: ‘value’ (colocados em "{}").
GTM usa uma variável de data layer chamada “evento”, que também é usada por ouvintes de eventos JavaScript para acionar tags quando um usuário interage com elementos em um site. Portanto, com base no exemplo abaixo, o ‘evento’ é ‘key’ e ‘register’ é ‘value’.
dataLayer = [{'event' : 'register' }];Para variáveis, a sintaxe é a mesma dos eventos. No exemplo abaixo, pegamos o país desejado para rastreamento - 'país' ('variable_name') é 'key' e 'estados unidos' é 'value' (‘variable_value’).
dataLayer = [{'country' : 'united states' }];Existem dois métodos para implementação de um data layer: declaração e push de um data layer. Descreveremos como usar os dois métodos, mas você pode pular diretamente para aquele que melhor lhe convier.
Resumindo, recomendamos o uso de dataLayer.push porque é mais popular e cobre a maioria das necessidades. Além disso, esse método é mais seguro de usar, pois não interrompe eventos no Google Tag Manager, enquanto a configuração inadequada de declarações do data layer pode facilmente causar problemas.
| Declaração de Data Layer | dataLayer.push | |
| Funciona melhor para | Valores necessários antes do carregamento da página | Enviar informações para o dataLayer para eventos diferentes do evento de carregamento de página |
| Tempo de push da variável do data layer | Antes do tempo de execução | Durante o tempo de execução |
| Inserção no código | Acima do snippet de contêiner do Google Tag Manager | Qualquer lugar no código |
| Declaração de salto para o data layer | Vá para dalaLayer.push |
Para usar esse método, o snippet do data layer deve ser colocado acima do snippet de contêiner do Google Tag Manager. Nesse caso, o data layer é inicializado antes do Tag Manager ser inicializado.
No geral, esta não é uma forma popular ou recomendada de criar um data layer, mas funcionará se você quiser criar pontos de dados antes do carregamento do contêiner GTM e usar esses pontos de dados para gerenciamento de tags.
Alterou 'variable_name': 'variable_value' para os parâmetros necessários e colou o código na página do site antes do snippet GTM.
dataLayer = [{
'variable_name': 'variable_value'
}];
...
Observação: Use o operador "=" para atribuir os valores do objeto ao array dataLayer.
O método push adiciona elementos de objeto ao data layer. Ao contrário do método de declaração de data layer, com dados push, você pode colocar o snippet do data layer em qualquer lugar do código.
Pode ser um pouco confuso, mas 'dataLayer' também é uma variável JavaScript que pode ser acessada por qualquer função interagindo com o objeto window. Portanto, para evitar conflitos com qualquer outro array JavaScript local denominado 'dataLayer', a melhor maneira é usar o prefixo 'window.dataLayer'.
Portanto, você precisará usar o código abaixo para o método dataLayer.push. Em vez de 'variable_name': 'variable_value', adicione os parâmetros necessários.
window.datalayer = window.dataLayer || [];
window.dataLayer.push({
'variable_name' : 'variable_value'
});No bloco de código acima, o dataLayer é definido como um dataLayer existente, se já existir; caso contrário, um novo dataLayer será criado como um array vazio. O operador || (OU) garante que a atribuição acontecerá se qualquer uma dessas condições for atendida.
Dessa forma, você evitará a criação de múltiplas declarações, que podem sobrescrever dataLayer.
Para muitos CMS de comércio eletrónico existem plugins (incluindo plugins da Stape) que podem criar uma camada de dados para eventos de comércio eletrónico padrão. Nalguns casos, isto pode não ser suficiente. Por exemplo, se precisar de eventos adicionais ou de dados adicionais nos eventos da camada de dados. Ou se estiver a utilizar uma plataforma totalmente personalizada.
Neste caso, é necessário contactar os seus programadores para criar eventos da camada de dados com o payload de que necessita. Esta é normalmente uma tarefa bastante simples para os programadores e não demora muito tempo, embora dependa da arquitetura do seu site ou plataforma.
Algumas diretrizes úteis:
Você pode acessar os elementos de sua matriz de data layer no Google Tag Manager de maneira diferente. Para aproveitar os dados do Google Tag Manager, atribua-os a uma variável ou use-os como um acionador de eventos. Essas variáveis ou eventos podem então ser incorporados em suas tags, gatilhos ou outras variáveis.
Abaixo, fornecemos três casos de uso de data layer e sua configuração no GTM:
Como exemplo, tomamos o valor de compra de camisetas laranja.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘product_name’ : ‘orange t-shirt’,
'purchase_value' : '5',
‘purchase_currency’ : ‘EUR’
});
2. Escolha "Data Layer Variable" como o tipo de variável.
3. Adicione o nome da variável do data layer e clique em “Save”.
Por favor, observe: o campo diferencia maiúsculas de minúsculas, portanto, certifique-se de que o nome corresponda ao nome do valor no código que você adicionou à página. No nosso caso, é “purchase_value”.
Como exemplo de código, tomamos a variável dataLayer que aciona o evento “register” quando uma pessoa preenche os dados necessários para o registro e clica em “register”.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'register'
});1. Vá para os acionadores do Google Tag Manager → clique em "New".
2. Escolha o tipo de gatilho "Custom Event".
3. Em “Event name”, adicione o nome da mesma forma que o nome do valor no código, pois este campo diferencia maiúsculas de minúsculas. Clique em "Save".
O exemplo da variável de data layer abaixo aciona eventos de compra e cria informações de compra.
dataLayer = [{
'event': 'purchase',
'purchase_info': {
'purchase_amount': 5,
'purchase_curency': 'EUR'
}
}];Você pode usar variáveis do código como variáveis e acionadores de eventos no Google Tag Manager. Verifique o processo de configuração das etapas anteriores para variáveis e eventos.
O data layer não existe no Google Tag Manager do lado do servidor, como acontece no GTM do lado do cliente.
Entretanto, o sGTM possui um objeto chamado Cliente que verifica as solicitações HTTP do web GTM. Se a solicitação contiver dados específicos, o Cliente transforma os dados da solicitação em dados do evento. As tags também são usadas para enviar os dados do contêiner web GTM para o servidor GTM.
Para preencher os pontos de dados do contêiner do servidor GTM, você precisa escolher o método que usará para enviar dados da web para o servidor GTM; entre os populares estão:
Esse método é particularmente eficaz se você estiver configurando o rastreamento do lado do servidor para Google Ads ou Floodlight, já que ambos dependem exclusivamente de tags GA4.
1. No web GTM crie uma tag com configuração "Google Analytics: GA4 Event".
2. Você encontrará campos predefinidos para esses dados e poderá atribuir variáveis do data layer a cada parâmetro individualmente.
A principal vantagem de usar Data Tag/Data Client é que ele envia automaticamente o data layer e outros dados comuns da web para o servidor GTM.
1. Crie uma nova tag no contêiner GTM web e escolha "Data Tag" como configuração da tag.
Por favor, observe: Você precisa adicionar a Data Tag à galeria GTM
2. Na configuração das tags, habilite as duas caixas de seleção “Send common data” e “Enviar todos do DataLayer”.
O sistema analisará automaticamente os dados no GTM web e encaminhará todas as informações disponíveis para o servidor GTM.
| Confira nosso post no blog sobre como criar um data layer para o Google Tag Manager do lado do servidor para saber mais sobre o processo de configuração. |
Observe: Abaixo, descrevemos como configurar a tag do Google Tag para enviar dados; se você já configurou a tag do Google, não há necessidade de criar uma nova tag. Basta pular as etapas abaixo e ir diretamente para a seção sobre como criar uma dimensão personalizada.
Neste caso, você só precisa adicionar parâmetros como no código do data layer na seção "Shared event settings".
1. Na seção “Tags” do GTM, clique em “New” e escolha “Google Tag” como tipo de tag.
2. Adicione seu ID de medição do GA4 e, na seção "Shared Event Settings", liste os parâmetros que você adicionou ao seu código.
3. Como gatilho escolha "Page View – All Pages".
Existe uma lista de parâmetros padrão. Se os dados que você deseja rastrear com a ajuda do data layer não estiverem presentes nos eventos recomendados do Google Analytics, você precisará adicioná-los manualmente em sua conta GA4 como dimensões personalizadas. Depois de adicioná-lo, ele aparecerá nos relatórios do GA4.
1. Na conta do Google Analytics, clique em “Admin” → “Custom definitions”.
2. Clique em "Criar uma dimensão personalizada" e preencha o parâmetro obrigatório.
Clique em "Save".
Para verificar se o Google Tag Manager captura a variável, você precisa seguir algumas etapas simples, semelhantes à depuração regular no GTM.
1. Clique em "Preview" e adicione o URL do site que você está depurando.
2. Mude para a aba "Variable" e se tudo funcionar, você verá os dados necessários nesta aba.
Se você tiver problemas com o Modo de Depuração no GTM, verifique nossos guias:
Para verificar se o Google Analytics captura os dados, vá em “Admin” → DebugView.
Se você perceber que variáveis ou eventos falham no push, provavelmente você não está usando letras maiúsculas e minúsculas adequadas para nomes de objetos ou aspas perdidas.
Bom exemplo:
dataLayer.push({'variable_name': 'variable_value'});Mau exemplo:
datalayer.push({'variable_name': 'variable_value'});Bom exemplo:
dataLayer.push({'variable_name': 'variable_value'});Mau exemplo:
dataLayer.push({variable_name': 'variable_value'});Se você não conseguir disparar tags em todos os locais necessários no site, verifique os nomes das variáveis em diferentes páginas.
O erro mais frequente é a inconsistência de letras maiúsculas e minúsculas nos nomes das variáveis em páginas diferentes, portanto, é necessário revisar os nomes.
Bom exemplo:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable_name': 'variable_value'});Mau exemplo:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable Name': 'variable_value'});O data layer do Google Tag Manager (GTM) é um componente crucial do GTM. Ele nos permite capturar as interações dos usuários com o seu site, ao mesmo tempo que fornece dados adicionais sobre a interação ou seu contexto. O data layer é essencial se você deseja criar uma estrutura de dados melhor.
O conceito de data layer é bastante desafiador de implementar e provavelmente serão necessários desenvolvedores para construir uma infraestrutura de rastreamento complexa.
Aqui está uma rápida recapitulação:
Stape tem muitas soluções! Clique em Experimentar gratuitamente para se registar e verificar todas elas.
Uliana é Gerente de Conteúdo na Stape, especializada em análises e configurações de integração. Ela simplifica conceitos complexos de rastreamento em insights claros.
Comentários