Como implementar informações personalizadas na camada de dados do Google Tag Manager

Existem duas maneiras de carregar essas informações dentro do código fonte. A primeira seria atrelando as informações antes da implementação do Google Tag Manager no HEAD, e a segunda seria passando as informações através de eventos personalizados, criados diretamente na camada de dados.

Anexando informações antes da implementação do Google Tag Manager no HEAD

<script>
  let dataLayer = [{
        'propriedade_1': 'valor_1',
        'propriedade_2': 'valor_2'
      }];
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5WVFHVC');</script>
<!-- End Google Tag Manager -->

É importante ressaltar que, os dados passados sem evento personalizado serão recebidos dentro do GTM como o evento 

message
. Você irá usar os dados através dos eventos padrões do Google Tag Manager (por exemplo, "Click", "Link click" e etc).

Passando informações através de eventos personalizados

Antes de passar o exemplo, primeiro é importante definir para que serve um evento personalizado. Segue a definição do próprio Google:

Os eventos personalizados são usados para acompanhar as interações que ocorrem no seu site (ou app para dispositivos móveis) que não são tratadas pelos métodos padrão. O caso de uso mais comum é quando você quer monitorar envios de formulários, mas o comportamento padrão do formulário foi alterado (por exemplo: o evento de navegador submit foi modificado).

Visto isso, vamos ao exemplo de como implementar um evento personalizado:

//Esses valores podem ser passados desde um retorno de função ou execução de um bloco de código javascript
  var dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'personalizado'
      });

<!-- Ou disparando direto do elemento -->
  <a href="#" name="button1" onclick="dataLayer.push({'event': 'personalizado'});">Button 1</a>
  
  <!-- Inclusive passando informações atreladas ao evento seja direto do elemento -->
  <a href="#" name="button2" onclick="dataLayer.push({'event': 'personalizado','propriedade_1': 'valor_1'});">Button 2</a>`

 // Ou passando as informações atreladas no evento direto do javascript
  var dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'personalizado',
        'propriedade_1': 'valor_1'
      });

Quando devo implementar a camada de dados (dataLayer) dentro do meu site?

Não existe receita de bolo porém, é importante entender que:

  1. Se você precisa de personalizar informações logo no carregamento da página você precisa de uma implementação na camada de dados;
  2. Se você precisa mensurar informações personalizadas em eventos após o carregamento da página, você precisa de uma implementação de dados.

Espero que tenha ajudado até a próxima :D


Está curtindo o post?
Assine nossa newsletter e fique por dentro das noticias do mercado de Web Analytics.

Métricas Boss: © 2021 - Versão 4.0Web Analytics é mais que um gráfico bonitinho!