jan 5 2023
Tutorial completo da camada de dados do Gerenciador de tags do Google

Data Layer é um dos principais conceitos do Google Tag Manager, que garante o máximo de flexibilidade, portabilidade e facilidade de implementação. Sem ele, não haveria variáveis ​​ou gatilhos no GTM, nenhuma tag seria disparada. Ele mantém o gerenciamento de tags funcionando corretamente e é a chave para desbloquear o potencial do Gerenciador de tags do Google.

Já publiquei vários artigos neste blog relacionados a este tema , mas estão dispersos. É por isso que decidi reunir todos os recursos, dicas e conhecimentos importantes (que acumulei até agora) e colocá-los em um só lugar.

Curso de Google Tag Manager – GTM

Este é um tutorial estendido da camada de dados do Gerenciador de tags do Google que explica:

  1. O que é a Camada de Dados?
  2. Por que é útil?
  3. Como usá-lo?
  4. Melhores práticas ao lidar com a camada de dados.

Duas opções adicionais para aprender a camada de dados

Este artigo de blog é uma compilação de todos os recursos necessários para começar. Mas há muito o que você pode ler e implementar. 

No curso para iniciantes, temos uma visão geral sólida do que é Data Layer em geral, por que é importante e como trabalhar com ela. Também permito que você interaja diretamente com a camada de dados e ganhe mais experiência dessa maneira.

No curso intermediário, mergulhamos muito mais fundo em tópicos que estão fora do escopo desta postagem do blog. Compreender todo o potencial (e tecnicalidades) da camada de dados é a chave para implementações de rastreamento bem-sucedidas.

Folha de referência da camada de dados

Assine nossa newsletter e receba a lista de

10 coisas que você deve saber sobre a camada de dadosSE INSCREVER

Cancele a assinatura a qualquer momento

#1. O que é camada de dados?

Tecnicamente falando, uma camada de dados é um array JavaScript que armazena certas informações. Se isso não soar familiar, aqui está uma explicação mais simples.

É uma camada invisível/virtual do site onde você, seus desenvolvedores ou várias ferramentas podem armazenar dados (sobre o usuário, conteúdo da página, etc.). A partir daí, o Gerenciador de tags do Google lê essas informações, usa-as em tags/gatilhos/variáveis ​​ou as envia para ferramentas como Google Analytics, Google Ads, Facebook Pixel, etc.

A camada de dados é criada automaticamente assim que você coloca o snippet de JavaScript do contêiner do Gerenciador de tags do Google no código-fonte de seu website . Você não precisa adicionar mais nada, a menos que queira preenchê-lo com dados adicionais.

Essas informações adicionais na camada de dados do Gerenciador de tags do Google podem ser passadas colocando um snippet de camada de dados adicional acima do snippet GTM ou usando o método dataLayer.push (que é o melhor método, na minha opinião).

Continue lendo este tutorial da camada de dados do Gerenciador de tags do Google para descobrir por que dataLayer.push deve ser sua única opção para adicionar os dados à camada de dados.

#2. Armazenando dados na camada de dados (dataLayer.push)

Há duas maneiras de enviar dados para a camada de dados. Na verdade, existe apenas um que você deve usar, mas para fins de conhecimento, vou mencionar os dois:

  1. Adicionando um snippet de camada de dados acima do snippet de contêiner do GTM (esse método é chamado de declaração de camada de dados).
  2. Ou enviando dados com o método dataLayer.push.

Qual é a diferença, você pergunta?

O primeiro método é útil se você quiser enviar dados personalizados logo que a página for carregada, por exemplo, dados do produto quando a página do produto for carregada. Você pode querer enviar os dados do produto da camada de dados para o meta pixel (com o evento View Content).

Nesse caso, seus desenvolvedores devem adicionar um snippet de camada de dados acima do contêiner de rastreamento do Gerenciador de tags do Google com parâmetros como ID do produto, título do produto etc. Veja um exemplo:

<script>
 camadadados = [{
 'ID do produto': '123456',
 'productTitle': 'Produto incrível',
 'preço do produto': '13,00'
 }];
</script>
<!-- Gerenciador de tags do Google --> 
... 
<!-- Fim do Gerenciador de tags do Google -->

