Inscreva-se em minha Newsletter
Toda vez que penso: “Sou um Mestre do Google Tag Manager”, aprendo novas técnicas e um horizonte totalmente novo se abre, e eu volto a pensar: “Não. Eu ainda sou apenas um jovem Padawan e ainda tenho muito a aprender”.
Minha mais nova descoberta do GTM aconteceu quando mergulhei mais fundo nas variáveis do Gerenciador de tags do Google. Eu estava usando com sucesso variáveis de camada de dados, variáveis constantes, etc. Mas alguns deles ainda eram um mistério para mim.
Neste artigo, mostrarei a você as 7 principais variáveis personalizadas do Google Tag Manager que eu uso na maioria dos meus contêineres do GTM.
Algumas coisas vão estar em inglês, pois alguns conteúdos são do universo HTML e JavaScript, o que considero que todo o profissional de Marketing Digital deveria aprender.
Eu me acostumei a usar todas ferramentas em inglês, pois ao fazer uma API ou outra coisa voltada a programação o português me confunde. Outra coisa, nesse artigo eu posso chamar o GTM em português e outra hora em inglês para fins de SEO, sei que me entendem.
Vamos lá!
7 Variáveis Personalizadas que você deveria ter no seu GTM
#1. Page title
Para ser honesto, ainda não consigo entender por que essa variável não está disponível no Google Tag Manager por padrão. Embora o Google Analytics acompanhe o título da página por padrão, há muitas ferramentas e casos de uso em que o título da página (como variável) seria muito útil no Gerenciador de tags do Google.
Felizmente, é muito fácil criar um.
No seu contêiner do Gerenciador de tags do Google, vá para Variáveis > Variável Javascript e insira document.title.
Agora, ative o modo de visualização e debug do GTM e atualize a página em que você está testando. Quando o painel do GTM aparecer, clique em qualquer evento do GTM (no lado esquerdo) e navegue até a guia Variáveis.
Você deve ver sua nova variável Javascript criada: Javascript – Page Title.
#2. Alt text (img)
Se o seu site contiver muitas imagens clicáveis, talvez você queira acompanhar quais delas são mais clicadas.
Mas há um problema. É muito possível que cada imagem não contenha um ID ou uma classe exclusiva. Então, como diferenciá-las com o GTM?
Clique no Inspecionar elemento em uma dessas imagens.
Um painel com muito código aparecerá. O snippet de código da sua imagem será destacado. Verifique se essa imagem contém o atributo alt (como no exemplo abaixo).
Embora várias imagens possam ter o mesmo valor de atributo alt, isso ainda pode ser um bom indicador de qual imagem foi clicada. Importante, o atributo alt não é necessário, portanto, nem todas as imagens o terão.
Agora, se você deseja saber se uma imagem tem retido a atenção do usuário, você precisa configurar um evento de mouseover.
Mas devemos cuidar para que todas as imagens tenham o atributo alt. Ok amiguinhos? Isso é o básico para SEO.
De qualquer forma, se o site em que você está trabalhando tiver vários atributos alternativos posicionados corretamente, sinta-se à vontade para usá-lo como uma variável personalizada do Google Tag Manager.
Como? É super fácil, vem comigo!
No seu contêiner do Google Tag Manager, acesse Variáveis > Variável de evento automático (inglês: Variables > Auto-event Variable) e escolha as seguintes configurações:
A variável de evento automático busca um valor específico de elemento com o qual um visitante interage. Nesse caso, quando um visitante clica em qualquer elemento do site, nossa variável recém-criada procura o atributo alt que pertence a esse elemento
Se o elemento (ou seja, imagem ou link) não tiver nenhum atributo alt, a variável retornará um valor indefinido. Se houver um, ele buscará o valor do atributo.
Vamos testar? Depois de criar essa variável, atualize o modo de visualização e debug e o website no qual você está testando.
Clique na imagem que você deseja acompanhar. Se contiver um link, faça o clique com a tecla CTRL ou CMD pressionada. Dessa forma, você abrirá o link no tipo target="_blank" e impedirá a página de atualizar e perder todos os dados de debug no console do GTM.
Agora, escolha o evento gtm.click GTM e vá para a guia Variáveis. Você verá algo assim:
Se o evento gtm.click não aparecer para você, não se preocupe. Nessa parte você irá precisar criar um Trigger (acionador) para os eventos a seguir:
Nomeie seu Trigger, depois escolha a opção > Click – All Elements > All Clicks > Salvar.
Faça o mesmo processo para criar outro Trigger para Just Links (Apenas Links) > All Clicks > Salvar.
Se a sua conta no GTM for recente, não se preocupe, ele já possui esses Triggers mas caso seja uma conta legada basta apenas efetuar os passos acima.
#3. Download File
Se você já está acompanhando os downloads de arquivos com o GTM, provavelmente está enviando a URL inteira para o Google Analytics como ação de evento (ou rótulo de evento).
Por exemplo, um usuário clica em um link para o arquivo PDF. Você envia uma URL como Ação do Evento para o Google Analytics. Embora isso funcione perfeitamente, a legibilidade dos dados não é muito conveniente.
Exemplo de URL:
https://www.example.com/files/guides/arquivo.pdf
Não seria muito melhor se você pudesse ver apenas o nome do arquivo (arquivo.pdf) nos relatórios do GA? Basta criar uma variável JavaScript personalizada com o seguinte código:
function() {
var filepath = { {Click Element} }.pathname.split("/");
var filename = filepath.pop();
return filename.indexOf(".") > -1?filename:'n/a';
}
Antes de testá-lo, ative a variável Click Element entre as variáveis incorporadas no seu contêiner do Gerenciador de tags do Google.
Agora, salve a variável, atualize o modo Debug e atualize a sua página. Encontre um link para PDF ou DOCX (ou qualquer outro arquivo) e clique nele. Depois que o evento gtm.linkClick aparecer no painel, clique e vá até a guia Variáveis.
Esta variável retorna o nome do arquivo como um valor. Se o link baixado não for um tipo com uma extensão de arquivo, o script retornará “n / a”, que pode ser usada para verificar links de download com erros, por exemplo.
#4. Mobile User
Essa variável personalizada permite distinguir usuários mobile de computadores e tablets. Ele retorna true se o visitante/usuário estiver navegando com um celular (tablets não estão incluídos).
No seu contêiner do Google Tag Manager, acesse Variáveis > Javascript personalizado e insira o código a seguir.
function() {
var a = navigator.userAgent||navigator.vendor||window.opera;
return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))
}
Esse script usa uma expressão regular (emprestada de detectmobilebrowsers.com), que retorna um valor verdadeiro ou falso, dependendo de o usuário estar ou não navegando com um celular.
Exemplo de uso: você pode exibir uma notificação com uma oferta especial / desconto apenas para visitantes em celulares. Neste exemplo, você precisará de:
- Uma tag HTML personalizada que exibe a notificação ou um pop-up (peça ao desenvolvedor para criar um ou use uma ferramenta como Sumo).
- Um acionador de pageview (exibição de página). Isso significa que um acionador será ativado em cada carregamento de página quando o usuário estiver navegando com um celular.
#5. Lookup Table para sites com múltiplos domínios
Eu amo a Lookup Table do GTM. Especialmente quando se trata de gerenciar vários códigos de rastreamento do Google Analytics. Eu poderia escrever um post separado sobre esse tipo de variável, mas tentarei ser o mais breve possível.
Exemplo de uso: você possui 3 lojas online idênticas, mas em domínios diferentes (example.com, example.de e example.co.uk). Todos eles têm o mesmo snippet de contêiner do GTM instalado, mas você quer enviar os dados deles para separar as propriedades do Google Analytics. Como você gerencia os IDs de rastreamento no seu contêiner do Gerenciador de tags do Google?
A maneira mais fácil é utilizar a variável do Lookup Table, que é uma variável que possui o valor de outra variável como entrada. Funciona assim: Quando [variável de entrada] for igual a X, defina [essa variável de saída] como Y.
Aqui está um exemplo prático para tornar as coisas mais claras. Eu escolhi o { {Page Hostname} } como uma Input Variable e configurei as seguintes regras:
- Se o nome do host da página for igual a example.com, mostre o ID de acompanhamento do Google Analytics
UA-XXXXXXX-11. - Se o nome do host da página for igual a example.de, mostre o ID de acompanhamento do Google Analytics
UA-XXXXXXX-22, etc.
Em seguida, posso usar essa variável de Lookup Table nas tags do Google Analytics como código de acompanhamento.
Sugestão: todas as condições na Lookup Table funcionam abaixo de igual a (ou seja, não contém tipos de expressão regular). Portanto, se o nome do host do seu website puder funcionar totalmente com e sem www, adicione os dois nomes de host como variável da Lookup Table:
www.example.com -> UA-XXXXXXX-11
example.com -> UA-XXXXXXX-11
Outro exemplo prático: Onde eu trampo (na data deste artigo) possuímos 4 propriedades diferentes no Google Analytics:
- Todos visitantes;
- Uma para visitante não logados;
- Clientes logados;
- Logados mas não clientes.
Excelente para quem possui um e-Commerce, SaaS ou no caso de onde trabalho Assinantes Recorrentes de um site de cursos.
E separo essas 4 propriedades usando Lookup Table do Google Tag Manager.
Por que é importante?
Assim você pode gerar insights para perfis diferentes de visitantes do seu portal, pois quanto mais você conseguir agrupar perfis de usuários, melhor ficam suas estratégias de marketing e tomadas de decisão.
Use o GA não somente para monitorar tráfego, mas também como uma ferramenta de Business Intelligence.
Mais tarde você poderá usar tais dados para alimentar um algoritmo de Machine Learning, por exemplo.
#6. UTM PARAMETERS
Se você estiver usando parâmetros UTM, convém disparar tags específicas com base em valores específicos de utm_campaign, utm_source, utm_medium e etc.
Como gosto de manter minhas variáveis, tags e triggers em ordem (menino prendado ☺️), geralmente, crio variáveis separadas para cada parâmetro do UTM e, em seguida, uso-as em condições para ativar triggers.
É claro, você pode simplesmente criar uma regra na qual { {URL da página} } contém X ou Y, mas ter parâmetros UTM como variáveis ajuda a manter meu contêiner arrumadinho.
Você pode facilmente transformar os parâmetros do UTM em variáveis do GTM utilizando a variável de URL. Basta ir para Variáveis > Variável de URL e criar 3 variáveis com as seguintes configurações:
Outro caso de uso é salvar valores de parâmetros UTM em cookies ou local storage.
A variável de URL é extremamente versátil e pode ser usada em várias situações.
#7. Largura da Tela
Da mesma forma que a variável de usuários mobile, essa variável nos dá a capacidade de disparar determinadas tags com base na largura da tela do usuário.
Basta criar uma variável JavaScript personalizada e cole o seguinte código:
function() {
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
return width;
}
Atualize o GTM e o seu site. Escolha qualquer evento do GTM no painel e você verá o valor da largura da tela na guia Variáveis.
VARIÁVEIS PERSONALIZADAS DO GOOGLE TAG MANAGER
Esta é apenas uma pequena amostra do poder do GTM. Quanto mais você aprende sobre o Gerenciador de tags do Google, mas você descobre que não sabe de nada.
Neste artigo compartilho meus conhecimentos sobre essas variáveis do Google Tag Manager que são minhas favoritas e úteis para onde estou trabalhando, mas no seu caso pode ser outras que não citei aqui.
Eu uso essas variáveis em quase todos os projetos com os quais estou trabalhando. Elas me permitem criar triggers mais complexos e a depender menos de quem possui acesso ao código-fonte do site.
Para profissionais de marketing é fundamental, pois você depende menos de desenvolvedores.
Quais são suas variáveis personalizadas favoritas no Google Tag Manager? Comenta aí zé!