Como funciona as variáveis no Google tag manager?

Hoje iremos aprender como funciona as variáveis no google-tag-manager, se você não faz idéia do que seja o google-tag-manager. Clique aqui para entender melhor sobre o que vamos falar abaixo.

Primeiro, o que é uma variável?

De maneira primitiva uma variável no sentido da palavra significa:

Variável
adjetivo de dois gêneros

  1. sujeito a variações ou mudanças; que pode variar; inconstante, instável.
    “clima”
  2. que pode assumir qualquer um dos valores em um conjunto de valores.
    “na equação, certos símbolos têm valor v.”

Pensando em computadores, uma variável é responsável por armazenar valores em memória. De maneira que os valores sejam recuperados, alterados e excluídos de acordo com sua necessidade, essas variáveis possuem tipos de dados de acordo com o armazenamento. No nosso post vamos falar e citar alguns tipos que são eles:

  • Strings/Cadeia de caracteres - Usadas para armazenamento de palavras, frases ou, textos de um programa. Exemplo: “Isso e uma string”.
  • Int/Inteiros - Usados para armazenamento de números inteiros; Exemplo: 123.
  • Boolean/Booleanos - Assume o valor true/false;

Bem essa é uma explicação superficial de maneira que seja mais fácil o entendimento do conteúdo abaixo, você pode/deve aumentar seus conhecimentos computacionais. Quanto mais conhecimento melhor. Dentro do google-tag-manager, uma variável é responsável por trazer o dinamismo para suas tags, acionadores e outras variáveis. Com ela você conseguirá armazenar dados do comportamento do usuário e passar isso para uma tag de comércio eletrônico por exemplo.

As variáveis no google-tag-manager são divididas em:

  • Pré-moldadas;
  • Customizadas;

As pré-moldadas são variáveis criadas para automatizar ainda mais o seu trabalho, variáveis relacionadas a urls, eventos, erros, formulários e até cliques.

Variaveis pré moldadas

Mas pra que servem essas variáveis? Bem como veremos abaixo em sua maioria para melhorar a criação dos seus acionadores. Por exemplo quando clicamos em um link na nossa página.

Variaveis pre moldadas

Mas não é só de links que vivem as variáveis pré-moldadas do google-tag-manager vamos ver todos os tipos?

Páginas

  • Page URL - retorna uma string contendo a url completa da página ativa (http:/metricasboss.com.br/como-funciona-as-variaveis-no-google-tag-manager/google-tag-manager);
  • Page Hostname - retorna uma string que contém o hostname da página ativa (metricasboss.com.br);
  • Page Path - retorna uma string que contém o caminho relativo da página (/como-funciona-as-variaveis-no-google-tag-manager/google-tag-manager);
  • Referrer - retorna uma string que contém a URL da página que trouxe o usuário até a página ativa (http:/metricasboss.com.br/, http:/www.facebook.com/);

Utilitários

  • Event - retorna uma string que contém o valor armazenado na chave ‘event’ no objeto dataLayer;
  • Environment name - retorna o nome do ambiente no qual o usuário está;
  • Container ID - retorna uma string contendo o ID do container (GTM-XXXXX);
  • Container Version - retorna uma string contendo a versão do container;
  • Random Number - retorna um número randômico entre 0 e 2147483647;
  • HTML ID - retorna o ID da tag customizada HTML.

Erros

  • Error Message - retorna uma string que contém a mensagem disparada no erro Javascript;
  • Error Line - retorna uma string que contendo o número da linha onde o erro foi encontrado;
  • Error URL - retorna uma string que contém a URL no qual o erro foi encontrado;
  • Debug Mode - retorna um Booleano (true/false) de acordo modo de depuração ativado ou não;