Posteriormente, com a ajuda da variável Data Layer , você pode ler essa informação e transferi-la para o Meta Pixel.

O segundo método (o que eu recomendo) ( dataLayer.push ) permite enviar dados adicionais quando certos eventos ocorrem em seu site. Aqui estão alguns exemplos:

Digamos que você tenha um formulário de inscrição em um boletim informativo que não pode ser rastreado facilmente com um ouvinte de formulário padrão no Gerenciador de tags do Google. Você deve pedir ao desenvolvedor do site para disparar um evento de camada de dados quando um novo assinante preencher o formulário com êxito.

window.dataLayer.push({'event': 'new_subscriber'});

Se desejar, você pode solicitar 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).

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'formLocation': 'rodapé',
 'evento': 'new_subscriber'
 });

Ou, por exemplo, quando um visitante adiciona um produto ao carrinho, um evento Data Layer (contendo as informações do produto) pode ser disparado.

Se você quiser aprender mais sobre dataLayer.push , leia este guia .

Gostou deste tutorial de camada de dados do Gerenciador de tags do Google até agora? Considere se inscrever! Basta digitar seu endereço de e-mail no formulário abaixo. Prometo compartilhar apenas conteúdo GTM incrível.

Folha de referência da camada de dados

Assine nossa newsletter e receba a lista de

10 coisas que você deve saber sobre a camada de dadosSE INSCREVER

Cancele a assinatura a qualquer momento

#3. Lendo dados da camada de dados

Imagine que existem vários autores neste blog:

  • Mim
  • John Doe
  • Jack Torrance
  • etc.

Quero determinar quais autores escrevem o conteúdo mais envolvente e depois segmentar as sessões no Google Analytics. Eu uso o plugin WordPress do Tamás Geiger que armazena o nome do autor do post na camada de dados. Se você não tiver o WP, peça a um desenvolvedor para adicionar pontos de dados adicionais à camada de dados.

O trecho fica assim:

<cabeça>
   <script>
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push [{
    pagePostAutor: 'Julius Fedorovicius'
  }];
   </script>
   <!-- Gerenciador de tags do Google -->
   ...
   <!-- Fim do Gerenciador de tags do Google -->
</head>

#3.1. Variável da Camada de Dados

O Gerenciador de tags do Google, por padrão, não reconhece dados personalizados na camada de dados. Quero dizer que você não pode usá-lo, a menos que use a variável de camada de dados.

Para criar uma variável, você precisará especificar a chave da camada de dados do valor que deseja recuperar. Quando a variável for resolvida, ela retornará o que foi inserido recentemente na chave. Fácil assim!

Se eu quisesse buscar o  valor pagePostAuthor , precisaria definir a chave pagePostAuthor nas configurações da variável.

Digamos que você queira enviar um evento para o Google Analytics 4 quando alguém deixar um comentário. Digamos que você queira enviar o nome completo do autor do artigo junto com o evento. Dessa forma, você verá quais autores geram o maior envolvimento do leitor.

Neste exemplo, não entrarei em detalhes sobre como criar uma tag. Vou apenas demonstrar como extrair os dados do Data Layer e transformá-los em uma variável (dentro do Google Tag Manager).

Na sua conta do Gerenciador de tags do Google, vá para Variáveis ​​e crie uma Variável de camada de dados com as seguintes configurações:

captura de tela da variável de camada de dados pagePostAuthor

É isso! Salve esta variável, atualize o modo de visualização e depuração (P&D) e abra o site no qual você está trabalhando. Você deve então ver sua variável recém-criada na guia Variáveis ​​da janela Visualizar e Depurar.

#3.2. Versão da camada de dados

Outra configuração disponível na variável de camada de dados é a versão. Ao selecionar a versão, você está instruindo o Gerenciador de tags do Google a tratar os valores no modelo de dados de duas maneiras diferentes.

#3.2.1. Versão 1

A versão 1 é bastante limitada e não permite acessar valores aninhados. Se você criar uma variável de camada de dados e tentar acessar as informações armazenadas em pagePostAuthor (no exemplo abaixo), você falhará porque não está na raiz do objeto (em vez disso, é um filho direto da chave de  atributos ).

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"atributos": {
'pagePostAuthor': 'Julius Fedorovicius'
}
});
</script>

