Vira e mexe a galera vem me perguntar  la no meu [instagram](https://instagram.com/lucianfialho) 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.


[![Banners inside_post Cursos Métricas Boss Prime - GTM.png](https://imagens.metricasboss.com.br/Banners_inside_post_Cursos_Metricas_Boss_Prime_GTM_d405a08fa3.png)](https://landing.metricasboss.com.br/metricas-boss-prime?utm_source=metricasboss&utm_medium=inside_post&utm_campaign=prime&utm_content=data-layer-o-guia-completo-para-implementar-informacoes-personalizadas-na-camada-de-dados-no-google-tag-manager)





### 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:

```html

<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>

```

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

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


<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>

```

É 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:

```html
//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'
      });


  <a href="#" name="button1" onclick="dataLayer.push({'event': 'personalizado'});">Button 1</a>
  
  
  <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:
```html
  <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:

```html
  <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:

```html
  <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](https://instagram.com/lucianfialho), ou no [Métricas Boss Prime](https://landing.metricasboss.com.br/metricas-boss-prime?utm_source=metricasboss&utm_medium=inside_post) que tem um monte de treinamento para ajudar a medir o comportamento do seu usuário :)

Aprenda como e quando enviar informações personalizadas dentro do Google Tag Manager  através da camada de dados (dataLayer)

large_limite-google-tag-manager.png

medium_limite-google-tag-manager.png

small_limite-google-tag-manager.png

thumbnail_limite-google-tag-manager.png

limite-google-tag-manager.png

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

A Métricas Boss é uma agência de Web Analytics e usabilidade. Conte com uma empresa certificada Google Analytics para sua gestão de web analytics.

O que você irá aprender?