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.
![Captura-de-Tela-2016-02-26-as-17.03.17.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/Captura_de_Tela_2016_02_26_as_17_03_17_b7da5c9e4b.png)
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.
![Screenshot-at-fev-26-17-01-36.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/Screenshot_at_fev_26_17_01_36_5f701fc42e.png)
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 }}
![1Screenshot-at-fev-26-17-32-28.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/1_Screenshot_at_fev_26_17_32_28_dab7d05f41.png)
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!
![2Captura-de-Tela-2016-02-26-as-19.52.17.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/2_Captura_de_Tela_2016_02_26_as_19_52_17_0d6629b6b4.png)
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
![cookie Captura-de-Tela-2016-02-26-as-20.23.41.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/cookie_Captura_de_Tela_2016_02_26_as_20_23_41_08129c90f9.png)
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
![element dom Captura-de-Tela-2016-02-26-as-20.29.08.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/element_dom_Captura_de_Tela_2016_02_26_as_20_29_08_456d7ad343.png)
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
![event perso Captura-de-Tela-2016-03-02-as-15.39.13.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/event_perso_Captura_de_Tela_2016_03_02_as_15_39_13_32b75c6083.png)
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
![jav Captura-de-Tela-2016-03-02-as-15.46.36.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/jav_Captura_de_Tela_2016_03_02_as_15_46_36_683669f450.png)
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
![ambienteCaptura-de-Tela-2016-03-02-as-16.15.04.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/ambiente_Captura_de_Tela_2016_03_02_as_16_15_04_28ba11ce84.png)
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
![numero aleaCaptura-de-Tela-2016-03-02-as-16.18.19.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/numero_alea_Captura_de_Tela_2016_03_02_as_16_18_19_bb1d3f52a4.png)
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
![Captura-de-Tela-2016-03-02-as-16.23.44.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/Captura_de_Tela_2016_03_02_as_16_23_44_5cbd099c2e.png)
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
![permanente Captura-de-Tela-2016-03-02-as-16.32.42.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/permanente_Captura_de_Tela_2016_03_02_as_16_32_42_2b82bfa7f2.png)
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
![http Captura-de-Tela-2016-03-02-as-16.36.57.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/http_Captura_de_Tela_2016_03_02_as_16_36_57_f922bd87ad.png)
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
![url Captura-de-Tela-2016-03-02-as-16.42.56.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/url_Captura_de_Tela_2016_03_02_as_16_42_56_2e95df1ca2.png)
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
![Captura-de-Tela-2016-03-02-as-17.02.15.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/Captura_de_Tela_2016_03_02_as_17_02_15_b94dd741fc.png)
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.**
fonte: https://metricasboss.com.br/artigos/como-funciona-as-variaveis-no-google-tag-manager