Portanto, se você deseja obter o nome do autor do post, o objeto na camada de dados deve ficar assim:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'pagePostAuthor': 'Julius Fedorovicius'
});
</script>

Ver? Não há chave de atributos e pagePostAuthor está no nível raiz.

Essa não é a única limitação da versão 1. Quando você envia os dados para a camada de dados, ela sobrescreve todo o objeto.

Confuso? Aqui está um exemplo.

Imagine que temos dois códigos push da camada de dados com dados diferentes. O primeiro push contém apenas pagePostAuthor , o outro inclui mais duas chaves, pageCategory e pagePostType .

<script>
// O 1º Empurrão
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'autorData' : {
'pagePostAuthor': 'Julius Fedorovicius'
}
});
// O 2º Empurrão
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'autorData' : {
'pageCategory': 'google-tag-manager-tips',
'pagePostType': 'postagem'
}
});
</script>

Como resultado final, você teria apenas dois valores na camada de dados: pageCategory e pagePostType . Porque? Porque o segundo push para o objeto authorData substituiu completamente os dados do primeiro push.

Então, qual é o objetivo da 1ª versão? Parece uma coisa inútil, você pode dizer.

Isso não é inteiramente verdade. Percebi que às vezes (por exemplo, no GA4 e-commerce), é importante ter uma camada de dados “limpa” sem valores anteriores, o que significa que toda vez que um window.dataLayer.push ocorre, ele apaga completamente os dados antigos e armazena o novo.

#3.2.2. Versão 2

A 2ª versão é muito mais flexível. Ele permite acessar valores e matrizes aninhados e mesclar dados.

Vamos voltar ao exemplo anterior de dois pushes de camada de dados subsequentes. O primeiro push contém apenas pagePostAuthor , enquanto o segundo inclui mais duas chaves, pageCategory e pagePostType .

<script>
// O 1º Empurrão
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'autorData' : {
    'pagePostAuthor': 'Julius Fedorovicius'
   }
});

// O 2º Empurrão
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'autorData' : {
   'pageCategory': 'google-tag-manager-tips',
   'pagePostType': 'postagem'
}
});
</script>

Ao contrário da versão 1, todos os três valores permaneceriam na camada de dados quando você usasse a versão 2.

{
'autorData' : {
   'pagePostAuthor': 'John Doe',
   'pageCategory': 'google-tag-manager-tips',
   'pagePostType': 'postagem'
   }
}

Simo Ahava postou um guia detalhado sobre versões de camada de dados . Se ainda tiver alguma dúvida, vá conferir.

#3.2.3. Valor padrão

A última configuração na Variável da camada de dados é Valor padrão . Se você estiver tentando acessar o valor de uma chave específica na camada de dados E essa chave não existir, um valor padrão de “ indefinido ” será retornado.

Às vezes, pode ser necessário obter um valor padrão diferente (por exemplo, não definido ), vazio ou o que for adequado à sua meta de negócios. Nesse caso, clique na caixa de seleção e defina o valor padrão.

configuração para nova variável de camada de dados - socialTarget

#3.3. Mas e quanto a outras estruturas de dados?

Lembre-se de que os dados podem ser armazenados na camada de dados usando diferentes estruturas. Aqui está um exemplo onde a chave pagePostAuthor está no nível raiz:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'pagePostAuthor': 'Julius Fedorovicius'
});
</script>

Ou esta ( a chave pagePostAuthor agora é descendente da chave de atributos):

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'atributos': {
    'pagePostAuthor': 'Julius Fedorovicius'
   }
});
</script>

Ou ainda assim (existem dois arrays que são descendentes da chave ecommerce.items ):

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   evento: 'compra',
   comércio eletrônico: {
    id_da_transação: 'T_12345',
    afiliação: 'Google Merchandise Store',
    valor: 25,42,
    imposto: 4,90,
    frete: 5,99,
    moeda: 'USD',
    cupom: 'SUMMER_SALE',
    Itens: [
     {
      item_id: 'SKU_12345',
      item_name: 'Camiseta Stan and Friends',
      item_category: 'Vestuário',
      preço: 9,99,
      Quantidade: 1
     },
     {
      item_id: 'SKU_12346',
      item_name: 'Camiseta Feminina Google Grey',
      item_category: 'Vestuário',
      preço: 20,99,
      Quantidade: 1
     }]
    }
   });

