Cayman Sistemas
PRECISO DE UM SITE
MENU
INÍCIO
SOBRE NÓS
PROJETOS
CONTATO
X
SOLICITAR ORÇAMENTO
Foto Blog

Google Tag Manager: Como instalar e usar

01/06/2020 - Manual de ferramentas Google

Olá! Para poupar o seu tempo nós fizemos um vídeo de 1 min mostrando na prática como instalar e usar o Google Tag Manager. Agora, se você quiser continuar a leitura vou te mostrar como instalar as ferramentas úteis para rastrear o comportamento de usuários no seu site e assim gerar mais resultados. Confere abaixo!

Índice

  1. Como Instalar
  2. Como Usar
  3. Tag do Google Analytics
  4. Variáveis e Acionadores
  5. Como rastrear cliques
  6. Outras funcionalidades
  7. Tag do RD Station

Por que usar o Google Tag Manager?

Se você já está tirando os seus primeiros relatórios no Google Analytics então sabe como é complicado adquirir dados sobre a conversão de usuários no site apenas com acessos em páginas.

Além disso, se você não entende muito bem de código html ou se tem dificuldade pra abrir chamados com seu desenvolvedor a instalação de tags pode se complicar. É aí que entra o Google Tag Manager.

O Google Tag Manager é um programa que funciona para gerenciar tags de rastreamento no seu site – como pixel do Facebook e o Google Analytics, por exemplo.

Com essa ferramenta você consegue criar novas tags sem precisar instalar o código html direto no site e ainda retirar dados valiosos de comportamento dos usuários - como click em links e botões, preenchimento de formulário, rolagem de páginas e outros eventos de valor para o seu marketing digital.

Infelizmente, a Google tem um material muito ruim para ensinar a usar o Google Tag Manager, por isso eu decidi montar esse tutorial prático que vai facilitar as coisas para você!

Como instalar o Google Tag Manager

A instalação do Google Tag Manager é muito parecida com a do Analytics. Você só precisa criar e configurar uma conta do Google, gerar o código html e aplica-lo no lugar certo.

  1. Acesse o Google Tag Manager
  2. Crie uma conta.
  3. Selecione a opção Web na configuração de container;
  4. Acesse o Espaço de trabalho do conteiner;
  5. Clique no código de identificação do container (deixei destacado na imagem abaixo);
  6. Copie os códigos html.
  7. Cole os códigos no local delimitado no html do site (ou envie ao seu desenvolvedor).

instalar tag google tag manager

Assim que a conta estiver criada, a página inicial vai abrir.

Clique no link com o nome do seu conteiner para ser direcionado ao Espaço de trabalho.

Lá você vai ver um código de identificação (sinalizei ele na imagem). Clique no código para abrir a tag.

Cole os códigos nos locais delimitados. O primeiro acida da e o segundo após a no html do seu site.

Se você não sabe fazer isso não tem problema, é só conversar com o desenvolvedor do seu site e pedir que ele inclua o código.

Quem tem site feito no wordpress consegue fazer isso usando o plugin Yoast ou outros plug-ins parecidos.

IMPORTANTE: Apesar de parecido com a tag do Google Analytics, os códigos do Google Tag Manager tem que ser instalados exatamente nas posições especificadas. Se você já tinha o Google Analytics não tem problema, nós vamos te mostrar como substituir uma tag pela outra mais pra frente.

Caso você não tenha conseguido finalizar esse processo deixe um comentário no blog que vamos tentar te ajudar.

Teste se o Google Tag Manager está funcionando

Depois de incluir o código html (ou depois que o seu desenvolvedor avisar que o código foi incluído), selecione o botão “Enviar” no canto superior direito da tela.

Existem 3 procedimentos básicos para testar se está tudo funcionando:

  • Acesse o seu site, clique com o botão direito e selecione Inspecionar;
  • Acesse Network e clique ctrl F5;
  • Procure por “gtm.js” e veja o status.

 

código de confirmação goole tag manager

Se o gtm.js tiver um código 200 quer dizer que está ok! Se tiver um código 404, então aconteceu algum erro, provavelmente porque aplicaram o código no local errado.


Outro jeito fácil é instalar o plug-in do assistente GTM no seu navegador do Google Chrome. Se você fizer isso é só carregar a sua página, clicar no plugin no topo da página e checar se o status é ok (verde).

plugin assistente do Google Tag Manager

