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

27/07/2021 - 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. Porque Usar
  2. Como Instalar
  3. Como Usar
  4. Variáveis e Acionadores
  5. Outras funcionalidades

Por que usar o Google Tag Manager?

Para que o seu site gere vendas para a sua empresa, você precisa entender como os usuários estão interagindo com as páginas.

Isso se faz com a ajuda de vários sistemas. Você já deve conhecer alguns como Pixel do Facebook, Google Analytics, Hotjar e por aí vaí.

O problema é que para que esses sistemas consigam ver a atividade dos usuários dentro do site é necessário que você instale um "código de monitoramento" (também conhecido como pixel, tag ou widget).

Esse código precisa ser instalado, geralmente por alguém que manja de programação, ou um funcionário do T.I. o que dá um trabalho enorme se você usa muitos códigos.

Além disso, se acontece algum problema na captação dos dados, fica difícil saber o que está acontecendo e como resolver.

Foi aí que a Google decidiu desenvolver o Tag Manager, ou Gerenciador de Tags.

Nele você consegue criar vários códigos de monitoramento diferentes sem precisar programar uma linha de código.

Sem contar que dá pra testar todos os novos códigos adicionados para ter certeza que eles estão funcionando direitinho.

Infelizmente, a Google tem um material muito ruim para ensinar o uso do 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).

https://www.cayman.com.br/banco/02062020113425000000632293/instalar o google tag manager.JPG

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), então:

  • Clique Pré-Visualizar no topo direito da tela.

https://www.cayman.com.br/banco/28102020145704000000197578/Capturar6.JPG

  • Coloque o endereço url do seu site e veja se o Tag Assistant se conectou com sucesso.

tag assistant conectado

Se deu certo, pule para o próximo capítulo.

Se não deu certo, então:

  • 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.

https://www.cayman.com.br/banco/01062020115608000000337811/gtm código de confirmação goole tag manager.png

Se o gtm.js for um código 200 quer dizer que está ok! Pule para o próximo capítulo.

Se aparecer um código 400, então aconteceu algum erro, provavelmente porque aplicaram o código no local errado.

Caso isso aconteça, peça para o programador instalar o código novamente e garanta que ele colocou as partes do código no local correto.

Outro jeito fácil de checar é 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).

https://www.cayman.com.br/banco/01062020113754000000589568/plugin google tag manager.png

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ário 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.

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

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áginasvisualizaçã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.

O Google atualizou o Analytics para uma nova versão (Google Analytics 4 ou GA4).

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 transferi-la para o GTM, como mostraremos abaixo.

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.

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  Summary > Tags Fired.

Se aparecer o nome da tag e em baixo o status “succeeded” ou "fired 1" 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 no botão azul “Enviar”, no topo direito da tela
  • e, depois "Publicar".
  • 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).

https://www.cayman.com.br/banco/01062020115557000000571247/em tempo real google analytics.png

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.

https://www.cayman.com.br/banco/0106202011372400000062343/tags google tag manager.png

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 seu site que tem um link (que direciona para outra página).

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.

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.

Eu nomeei esse acionador “Clicks para contato”.

https://www.cayman.com.br/banco/01062020113631000000681106/configurar acionador google tag manager.png

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.

https://www.cayman.com.br/banco/01062020113617000000855713/configurar tag google tag manager.png

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.

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.

https://www.cayman.com.br/banco/01062020115525000000339525/rastrear evento google analytics.png

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.

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.

https://www.cayman.com.br/banco/0406202013401000000097107/escolher a tag.JPG

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.

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!

 

Solicitar orçamento de um site