Nos dois primeiros exemplos, inserir o nome da chave (pagePostAuthor) não retornaria seu valor. Há algo mais que você precisa saber.

#3.4. Extrair dados de chaves filhas

Esta seção pode parecer confusa, então farei isso o menos técnico possível.

As chaves que são descendentes de outras chaves são chamadas de chaves filhas (para ser honesto, encontrei vários termos sobre esta, mas a chave filha parece ser a mais compreensível para não desenvolvedores).

No exemplo abaixo, você pode ver que os atributos estão no primeiro nível e pagePostAuthor está no segundo.

Aqui, pagePostAuthor é uma chave filha porque está aninhada na chave de atributos .

{
 atributos: {
   pagePostAutor: 'Julius Fedorovicius'
 }
}

Para extrair seu valor, você deve alterar ligeiramente uma configuração em uma variável (dentro do Gerenciador de tags do Google). Em vez de pagePostAuthor , você deve inserir attribute.pagePostAuthor como o nome da variável da camada de dados.

variável datalayer para capturar o valor da variável attribute.pagePostAuthor

E se pagePostAuthor também tivesse uma chave filha? O que você faria?

{
  atributos: {
    pagePostAutor: {
      autorNome: 'Julius Fedorovicius',
      authorTag: 'Gerenciador de tags do Google'
    }
  }
}

Isso mesmo. Você deve definir o caminho completo para essa chave específica: attribute.pagePostAuthor.authorName , e assim por diante. Cada nível deve ser separado por um ponto.

Acessar chaves filhas na camada de dados é bastante comum. Quando alguém me pede para dar um exemplo, sempre falo sobre o ouvinte AJAX que rastreia envios de formulário AJAX.

Em minha postagem no blog sobre rastreamento de formulário AJAX do Gerenciador de tags do Google , expliquei como usar o ouvinte AJAX, que escuta todas as solicitações AJAX e envia informações valiosas para a camada de dados. Aqui está um exemplo:

Existem muitas chaves aninhadas. Para extrair dados da camada de dados, você precisará usar a notação de ponto nas configurações da variável da camada de dados, por exemplo, attribute.response .

#3.5. Extrair dados de membros da matriz

Eu estava trabalhando com um desenvolvedor na implementação do acompanhamento de comércio eletrônico com o GA4 . Seguindo as diretrizes do Google , pedi a um desenvolvedor que enviasse dados de pedidos bem-sucedidos para a camada de dados. Então, eu poderia buscar esse evento por meio de uma tag GA4 no Gerenciador de tags do Google.

É muito importante que o desenvolvedor siga as diretrizes e envie os dados usando a estrutura conforme as instruções do Google. Aqui está o exemplo oficial de sua base de conhecimento:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 evento: 'compra',
 comércio eletrônico: {
   id_da_transação: 'T_12345',
   afiliação: 'Google Merchandise Store',
   valor: 25,42,
   imposto: 4,90,
   frete: 5,99,
   moeda: 'USD',
   cupom: 'SUMMER_SALE',
   Itens: [
    {
     item_id: 'SKU_12345',
     item_name: 'Camiseta Stan and Friends',
     item_category: 'Vestuário',
     preço: 9,99,
     Quantidade: 1
    },
    {
     item_id: 'SKU_12346',
     item_name: 'Camiseta Feminina Google Grey',
     item_category: 'Vestuário',
     preço: 20,99,
     Quantidade: 1
    }]
   }
 });

Você sabe o que? Esta informação é muito útil. Digamos que eu também queira enviar esses dados de pedido para outras ferramentas de marketing. Fazia sentido para mim enviar dados para preço, nome e quantidade. Aqui está o que eu *poderia* fazer por preço .

Infelizmente, isso não funcionaria. O mesmo aconteceria com ecommerce.items.price, ecommerce.items.item_name , etc. Todas essas variáveis ​​de camada de dados recém-criadas sempre retornaram indefinidas. Então, oque há de errado?

