Os sete passos para configurar o Google Tag Manager

Os sete passos para configurar o Google Tag Manager e nunca mais precisar de um programador para mensurar seus resultados

Você provavelmente já ouviu falar nele, tem curiosidade de saber como funciona, mas acha que é muito complicado… Foi pensando nos muitos usuários como você que criamos esse guia com os sete passos para configurar o Google Tag Manager. Você vai ver que é super simples de fazer e você não vai precisar de ajuda nenhuma (ou quase nenhuma).

Uma vez com o GTM instalado no seu site, você vai conseguir criar suas Tags, mapear os eventos gerados pelos seus usuários e mensurar o que for do seu interesse. A seguir nós vamos te ensinar a: criar a sua conta, fazer a configuração inicial, publicar o seu container, cadastrar suas primeiras variáveis, criar seus acionadores e configurar as Tags. Por fim, vamos te ensinar como usar o modo de visualização e publicar a primeira versão do seu container. Está pronto? Então vamos lá:

Passo 1: Crie sua conta

Parece obvio, mas o primeiro passo é acessar https://tagmanager.google.com e clicar em “Criar Conta”.

criar conta

Passo 2: Faça a configuração inicial da sua conta

As primeiras informações que você vai precisar fornecer para o Google são o Nome da Conta e os dados do Container. Importante: uma mesma conta pode conter vários Containers. Se você administra vários sites, por exemplo, você pode querer criar uma única Conta (com o nome da sua empresa, por exemplo) e depois criar um container para cada site.

Se você é um prestador de serviços, em geral recomendamos que você crie uma conta para cada cliente, mesmo que em cada uma delas você crie apenas um Container. Isso pode evitar problemas no futuro, acredite.

Uma dica: muitas pessoas confundem o “Nome da Empresa” com o endereço do site. Por uma questão de organização nossa sugestão é que você não configure dessa forma. Assim, caso você precise de mais de um container na mesma conta, as coisas ficarão mais organizadas. Exemplo: suponha que aqui na Adalov nós temos dois sites diferentes: adalov.com e cursosadalov.com. Nesse caso, preferiríamos ter uma única conta (Adalov) com dois containers (um de cada site).

configuração inicial

Nos dados do Container, você terá que definir o Nome e o Tipo.

Novamente, fica a dica: o nome não precisa ser o endereço do site. Tomando como base o exemplo dado antes, eu posso ter um Container com o nome “Site Institucional” e o outro chamado “Cursos”.

Tipos de Container

Em relação ao Tipo do Container, você terá quatro opções: Web, iOS, Android e AMP. O tipo que nos interessa no momento é o Web. Os demais são utilizados em Apps ou em páginas criadas usando o Accelerated Mobile Pages do Google (mas essas são tema pra outro post). Voltando à nossa configuração, você tem então que dar o Nome do Container e escolher o tipo Web. Depois basta clicar no botão “Criar”.

tipo container

Passo 3: Inserindo o snippet (script) do Tag Manager no seu site

Você está quase pronto para começar a usar o GTM a seu favor. Esta é a única etapa que pode te gerar alguma complicação, mas fica tranquilo que vamos te ajudar a superar esse pequeno obstáculo.

Se você tem acesso ao código fonte do seu site ou então utiliza alguma plataforma de construção de sites (WordPress, Wix, Google Sites, etc) basta agora inserir o snippet (script) que ele te fornece assim que você cria a conta e seguir as instruções. Você vai notar que parte dele deve ser inserido dentro do <head> do seu site e a segunda parte dentro do <body>.

snippet google tag manager

Se você não entendeu nada do último paragrafo, não tem acesso ao código fonte ou não usou alguma plataforma de construção de sites, então você precisará de uma rápida ajuda (no máximo cinco minutos) de um desenvolvedor. É algo realmente muito simples!

Separamos aqui alguns links que podem te ajudar, caso você tenha utilizado alguma das plataformas citadas para construir seu site:

WordPress: http://bit.ly/31YgIFb

Wix: http://bit.ly/31YguOl

Passo 4: Criando variáveis

Agora que você já criou sua conta e já instalou o script do Tag Manager no seu site, está pronto para começar a mensurar tudo o que acontece lá! Como pontapé inicial, vamos inserir as Variáveis. Existem dois tipos delas: as “incorporadas” (que já vem pré-configuradas pelo GTM) e as “definidas pelo usuário”. Para visualizar essa área do GTM basta clicar no item correspondente no menu à esquerda. Você deve visualizar uma tela assim:

criar variaveis