Clicks

  • Click Element - retorna o elemento HTML selecionado na ação auto-evento do google-tag-manager;
  • Click Classes - retorna uma string contida no atributo ClassName do auto-evento, o valor retornado será o nome da classe ();
  • Click ID - retorna uma string contida no atributo id do auto-evento, o valor retornado será o nome do id ( _”

    div

    “_);

  • Click Target - retorna uma string contida no atributo target do auto-evento, o valor retornado será o nome do alvo ();
  • Click URL -retorna uma string que contém o valor do atributo href ou action do auto-evento, ()
  • Click Text - retorna uma string contida no atributo textContent/innerText  do auto evento, o valor retornado vai ser o texto dentro do elemento (

    Oi eu sou um texto

    );

Formulários

  • Form Element - retorna o elemento HTML selecionado na ação auto-evento do google-tag-manager;
  • Form Classes - retorna uma string contida no atributo ClassName do auto-evento, o valor retornado será o nome da classe (

    _form_>);
  • Form ID - retorna uma string contida no atributo id do auto-evento, o valor retornado será o nome do id (_<_form_ id="id">form_>);
  • Form Target - retorna uma string contida no atributo target do auto-evento, o valor retornado será o nome do alvo (_<_form_ target="_blank">form_>);
  • Form URL -retorna uma string que contém o valor do atributo href ou action do auto-evento, (form action=”http:/metricasboss.com.br/”>);
  • Form Text - retorna uma string contida no atributo textContent/innerText  do auto evento, o valor retornado vai ser o texto dentro do elemento (

    Oi eu sou um texto

    );

Histórico

  • New History Fragment - retorna uma string que contém a nova url depois do histórico do usuário mudar no auto-evento;
  • Old History Fragment - retorna uma string que contém a ultima url acessada pelo usuário;
  • New History State -retorna um objeto contendo  o novo histórico depois do pushState() ser registrado.
  • Old History State - retorna um objeto contendo o ultimo histórico acessado pelo usuário;
  • History Source - retorna uma string descrevendo o evento que inicializou a mudança do histórico do usuário (popstate ou pushState);

Bem, assim fica fácil né? As variáveis pre-moldadas é um jeito rápido e fácil de você acessa o que é de mais comum dos tipos de variáveis contidas em uma página.

Agora veremos as variáveis customizadas pelo usuário, com esse tipo de variável o google-tag-manager nos proporciona passar valores que só existem na nossa aplicação para por exemplo criar uma dimensão secundária no nosso google-analytics.

No GTM, você irá chamará as variáveis com uma sintaxe semelhante a essa:


Variáveis no google-tag-manager

Um dos grandes exemplos que temos na parte de variáveis no GTM é o armazenamento do código de acompanhamento do nosso google-analytics (UA-XXXXXX-X) nesse caso usamos uma variável do tipo permanente. Vamos ver agora os tipos de variáveis no google-tag-manager!

Tipos de variaveis

1. Código do container

É bem simples o código do container retorna para sua variável o número do seu container. Existe uma variável pré-moldada para isso (Container ID)

RETORNA

STRING com o número do container implementado;

Cookie primário

O Cookie primário é o tipo de variável responsável por retornar o valor de um cookie em especifico ou o primeiro cookie setado na sua página.

RETORNA

STRING contendo o valor armazenado no cookie, ou undefined, no caso do cookie não existir.

3. Element DOM

Dom element

Você pode usar o ELEMENT DOM para pegar o texto contido em algum elemento dentro da sua página. Você também pode usar para pegar um atributo de um elemento.

RETORNA

O texto que está dentro do Element DOM, ou o valor do atributo que você precisa. Se o ID do elemento que você passar não existir na sua página a variável vai retornar null.

4. Evento personalizado

Variavel - evento personalizado

O evento customizado retorna o valor da chave ‘event’ contido no data layer. Por exemplo, se você colocar na sua página o seguinte código: dataLayer.push({‘event’ : ‘thisEvent’}); , logo a variável de evento customizado será ‘thisEvent’.

RETORNA

O valor armazenado na chave ‘event’ dentro do Data Layer.