Notou algo suspeito? No meu exemplo de comércio eletrônico do GA4 (retirado da Base de conhecimento do Google), ecommerce.items tem 2 chaves item_name , 2 chaves de preço etc. Então, como o Gerenciador de tags do Google saberá em qual valor estou interessado? O primeiro item ou o segundo? E o que aconteceria se um usuário comprasse 5 produtos?

O que estamos lidando aqui é chamado de arrays. ecommerce.itens.  É uma matriz contendo dois produtos com as mesmas coleções de chaves: item_id, item_name, item_category, preço e quantidade .

Em Javascript, se você quiser extrair o valor do preço do primeiro produto, você precisa usar ecommerce.items[0].price (o índice começa em 0). O Gerenciador de tags do Google não suporta colchetes nesse contexto, então você precisa usar a notação de ponto. Portanto, a chave final ficaria assim: ecommerce.items.0.price.

No Gerenciador de tags do Google, sua variável de camada de dados deve ficar assim:

Quando definido corretamente, isso não retornará o valor do primeiro item. Consulte a captura de tela abaixo.

Se houver 5 produtos na matriz e você quiser acessar o preço do 5º produto, o nome da variável da camada de dados deve ser ecommerce.items.4.price . Lembre-se, o índice aqui começa do zero, então o primeiro produto não é o 1º, mas o 0º.

Cansado? Se sim, sinta-se à vontade para marcar este tutorial de camada de dados do Gerenciador de tags do Google e retornar mais tarde.

Folha de referência da camada de dados

Assine nossa newsletter e receba a lista de

10 coisas que você deve saber sobre a camada de dadosSE INSCREVER

Cancele a assinatura a qualquer momento

#4. Enviar dados da camada de dados para outras ferramentas

Um ponto de verificação rápido em nosso Tutorial de camada de dados do Gerenciador de tags do Google. Até agora, vamos ver o que conseguimos:

  • Os dados personalizados foram armazenados na camada de dados (graças às suas habilidades de codificação, às habilidades de codificação do seu desenvolvedor ou a algum plug-in de terceiros).
  • O Gerenciador de tags do Google começou a reconhecer esses dados personalizados (graças à variável Data Layer).
  • Agora, precisamos enviar esses dados para outras ferramentas, como o Google Analytics 4.

#4.1. Ativar modo de visualização e depuração no Gerenciador de tags do Google

Vamos voltar ao exemplo de buscar o nome do autor que está mais pronto em meu site. Portanto, devemos verificar se o Google Tag Manager captura um valor na variável pagePostAuthor.

No painel do GTM, entre no modo de visualização e depuração (clicando no  botão Visualizar )

Quando o modo de depuração estiver ativado, uma nova guia deverá ser carregada onde você deverá inserir a URL do seu site.

Clique em Iniciar e o URL será aberto em uma nova guia.

Clique em Variáveis ​​na guia do modo de visualização e procure por pagePostAuthor . Verifique o seu valor. Se pagePostAuthor  retornar undefined , você deve verificar novamente se inseriu um nome de variável de camada de dados correto no painel de administração do GTM (a propósito, diferencia maiúsculas de minúsculas).

No meu caso, a  variável pagePostAuthor está definida corretamente porque obtenho o valor Julius Fedorovicius .

#4.2. Enviar variável de camada de dados pagePostAuthor para o Google Analytics

  • Volte para sua conta do Gerenciador de tags do Google.
  • Vá para Tags e clique em Novo .
  • Clique na caixa Configuração de tags .
  • Selecione a tag Google Analytics: Configuração do GA4 . Se você não tiver um, crie um.
  • Digite o nome da tag – GA4 config (na verdade, você pode nomeá-la como quiser)
  • Agora é hora de configurar a tag. Insira seu código de avaliação do GA4.
  • Digite o nome do evento como page_view
  • Clique em Parâmetros do Evento
  • Digite o nome do parâmetro como page_post_author e {{dlv – pagePostAuthor}} variável da camada de dados no campo Valor . No Gerenciador de tags do Google, as variáveis ​​estão entre colchetes duplos {{}}.
  • Na seção Acionamento , escolha uma condição que corresponda quando seu público visita qualquer artigo na página do Blog. No meu caso, seria Todas as exibições de página em que URL de clique contém blogs/notícias/ .
  • Dessa forma, a cada visualização de página, você enviará o valor de uma variável pagePostAuthor como um parâmetro de evento.

