Com o Google Tag Manager, é possível criar eventos para rastrear os cliques em um botão do seu site.
E o melhor, você poderá fazer isso sem precisar ter conhecimento de programação ou alterar qualquer código.
Todos os dados desse evento poderão ser visualizados na conta do Google Analytics vinculado ao seu site.
Antes de começar, algumas considerações:
- Para seguir esse passo a passo, é necessário que você já tenha alguma familiaridade com o Google Tag Manager (GTM), assim como já tenha vinculado seu site ao GTM.
- Também é necessário que você já tenha uma conta no Google Analytics configurada no GTM.
- Recomendo que use o Chrome para seguir o tutorial. É possível fazer em outros navegadores também, mas terá algumas diferenças com o que será ensinado aqui.
Por que é útil rastrear os cliques de um botão no site?
Digamos que no seu site tenha uma página com muitos acessos e seu objetivo é fazer com que os visitantes entrem em contato com você.
Para isso, você insere um botão (call to action) que dá acesso para a página de contato.
Fazendo o rastreamento de cliques do botão, você saberá quantos acessos para o formulário de contato foram gerados a partir de um call to action específico.
Com isso, você terá controle dos dados para saber se o call to action está sendo efetivo e fundamentação para fazer testes visando aumentar o número de cliques.
O tutorial para rastrear um clique no botão do site no Google Tag Manager terá os seguintes passos:
- Copiar as classes do botão
- Habilitar variável no Tag Manager
- Criar Acionador
- Criar Tag
- Visualizar teste no site
- Visualizar evento no Google Analytics
- Publicar a tag
1. Copiar as classes do botão
Com o seu site aberto no Chrome, clique com o botão direito do mouse e clique na opção Inspecionar.
Selecione o botão do seu site que deseja rastrear, e localize no código fonte a classe do link do botão que aparece no painel Inspecionar.
Copie a classe do link do botão, se tiver mais de uma classe, copie todas. É a partir dessa classe que será feito o rastreamento.
2. Habilitar variável no Tag Manager
Acesse o Tag Manager no contêiner do seu site e clique no item Variáveis, que está localizado no menu da esquerda.
Clique no botão Configurar no lado direito.
Após abrir o painel, role até encontrar a guia Cliques e deixe marcada a opção Click Classes e feche o painel.
Nesse tutorial vou utilizar uma classe de CSS para fazer o rastreamento, mas também é possível fazer utilizando um ID, por exemplo.
3. Criar acionador
Clique em Acionadores no menu da esquerda.
A tag será acionada a partir de uma determinada condição for disparada. É aqui que colocamos a classe do botão copiada no código fonte.
Clique no botão Novo.
Dentro do painel, defina um nome para o gatilho e em seguida clique em Configuração do acionador.
Escolha o tipo de acionador Apenas links.
Nas opções de Este acionador é disparado em, marque a opção Alguns clique em links, com isso você definirá que a tag restreie apenas o botão desejado.
Escolha a variável Click Classes no primeiro menu suspenso, no seguinte escolha contém e então insira no campo a classe do link do botão.
Se o botão tiver apenas uma classe, coloque um ponto antes (ex: .classe-botao); porém, deixe sem ponto se o botão tiver mais classes (ex: classe-botao botao-contato botao-verde). Depois, clique em Salvar.
4. Criar tag
Acesse Tags no menu da esquerda e clique no botão Nova.
Dê um nome para a tag e em seguida clique em Configuração da tag. No painel, escolha a primeira opção Google Analytics: Universal Analytics.
Ao definir esse tipo de tag, será possível visualizar os dados do rastreamento no Google Analytics.
Em Tipo de acompanhamento, escolha Evento. Ao escolher essa opção, abrirá alguns campos para você definir como os cliques do botão serão apresentados no Google Analytics.
Recomendo que insira o nome da Categoria, o tipo da ação no campo correspondente e o rótulo. Esses nomes podem ter espaço e acento.
Em Configurações do Google Analytics, selecione a variável com o ID de acompanhamento do Google Analytics do seu site.
Na caixa abaixo, clique em Acionamento.
Abrirá o painel com os acionamentos, selecione o acionador criado anteriormente e clique em Salvar.
5. Visualizar teste no site
Com tudo feito, é hora de saber se a tag está funcionando corretamente antes de publicar.
Clique no botão Visualizar no canto superior direito e, após o carregamento da página, abra seu site na página onde está o botão rastreado.
Com o painel do GTM aberto na parte inferior do seu site, clique no botão que será rastreado segurando Ctrl no teclado (⌘ se estiver usando Mac), isso abrirá o link do botão em uma nova aba. Se você não abrir o link em outra aba, será mais difícil visualizar no painel se a tag foi acionada.
Dessa forma, você poderá visualizar no painel do GTM se a tag foi acionada, igual a imagem abaixo:
Se você clicar sobre a tag, aparecerá a confirmação de tudo que foi rastreado com sucesso.
6. Visualizar evento no Google Analytics
Se a tag funcionou corretamente, o clique no botão deverá ser registrado pelo Google Analytics.
Acesse o Google Analytics no menu Tempo Real > Eventos.
Deverá aparecer um registro semelhante a imagem abaixo.
7. Publicar a tag
Com tudo funcionando, é hora de publicar sua tag!
Volte para o GTM, clique no link da caixa laranja Sair do modo de visualização.
Após o recarregamento da página, é só clicar em Enviar no canto superior direito, opcionalmente preencher o campo com a descrição da tag criada e pronto!
Está tudo configurado para rastrear os cliques de um botão do seu site.
A visualização dos dados de cliques no Google Analytics fica dentro do menu Comportamento > Eventos > Principais eventos.