A primeira coisa a fazer é clicar em “Configurar” na área de Variáveis incorporadas. Uma lista de possíveis variáveis vai se abrir e nossa recomendação é que você selecione pelo menos essas aqui, que lhe serão úteis no futuro: Click ID, Click Classes, Click URL, Form ID e Form Classes. Selecione essas variáveis e espere que o próprio GTM salve essa alteração. Depois é só clicar no “X” para fechar essa tela.

variaveis incorporadas

Uma outra função dessa tela é opcional, porém recomendável: criar variáveis personalizadas. Vamos ilustrar aqui um exemplo de criação da variável com um ID do Google Analytics. Para isso, clique no botão “Nova” na tela de variáveis. Uma tela lateral se abrirá e você deverá ver algo assim parecido com a imagem abaixo:

variavel analytics

Clique na opção “Configurações do Google Analytics”:

Defina um nome para sua variável personalizada e preencha o ID de Acompanhamento (seu código UA do Analytics). Depois clique em Salvar. É esse nome de variável que você utilizará no futuro em configurações de Tags/Acionadores.

variavel analytics

Passo 5: Criando Acionadores

Esse passo é talvez o mais importante de todo esse guia de iniciação no Tag Manager. Saber configurar os acionadores (triggers) é fundamental para conseguir criar Tags que funcionarão corretamente. Afinal de contas, como o próprio nome já indica, são eles que acionam as Tags.

Assim como na criação de variáveis, comece clicando na opção correspondente no menu à esquerda. Você notará que, por padrão, não há nenhum Acionador configurado no seu Tag Manager. Vamos criar o primeiro deles então, clicando no botão “Novo” na tela inicial da seção:

acionadores

Na tela de configuração de um novo Acionador você deverá dar um nome a ele e também escolher o seu tipo clicando na seção “configuração do acionador”. Ao fazer isso, uma tela de seleção se abrirá à direita (ver imagem abaixo) e você poderá escolher dentre várias opções. Aqui no nosso exemplo, queremos criar um acionador de “Exibição de Página”. Ou seja: sempre que determinada(s) página(s) for exibida, nosso acionador disparará.

acionador pageview

Depois de selecionar o tipo do nosso Acionador, você tem que realizar a configuração do mesmo, escolhendo em que situações ele é disparado e especificando-as. No nosso exemplo, queremos um acionador que dispare apenas em algumas páginas, sendo que a condição de sucesso é que a página contenha a palavra “obrigado” na sua URL. Estamos nos baseando, por exemplo, numa página de agradecimento pelo envio de um formulário.

pagina obrigado

No seu dia a dia você provavelmente utilizará muitos acionadores desse tipo, mas também vários outros como o de que Cliques ou Envio de Formulário (muito útil quando não existe uma “página de obrigado”)

Depois de finalizar a configuração do seu Trigger, basta clicar em “Salvar”.

Passo 6: Criando Tags

Chegamos ao penúltimo passo do guia sobre configurar o Google Tag Manager. Este passo é aquele que é aquele que sintetiza todo o trabalho feito até então. É através de criação de Tags que você vai poder mensurar eventos que acontecem no seu site, sejam eles uma visualização de página, um clique num botão, um scroll de página, uma conversão… enfim! Qualquer coisa que um usuário faça na sua página poderá ser mensurado se você tiver uma Tag configurada para isso.

Assim como na página de Acionadores, ao clicar em Tags no menu esquerdo, você verá que não há nenhuma pré-configurada. Aqui no nosso exemplo vamos criar duas Tags diferentes:

  1. Tag de Pageview do Analytics (para que o Google Analytics monitore todas as suas páginas)
  2. Tag de Conversão do Analtics (evento personalizado que ocorre apenas quando nosso Acionador é disparado)

Primeira Tag

Depois de clicar no botão “Nova” e clicar em “Configuração da Tag”, você terá um menu lateral à direita para selecionar o tipo de Tag que deseja criar. Conforme falamos, primeiro vamos criar uma Tag de Monitoramento do Google Analytics. Para isso selecione a primeira opção do menu à direita.

tag analytics

Uma vez selecionado o tipo de Tag, temos que detalhar a configuração da mesma. O objetivo desta que estamos criando agora é justamente garantir que o Google Analytics está monitorando todas as páginas do seu site. Então o “Tipo de Acompanhamento” deverá ser igual a “Visualização de Página”. Além disso, dentro do campo “Configurações do Google Analytics” você deverá selecionar a Variável com o código do Analytics que criamos no Passo 4 deste guia (lembra dela?). Caso não tenha criado, basta selecionar a opção “Nova Variável” e criá-la.

criar tag analytics