É assim que você pode transferir dados adicionais da camada de dados do Gerenciador de tags do Google para o Google Analytics. Mas não se limite apenas a dimensões personalizadas. Você pode usar variáveis ​​de camada de dados para Meta Pixel , LinkedIn Insight Tag, etc.

#4.3. Crie uma dimensão personalizada no Google Analytics 4

page_post_author é um parâmetro personalizado definido por você (ou seu desenvolvedor). O Google Analytics 4 não exibirá o parâmetro em seus relatórios, a menos que você o adicione como uma dimensão personalizada. Vamos nomeá-lo como Autor do post da página (na verdade, você pode chamá-lo do que quiser).

  • Faça login na sua conta do Google Analytics 4.
  • Abra a conta do seu site e clique em Admin . Você deve ver algo assim:
  • Clique em Dimensões personalizadas. Selecione Criar uma dimensão personalizada para adicionar o parâmetro personalizado desejado (neste caso, page_post_author ).
  • Digite o nome da dimensão como autor da postagem da página (ou qualquer outra coisa), escolha evento como um escopo, adicione page_post_author como parâmetro do evento e clique em criar.

#5. Usando dados da camada de dados como gatilhos

A camada de dados também pode ser usada para regras de disparo de tags mais avançadas. Por exemplo, você pode disparar uma tag de remarketing do Google Ads somente quando um usuário estiver em um plano gratuito. Vamos dar uma olhada mais de perto neste exemplo.

  • Abra o painel de administração do Gerenciador de tags do Google.
  • Vá para Tags e clique em Novo .
  • Insira um nome, ou seja, tag de remarketing do Google Ads
  • Escolha o tipo de tag – Remarketing de anúncios do Google
  • Insira o ID de conversão e o rótulo de conversão
  • Deixe todas as outras configurações como padrão e clique em Continuar
  • Na seção Triggering, clique no  ícone Plus no canto superior direito e digite o nome – sugiro “Pageview – Users with the free plan”. Escolha Visualização de página como um tipo de acionador.
  • Suponha que você não queira que essa tag seja disparada em todas as páginas. Na seção This Trigger Fires on , clique em Some Page Views e insira a seguinte regra: dlv – pricingPlan equals Free . Isso significa que a tag de remarketing do Google Ads será acionada somente quando a variável da camada de dados do pricingPlan for exatamente gratuita. Usuários premium não acionarão a regra.

#6. Usando eventos da camada de dados como gatilhos

Outro exemplo comum de gatilhos baseados em camada de dados é usar eventos. Além dos dados personalizados, você também pode enviar eventos para a camada de dados usando window.dataLayer.push .

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'formLocation': 'rodapé',
 'evento': 'new_subscriber'
});

O parâmetroevent indica que este é um evento da camada de dados. Todos os eventos podem ser vistos no fluxo do modo de visualização e depuração.

Agora vamos definir esse evento como um acionador para a tag de evento do Google Analytics.

  • Vá para Gatilhos e clique em Novo
  • Insira o nome. Sugiro chamá-lo de Personalizado – novo assinante de e-mail
  • Escolha o tipo – Evento personalizado (todos os eventos da camada de dados são tratados como eventos personalizados no GTM).
  • Ativar – new_subscriber . Você precisa inserir o título exato do evento que vê no console de visualização e depuração.

Vamos voltar ao nosso exemplo de evento window.dataLayer.push . Aqui está o código:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'formLocation': 'rodapé',
 'evento': new_subscriber
});

Não seria bom passar os dados de formLocation para o Google Analytics? O Gerenciador de tags do Google não captura esse parâmetro por padrão, portanto, precisamos criar outra variável. Acesse Variáveis ​​> Variáveis ​​definidas pelo usuário e clique em Novo .

  • Eu recomendo nomeá-lo como dlv – formPosition .
  • Escolha o tipo – Variável da Camada de Dados. Variable Name – formPosition (exatamente como o parâmetro é chamado no exemplo de código anterior). Deixe todas as outras configurações como estão e clique em Create Variable.