ATUALIZAÇÃO OUTUBRO 2020: o Tag Assistant agora também faz parte do sistema interno de testes do Tag Manager. Nós vamos utilizar ele duas vezes nesse manual. Por isso, eu recomendo que você acesse o nosso guia explicando em detalhes como o Tag Assistant funciona para servir de suporte a esse material.


Ok! O Google Tag Manager foi instalado com sucesso! E agora?

Como usar o Google Tag Manager

O GTM é chato de instalar, mas a parte boa é que agora você nunca mais vai precisar instalar outra tag desse jeito complicado.

De agora em diante todas as tags do Facebook, Linkedin, Hotjar, Google podem ser instaladas usando o Google Tag Manager sem precisar abrir o código fonte ou da ajuda de um desenvolvedor. Começando pelo Google Analytics.

Google Analytics

As vantagens de usar o Google Tag Manager ficam mais obvias quando percebemos as possibilidades que ele abre dentro do Google Analytics.

Normalmente, o Google Analytics recolhe apenas dados relativos à visualização de página, sem conseguir recolher dados mais precisos sobre o comportamento do usuário. Já com o Google Tag Manager a coisa fica diferente.

Isso porque o Google Tag Manager capta informações dentro do Data Layer – da base de dados que o usuários deixa pra trás ao interagir com o site.

Com esses dados você pode analisar a fundo o comportamento dos usuários, entender que botões estão sendo clicados, quais formulários estão sendo preenchidos, em que sequência, quando e por quem.

Só usando dados dessa qualidade é possível realmente calcular a rentabilidade das suas campanhas de marketing digital e entender se o layout do site está funcionando ou se precisa ser alterado. Aí que mora o real valor de usar o Google Tag Manager.

Para instalar a tag do Analytics pelo GTM, primeiro você tem que fazer uma conta no Google Analytics.

ATUALIZAÇÃO 01/12/2020

O Google atualizou o Analytics para uma nova versão. Sendo assim, se você vai montar uma nova conta e nunca usou o Analytics antes, nós recomendamos que você siga a instalação no nosso guia do Google Analytics 4. Caso você já tenha uma conta no Analytics e só quer transferí-la para o GTM, continue a leitura abaixo. 

Clique em Administrador>informações de acompanhamento>código de acompanhamento.

Copie o ID de acompanhamento.

Depois volte ao Google Tag Manager:

  1. Clique em Tags;
  2. Clique em Nova;
  3. Clique em configurações da tag;
  4. Selecione Google Analytics – Universal Analytics;
  5. Clique na caixa Configurações do Google Analytics;
  6. Selecione nova variável;
  7. Cole o ID de acompanhamento do Google Analytics;
  8. Clique em Mais Configurações>Campos a serem definidos> Adicionar Campo;
  9. Preencha: anonymizelp / true;
  10. Clique em Salvar. A Tela vai voltar para configurações
  11. Clique em Acionadores
  12. Clique em Todas as Páginas, visualização de página.
  13. Dê um nome para a Tag (Google Analytics)
  14.  Clique em Salvar.

O que nós fizemos aqui foi o seguinte: integramos o Google Tag Manager com o Google Analytics, configuramos os dados que são enviados para o Analytics para garantir a anonimidade do usuário (que agora é lei) e selecionamos o gatilho (acionador) para que ele seja disparado em todas as páginas, assim que o usuário visualizar a página do site.

Se você já tinha uma tag do Google Analytics, o que nós fizemos não vai mudar nada nos resultados que você já estava tirando. O diferente vem daqui pra frente, mas primeiro temos que testar se a tag funcionou.


Como saber se o Google Analytics está funcionando

O Google Tag Manager tem uma ferramenta para testar se as suas tags estão funcionando que se chama Tag Assistant debug mode.

Para ativá-la basta clicar em Visualizar. Você vai ser direcionado para um nova página onde deve incluir o URL do seu site.

visualizar tags

Feito isso, seu site vai se conectar ao Tag Manager. Acessando a aba do Tag Assistant você vai ver todas as suas tags e vai poder checar se elas estão disparando com sucesso.

Como o nosso acionador foi colocado na visualização de página, a tag vai aparecer em  Container Loaded>Tags Fired.

Container loaded tag assistant

Se aparecer o nome da tag e em baixo o status “succeeded” maravilha! Agora só temos que confirmar se o Google Analytics recebeu os dados.

Volte ao Google Tag Manager, saia do modo de visualização, depois clique em “Enviar”. Anote o que você fez (integrei o Google Analytics) nas anotações da versão.

Acesse o Google Analytics. Clique no botão em tempo real>visão geral.
Veja se você está aparecendo como acessando o site. O jeito mais fácil é acessar uma página que ninguém está acessando.