Agora falta apenas um passo para terminar de configurar a nossa Tag: definir o acionamento da mesma! Ao clicar nessa área, uma tela se abrirá com a sua lista de acionadores. Existe um Acionador nativo do Tag Manager que é o “All Pages” (ou seja: todas as páginas). Na prática ele significa que você está afirmando que quer que essa Tag seja acionada em todas as páginas. Como é exatamente isso que nós queremos nesta Tag, é esse acionador que vamos selecionar:

tag all pages

Pronto, agora basta salvar a sua Tag (não esqueça de dar um nome!) e já temos a primeira criada.

Segunda Tag

Vamos agora criar uma Tag de conversão dentro do Analytics. O procedimento é basicamente o mesmo, exceto por duas diferenças:

– Tipo de Acompanhamento será “Evento”, onde você poderá dar um nome do seu agrado para a Categoria, Ação e Rótulo do seu Evento. Esses nomes irão aparecer no Google Analytics e será a maneira de você mensurar a quantidade de acionamentos da sua Tag. Mesmo sendo campos de livre escolha, o ideal é que você pense numa lógica por trás desses títulos. Você verá no nosso exemplo que usamos o nome “Formulário” na categoria, “Envio” na ação e “Sucesso” no rótulo. Isso porque estamos simulando uma situação onde a “página de obrigado” é aquela para a qual o usuário é direcionado toda vez que finaliza o envio de um formulário com sucesso.

– O Acionador será aquele que criamos antes (“Página de Obrigado”) ao invés de “All Pages”. Ou seja: essa Tag apenas será disparada quando algum usuário acessar uma página que tenha “obrigado” na sua URL.

tipo acionador

Finalizada essa configuração, você pode salvar essa sua nova Tag e pronto! Já temos duas Tags implementadas.

Passo 7: Usando o modo de visualização e publicando suas Tags

Bom, agora que já passamos por todas as etapas necessárias para configurar o Google Tag Manager, você poderá publicar seu Container e começara a mensurar os eventos através das Tags que criou. Porém, a nossa recomendação é que você sempre ative o modo de visualização antes de publicar qualquer nova Tag ou mesmo alterações em outras que já existiam. Para fazer isso, basta clicar no botão “Visualizar” no canto superior direito (ao lado de “Enviar”).

modo visuzalizacao

Após ativar o modo de visualização, você vai ver o que acontece na sua tela: nada! 🙂

Esse modo faz com que o Tag Manager ative um Debug na sua página. Ele irá te exibir quais Tags estão ou não estão sendo disparadas. Então você pode abrir uma outra janela do seu navegador e acessar o seu site. Na parte inferior da tela se abrirá o visualizador do Tag Manager. Abaixo exibimos um exemplo de uma página já tagueada (com várias tags). Você vai reparar que estão separadas em duas categorias: as que foram disparadas naquela página em que você está agora e as que não foram.

debug google tag manager

No nosso exemplo, deveríamos então acessar a página do site onde está o formulário de contato e veríamos apenas a Tag “Universal Analytics – Pageview” tendo sido disparada. E depois de preencher o formulário e enviar com um teste, ao sermos direcionados para a página de obrigado, veríamos ambas as Tags sendo disparadas: tanto a de Pageview quanto a de Conversão.

Dica: não esqueça de desativar o modo de visualização depois que tiver feito todas as verificações. Você pode fazer isso clicando em “Sair do modo de visualização” no box laranja que apareceu depois que você o ativou. Também é importante ressaltar que caso você faça alguma alteração em qualquer elemento (Tags, Acionadores ou Variáveis), você precisa clicar em Atualizar para que essas mudanças impactem o modo de visualização.

desativar debug

Depois de validar se as Tags estão funcionando como deveriam, chegou finalmente o momento de publicar nosso Container! Para isso, de volta no Tag Manager, clique no botão “Enviar” e você será direcionado para a tela de publicação. Nela você terá que escolher um Nome para essa versão da publicação. Também poderá adicionar uma descrição do que está sendo feito nessa publicação. Recomendamos fortemente que sempre descreva detalhadamente o que fez. Ficará muito mais fácil consultar o seu histórico de versões no futuro. Depois de preencher os campos, clique em “Publicar” e pronto: as Tags já estarão ativas no seu site!

publicar

Agora que você já publicou suas primeiras Tags, acompanhe o tráfego de visitas ao site e os Eventos de conversão. Acesse o Google Analytics e veja todos esses dados lá!

E aí, o que achou do nosso passo a passo para configurar o Google Tag Manager e começar a utilizá-lo? Se você gostou do conteúdo, se inscreve na nossa newsletter ou no nosso Bot do Facebook Messenger e seja avisado toda vez que publicarmos novos artigos.

Ah! E se você leu isso tudo, mas ainda não entende direito quais as vantagens de usar o Google Tag Manager, então dá uma olhada nesse outro post.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *