
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 ](https://metricasboss.com.br/google-tag-manager-introducao.html)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.


[![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=como-funciona-as-variaveis-no-google-tag-manager)





<u>As variáveis no google-tag-manager são divididas em:</u>



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.

<br/>

![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.**





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

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

Confira nesse post os tipos e as funcionalidades contidas dentro da área de variáveis do google tag manager, veja mais!

thumbnail_Captura-de-Tela-2016-02-26-as-19.52.17-500x480.png

Captura-de-Tela-2016-02-26-as-19.52.17-500x480.png

Como funciona as variáveis 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?