Em tempo real page views Google Analytics

Você está ali? Maravilha funcionou!

IMPORTANTE: Se você já tinha uma tag antiga do Analytics e a sua nova tag está funcionando no Google Tag Manager, você pode (e deve) deletar a tag antiga do Analytics. Isso porque os resultados vão sair errados no seu relatório já que os dados serão contatos duas vezes.


Variáveis e Acionadores


Como o Google Analytics já está integrado, podemos partir para o rastreamento de cliques e formulários.

Como eu comentei antes o Google Tag Manager coleta dados do Data Layer e transfere esses dados para as tags.

O jeito de definir quais dados ele irá coletar é configurando as variáveis as quais ele deve ficar atento.

Para isso clique em Variáveis> Configurar e selecione as caixas que deseja rastrear.

Não selecione todas, foque apenas nos dados que você quer rastrear. No meu caso eu selecionei clique e formulários.

configurar variáveis google tag manager

Ok! Agora nós vamos criar acionadores que vão disparar na hora que esses dados aparecerem no Data Layer. Por exemplo, quando alguém clicar em um botão no site.

Acesse Acionadores>Novo>Configuração do acionador> Clique> Apenas Links.

Nomeei o acionador e salve.

Vamos voltar ao modo Visualizar e acessar o site para testar nosso acionador.

Clique em um botão no site que tem um link.

Se você criou a variável e o acionador do jeito certo, vai aparecer o registro de um Click. Aperte na caixa do clique e então selecione Variables.

debugger do google tag manager

Ali estão todas as variáveis relacionadas ao botão que eu cliquei.
Você pode testar e clicar em vários botões e ver o resultado.

Como rastrear cliques no Google Tag Manager

Ótimo, agora digamos que eu quero que o Analytics registre sempre que um usuário clique num botão de valor - por exemplo, um botão de conversão como “comprar agora” ou “preciso de um site”. Eu só preciso criar uma regra que inclua apenas esses botões na minha análise.

Voltando a aba de Acionadores no Google Tag Manager. Crie um Novo acionador e selecione “Este acionador é disparado apenas em alguns cliques”.

Selecione a regra que desejar baseado nas variáveis do botão que você quer rastrear.

No meu caso eu selecionei os botões que tem o texto “Preciso” porque aí eu vou conseguir pegar todos os botões que levam para a ação de conversão que eu quero rastrear. 

rastrear clique gtm

Eu nomeei esse acionador “Clicks para contato”.

configurando tag no GTM

Agora eu crio a tag que vai mandar o disparo do meu acionador para o Google Analytics.

É só:

  • Acessar Tags>Nova>Google Analytics-Universal Analytics.
  • Configure o tipo de acompanhamento como Evento.
  • Preencha os dados da maneira que for mais prática.
  • Carregue a configuração que você já fez do Google Analytics
  • Selecione o acionador “Clicks para contato” (ou o que for que você tenha nomeado o acionador).
  • Nomeei e salve a Tag.

configuração de tag no gtm


Viu que fácil? (mentira... é difícil pra caramba, mas pelo menos a gente conseguiu).

Se você tem um e-commerce e quer rastrear os botões de “Comprar Agora” ou “Finalizar Compra” é só criar uma regra que inclua apenas esse botão e depois configurar a tag para enviar esses dados para o Analytics.

IMPORTANTE: Você SEMPRE tem que checar se a tag está funcionando no Google Tag Manager e se os dados estão chegando à fonte.

Para confirmar se está tudo certo:

  • Clique no modo Visualizar.
  • Acesse o site.
  • Clique no botão que está sendo rastreado.
  • Acesse a aba “Click” no Tag Assistant e veja se a Tag disparou com sucesso.

teste de clique do GTM

Se estiver tudo certo, saia do modo de visualização e clique em “Enviar” no GTM. Lembre-se de documentar o que você incluiu nessa versão.

Para saber se os dados estão chegando no Analytics, acesse em tempo real>eventos e veja se o evento está sendo gravado no sistema.

teste de evento

Show! Está tudo funcionando!

IMPORTANTE: Caso não funcione tente reenviar a tag e cheque novamente. Se ainda assim o problema permanecer você pode tentar voltar as configurações da tag, clicar em Ativar configuração de modificação nessa tag > Código de acompanhamento e colar novamente o código de acompanhamento alí. Envie novamente a Tag e teste se deu certo.

