Como funciona as variáveis no Google tag manager?

O que você irá aprender?

Hoje iremos aprender como funciona as variáveis no google-tag-manager, se você não faz ideia 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

sujeito a variações ou mudanças; que pode variar; inconstante, instável. “clima”
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:

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.

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.

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:

{{nome variavel }}

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!

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;

2️⃣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

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

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

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

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

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

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.

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

1️⃣1️⃣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.

1️⃣2️⃣ 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’.

1️⃣3️⃣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.**

Dúvidas? Comentários? Sugestões?

Mande um e-mail para gente contato@metricasboss.com.br, até a próxima :D