5. Javascript Customizado

Javascript Customizado

A variável mais versátil de todas, com ela você conseguirá executar javascript na sua página. A javascript customizado segue duas regras, Primeiro o script precisa estar envolto a uma bloco de função anônima (function(){}). Segundo, a função/valor deve ser retornada (return algumValor).

RETORNA

Depende do que voce retornou. Você pode retornar uma variável, ou, outras funções.

6. Modo de depuração

O modo de depuração retorna um true/false de acordo com o usuário estar acessando o site em modo de pre-visualização. Existe uma variável pré-moldada para a mesma coisa.

RETORNA

True quando o usuário está acessando o seu site no modo de teste.

7. Nome do ambiente

Nome do ambiente

RETORNA

Nome do ambiente que está sendo visualizado no modo de depuração. Existe uma variável pré-moldada para isso.

8. Número randômico

Número randômico

RETORNA

Um número randômico entre 0 e 2147483647; Existe uma variável pré-moldada números randômicos.

9. Número da versão do container

Número da versão do container

RETORNA

Auto explicativa. O número da versão do container retornará o valor atual da versão, ou o número da versão do container no modo de depuração. Existe uma variável pré-moldada número da versão do container.

10. Permanente

Permanente

Utilizada normalmente para reutilização de variáveis. Se voce tem uma string que será reutilizada em outras tags exemplo: UA (Código de acompanhamento do google-analytics) você armazena o mesmo para reutilizar em Eventos, Transação e Visualização de página.

RETORNA

A variável permanente retorna uma string configurada no campo valor.

11. Referenciador de HTTP

Referenciador de HTTP

Variável utilizada para identificar páginas que trazem um usuário para sua página. Existe uma variável pré-moldada para referenciador de http.

RETORNA

String com o valor da url da página, você pode especificar um pedaço da url que você deseja.

12. URL

URL

A variável URL é utilizada para acessar componentes da atual URL (padrão), ou qualquer valor de uma URL retornada por uma variável. O grande diferencial dessa variável é o poder de manipular partes de uma URL.

Os tipos de componentes que você pode escolher são:

  • URL completo - retorna a urls completa sem a ancoragem interna, por exemplo se sua URL for http:/testedeurl.com.br/#oieusouogoku o valor da variável será apenas http:/testedeurl.com.br/.
  • Protocolo - retorna o protocolo da URL, exemplo: https:/testedeurl.com.br
  • Nome do host -  retorna o hostname da URL sem a porta, exemplo: testedeurl.com.br. Nota adicional: você pode remover o www, ou sub domínios do hostname marcando a opção.
  • Porta - retorna o número da porta usada na url, ou ‘80’ para HTTP / ‘443’ para HTTPS, caso  a url não tenha número da porta.
  • Caminho - retorna somente o sub diretório contido na url, você pode especificar páginas padrões para remover nomes como ‘index.html’ ou ‘index.php’ da string retornada.
  • Consulta - retorna todos os parâmetros como string (sem o inicio ’?’), se você não especificar a chave do parâmetro o retorno da variável será o total da mesma exemplo: http:/testedeurl.com.br/?a=b, se o valor da chave de consulta estiver especificado será retornado o valor da chave que você configurou.
  • Fragmento - retorna o valor do fragmento sem o ‘#’ inicial, exemplo: http:/testedeurl.com.br/#hashtag será igual a ‘hashtag’.

13. Variável da camada de dados

Variável da camada de dados

Essa variável é utilizada para especificar um determinado valor contido no seu objeto DataLayer baseado na chave na qual ele está representado.

RETORNA

O valor armazenado no seu dataLayer baseado na chave na qual foi configurada, exemplo, se você inseriu no seu código o seguinte elemento dataLayer.push({‘VirtualPageview’: ‘/teste/’}) você vai obter o valor da variável VirtualPageviewconfigurado o nome da variável da camada de dados com a chave do objeto.**