Por fim, vamos criar uma tag de evento do Google Analytics quando um novo assinante enviar seu endereço de e-mail.

  • Vá para Tags e clique em Novo
  • Escolha o tipo de tag – Google Analytics: evento GA4
  • Defina o parâmetro ID de rastreamento da tag de configuração.
  • Adicione o nome do evento como new_subscriber .
  • Nos Parâmetros do Evento, coloque form_location como o Nome do Parâmetro e {{dlv – formPosition}} como o valor.
  • Para condições de acionamento, selecione o acionador Personalizado – novo assinante de e-mail criado anteriormente.
  • Clique em Continuar
  • Feito. Você está pronto para ir!

Os seguintes (e últimos) passos são:

  • Verifique todas as novas tags no console de visualização e depuração do Gerenciador de tags do Google (se elas disparam corretamente)
  • Verifique Debugview na conta do Google Analytics (se o evento new_subscriber está funcionando corretamente)
  • Instale o legado do Assistente de tags do Google  (no navegador Chrome) para garantir que a tag de remarketing seja disparada corretamente

Você pode aprender mais sobre o acionador de evento personalizado nesta postagem do blog .

Camada de dados do Gerenciador de tags do Google: conclusão

Se você leu todo o tutorial da camada de dados do Gerenciador de tags do Google, muito bem (e obrigado)! Se você pulou para o resumo sem ler tudo, sugiro marcar esta página para que possa retornar mais tarde.

Neste tutorial da camada de dados do Gerenciador de tags do Google, expliquei os principais conceitos do que é a camada de dados, por que você deve se preocupar em aprender mais sobre ela, por que é importante etc. até a conclusão, então alerta de spoiler, é SUPER IMPORTANTE.

Em poucas palavras, eis o que é a Camada de Dados e como ela funciona:

  • Data Layer é um local central (camada virtual) de um site onde você, seus desenvolvedores, várias ferramentas podem armazenar dados (sobre o usuário, seu comportamento, etc.). A partir daí, o Google Tag Manager lê essas informações e as envia posteriormente para outras ferramentas, Google Analytics, Google Ads, Facebook, etc.
  • A camada de dados não é um lugar mágico em um servidor onde você mantém os dados. É um armazenamento de dados temporário criado após o carregamento do GTM e é completamente apagado sempre que a página é atualizada ou fechada.
  • Quando o código do Gerenciador de tags do Google é carregado na página, a camada de dados é criada automaticamente.
  • Se você deseja ter alguns dados personalizados na camada de dados, você (ou seu desenvolvedor) deve usar o método window.dataLayer.push para enviar os dados. Se você não sabe codificar, peça aos desenvolvedores para fazer isso ou procure plug-ins/ferramentas de terceiros que possam fazer isso.
  • Por padrão, o Google Tag Manager não reconhece dados personalizados armazenados no DL. Portanto, você precisa criar variáveis ​​de camada de dados no GTM. No caso de eventos da camada de dados, você também precisa criar acionadores de eventos personalizados .
  • Por fim, sinta-se à vontade para inserir variáveis ​​da camada de dados em tags (dentro do Gerenciador de tags do Google), por exemplo, tag de evento do Google Analytics 4, tag HTML personalizada etc. As variáveis ​​devem estar entre colchetes duplos {{ }}.

Há algo que eu perdi neste tutorial de camada de dados do Gerenciador de tags do Google? Deixe-me saber na seção de comentários abaixo.

Facebook Comments Box

Related posts:

Rastreie vídeos com o Google Analytics 4 e o Google Tag Manager
Um guia para o modo de visualização do Gerenciador de tags do Google
Como configurar e instalar o Google Analytics 4 com o Gerenciador de tags do Google
Como criar triggers no Google Tag Manager
Como monitorar tags no Google Tag Manager
Como testar tags no Google Tag Manager
Como criar variáveis no Google Tag Manager
Google Tag Manager: o que é e como funciona
Marketing Digital School 0 Comentários