ATUALIZAÇÃO: Depois de aprender a rastrear eventos pelo Google Tag Manager, fica muito mais fácil configurar metas de conversão no Google Analytics. Eu fiz uma material específico explicando como você pode fazer isso, além de algumas dicas sobre como utilizar as metas do Analytics. Você pode acessar esse material gratuito aqui!


Outras funcionalidades

O processo para configurar tags é sempre o mesmo. Você seleciona a variável que quer analisar, cria o acionador, monta a regra para pegar apenas os eventos certos, aí monta a tag e checa se ela está funcionando no GTM e se os dados estão chegando no sistema final.

Se você ainda ficou com alguma dúvida, ou se está com problemas, comente abaixo que vamos tentar te ajudar.

Várias tags já são configuradas para usar o Google Tag Manager. Você pode encontra-los nas sugestões da Configuração de Tags ao criar uma nova tag, ou ali mesmo na “Galeria de modelos da comunidade”.

A maioria dessas tags é acionada ao carregar a página, então você pode incluir como acionador “Todas as páginas – Ver todas as páginas” sem medo de ser feliz desde que sempre teste se a tag está sendo disparada no GTM e se os dados estão chegando até a plataforma.

Lembrando que você pode usar o plugin assistente do Google Tag Manager para dar uma olhada rápida e garantir que está tudo certo.

Caso você não esteja conseguindo usar uma configuração de tag padrão, você pode também copiar o código html da tag e incluí-lo como HTML personalizado nas configurações da tag.

Depois que você pegou a manha do GTM é importante apagar todas as tags que não estejam dentro do GTM para limpar as linhas de código desnecessárias e evitar o aparecimento de bugs.

Claro só faça isso depois de GARANTIR que as tags no GTM estão funcionando.

Tag do RD Station

Muita gente me pediu, então estou fazendo uma atualização para mostrar como instalar a Tag do RD Station pelo Google Tag Manager.

 

O processo é o mesmo que eu discuti antes. Você só precisa conectar na sua conta do RD Station e, então, clicar (topo direito da tela) em Conta > Configurações > Código de monitoramento. Aqui você vai encontrar o código da sua tag.

código de monitoramento do RD Station

Eu não sei porque, mas algumas contas do RD tem uma função de conexão direta com o Google Tag Manager, enquanto que outras não. Se ao entrar na tela você encontrar a opção, é só clicar em Conectar Google Tag Manager e preencher os dados da sua conta de google que gerencia o GTM. Feito isso, o sistema vai automaticamente gerar a tag. Você pode abrir o Google Tag Manager novamente e vai encontrar um Espaço de trabalho novo que inclui a tag "Código de Monitoramento do RD Station".

Caso a sua versão do RD Station não tenha essa função de conexão automática, você vai precisar selecionar "Eu quero fazer a configuração por conta própria", no RD Station, e copiar o código de monitoramento. Vá até o GTM e crie uma nova tag com HTML personalizado (como eu expliquei no início desse capítulo) e inclua o acionador View All Pages.

Em ambos os casos, vai ser necessário verificar se o código foi instalado com sucesso. Você pode fazer isso direto pelo RD Station, como pode também entrar no modo de visualização do Google Tag Manager e checar se a tag foi disparada com sucesso.

Depois de verificar o código, é bom testar se as integrações estão funcionando. Comece preenchendo um formulário no seu site. No RD Station (topo direito da tela) clique em Integrações > Integrações de formulário > Configurar. O formulário que você preencheu deve aparecer na lista de formulários integrados.

Dica: Aproveite para editar os campos dos formulários integrados e receber dados mais completos dos seus leads!

Se o formulário NÃO apareceu, mesmo com o código verificado com sucesso, então existe algum problema na integração. Você pode resolver isso fazendo a integração do seu site por API com o RD Station (o que é bem complicado se você não é um desenvolvedor) ou pode também entrar em contato com o suporte do RD para tentar descobrir o problema. Boa sorte!

ATUALIZAÇÃO: Como eu sei que muita gente utiliza o Pixel do Facebook, eu fiz um material explicando como instalar e configurar o pixel do facebook utilizando o Google Tag Manager. Você pode conferir esse manual gratuito aqui!

Se você acabou de instalar o GTM eu recomendo que você aproveite para configurar metas no Google Analytics e, logo em seguida, crie e configure uma conta no Google Optimize. Isso vai permitir a melhoria continua do seu layout por meio de teste A/B.

Se você gostou do conteúdo fique à vontade para sugerir e tirar suas dúvidas. Obrigado e até mais!

 

Está precisando de um site?