[dataLayer] O Guia completo para implementar informações personalizadas na camada de dados no Google Tag Manager

Vira e mexe a galera vem me perguntar la no meu instagram sobre o que é e como funciona a camada de dados do Google Tag Manager (dataLayer), demorei mas resolvi aproveitar uma documentação que utilizamos para nossos clientes como base desse post :)

O que é dataLayer?

Datalayer (camada de dados) é uma camada invisível de comunicação do nosso código fonte com o Google Tag Manager, toda vez que precisamos personalizar algum tipo de informação dentro das nossas ferramentas de análise precisamos resgatar essas informações diretamente do nosso código. Por exemplo, quando queremos dizer quais produtos foram comprados, estamos automáticamente gerando a necessidade de puxar essas informações de algum lugar. O Google Analytics sozinho não consegue saber que o seu usuário finalizou uma compra e acima de tudo, que os produtos que foram comprados foram a camisa preta e a caneca rosa, hehe.

Do ponto de vista técnico

Para suprir um pouco da curiosidade e até mesmo da necessidade de explicar para um programador, a camada de dados (dataLayer) trata-se de uma variável javascript global do tipo Array que é passada como 4 argumento da implementação do Google Tag Manager:

<!-- 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-W484X83');</script>
<!-- End Google Tag Manager -->

Para ajudar você a se localizar esse trecho que define a camada de dados ta lá na penultima linha, vou isolar para vocês:

})(window,document,'script','dataLayer','GTM-W484X83');</script>

Os parâmetros são todas as informações que estão sendo passadas entre parenteses e são separados por virgula, se você ver lá no penultimo parâmetro você vai ver o argumento dataLayer que define que o nome da variável que será utilizada para ser a variável da camada de dados. Inclusive é possivel mudar, mudando esse parâmetro para uma outra string, irado né?

Quando usar a dataLayer?

Sem querer já acabamos definindo com a explicação acima um pouco do quando devemos utilizar a camada de dados dentro do Google Tag Manager, por padrão, toda vez que precisamos enviar uma informação que é de exclusividade do nosso site, ou algum comportamento que foge dos comportamentos padrões capturado pelo Google Tag Manager, precisaremos de utilizar a dataLayer.

Para passar informações personalizadas no carregamento da página

Imagina que você precise passar no carregamento da página a qual grupo a página pertence, nesse caso precisariamos implementar essa informação atráves da camada de dados.

Para mensurar um comportamento fora dos comportamentos padrões

O Google Tag Manager sozinho, consegue capturar bastante interações do usuário, Click, Envio de Formulário, Scroll na página e etc. Agora, quando um usuário adiciona um produto no carrinho normalmente mensuramos esse comportamento atráves da dataLayer.

Como implementar uma dataLayer

Existem duas maneiras de implementar uma dataLayer dentro do código fonte, a primeira seria atrelando as informações durante o carregamento da págiina, antes da implementação do Google Tag Manager na tag  HEAD, e a segunda seria passando as informações através das interações do usuário dentro do seu site.

Referência de APIs

dataLayer

DataLayer é um array global que está apto a receber um objeto como as informações personalizadas, para quem não sabe objeto é uma coleção de dados e/ou funcionalidades relacionadas atráves de um padrão chave-valor.

dataLayer.push

O método push é o método responsável por enviar os objetos {'chave': 'valor'} para camada de dados.

Chaves pré-definidas

Dentro da dataLayer existem algumas chaves pré-definidas a principal delas é a chave event elá determina se esse conjunto de informações vai ser um evento personalizado.

Passando informações no carregamento da página

<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

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.

Chaves escondidas

Existem 2 outras chaves que é triste mas não existe em nenhum lugar na documentação do Google uma é a eventCallback e a outra eventTimeout.

eventCallback essa chave define uma sequência no processo de disparo, callback no javascript trata-se sobre uma função de retorno, com isso podemos entender o seguinte. Toda vez que o dataLayer for disparado após o disparo de todas as tags ele iré executar o que está dentro do eventCallback.

Vamos imaginar que queremos medir o comportamento de um usuário atráves click em um link, assim como vimos o exemplo acima. O processo de ancoragem padrão do link de levar o usuário de uma página para outra pode gerar perda na mensuração do comportamento do usuário, uma vez que o redirecionamento vai obrigatóriamente acontecer simultâneamente com o disparo dos eventos que vinculados a esse acionador.

Vamos ver na prática:

  <a href="/pdp" name="link1" onclick="dataLayer.push({'event': 'personalizado'});">Link 1</a>

O que irá acontecer quando o usuário clicar nesse link:

1. O navegador irá iniciar disparar o conteúdo do atributo

   onClick

   e o evento personalizado será enviado para o Google Tag Manager;
2. O navegador iniciará o comportamento de levar o usuário para uma proxima página -> O Google tag manager irá disparar todas as tags vinculadas a esse acionador.

Ou seja, se o Google Tag Manager Não conseguir disparar todos os evento relacionados a ele antes do redirecionamento para página de destino, alguns dos eventos podem ser não capturados.

E como o eventCallback entra nessa jogada, com a utilização dessa chave dizemos assim para o nosso código: "Olha moço, só redireciona esse usuário para página que ele quer ir, depois que o GTM disparar todas as tags vinculadas a esse acionador". Agora vamos ver a parte do código:

  <script>
      function mensuraClick(redirectToUrl) {
        var dataLayer = window.dataLayer || [];

        dataLayer.push({
          'event': 'personalizado',
          'eventCallback': function() {
            window.location = redirectTo
          }
        })
      }
  </script>
  
  <a name="link1" onclick="mensurarClick('/pdp')">Link 1</a>

O que irá acontecer quando o usuário clicar nesse link:

1. O navegador irá iniciar disparar o conteúdo do atributo onClick e o evento personalizado será enviado para o Google Tag Manager;
2. Após o Google Tag Manager finalizar o processo de disparo de todas as tags ele irá executar o código dentro da chave eventCallback.
3. O navegador iniciará o comportamento de levar o usuário para uma proxima página.

Percebeu? O eventCallback removeu as necessidade do evento ser disparado pelo Google Tag Manager de concorrer simultâneamente com o processo de redirecionar o usuário :)

O eventTimeout é um pouco mais simples prometo, ele trata-se de uma chave que irá determinar um tempo limite para o Google Tag Manager disparar todas as tags, essa chave recebe um número inteiro que definira em milisegundos quanto tempo iremos esperar antes de forçar a execução do redirecionamento. Isso previne que aplicação não seja prejudicada caso algum código dentro do Google Tag Manager quebrem não prejudicando o comportamento padrão do site.

Nesse caso o código ficaria assim:

  <script>
      function mensuraClick(redirectToUrl) {
        var dataLayer = window.dataLayer || [];

        dataLayer.push({
          'event': 'personalizado',
          'eventCallback': function() {
            window.location = redirectTo
          },
          'eventTimeout': 2000
        })
      }
  </script>
  
  <a name="link1" onclick="mensurarClick('/pdp')">Link 1</a>

Espero que tenha ajudado a entender um pouco mais sobre a camada de dados dentro do Google Tag Manager, qualquer dúvida entra em contato comigo la no instagram, ou no Métricas Boss Prime que tem um monte de treinamento para ajudar a medir o comportamento do seu usuário :)