Este guia explica como usar o Google Tag Manager (GTM) para rastrear cliques em botões específicos no seu site Discourse, como “Inscrever-se”, “Entrar” ou “Responder”.
Nível de usuário necessário: Administrador com acesso ao Google Tag Manager
Rastrear cliques em botões com o Google Tag Manager
Rastrear como os usuários interagem com botões específicos fornece dados valiosos para entender o comportamento do usuário e os caminhos de conversão. Embora o Discourse rastreie muitos eventos nativamente, você pode querer monitorar elementos específicos da interface do usuário, como o botão “Inscrever-se”. Usar o modo de visualização do Google Tag Manager (GTM) é a maneira mais eficiente de identificar os elementos corretos e configurar gatilhos precisos.
Resumo
Para rastrear um botão específico, você deve primeiro identificar como o GTM “vê” esse botão quando ele é clicado. O processo envolve habilitar variáveis de clique, criar um gatilho de depuração genérico, usar o Tag Assistant para identificar as propriedades exclusivas do elemento e, em seguida, criar uma tag específica para esse botão.
Habilitar variáveis de clique
Antes de poder rastrear cliques, você deve garantir que o GTM esteja capturando os dados necessários do navegador.
- Navegue até Variáveis no seu espaço de trabalho do GTM.
- Selecione Configurar.
- Na seção Cliques, marque todas as caixas disponíveis:
Elemento de Clique,Classes de Clique,ID de Clique,Destino de Clique,URL de CliqueeTexto do Clique.
Criar um gatilho de clique genérico
Você precisa de um gatilho “curinga” para ver todos os eventos de clique no console de depuração enquanto estiver testando.
- Navegue até Gatilhos e selecione Novo.
- Clique em Configuração do Gatilho e escolha Clique - Todos os Elementos.
- Selecione Todos os Cliques.
- Nomeie o gatilho como “Todos os Cliques - Depuração” e Salvar.
Usar a extensão Tag Assistant
A extensão Tag Assistant Companion ajuda você a rastrear exatamente qual elemento o GTM recebe quando você interage com seu site.
- Instale a extensão no seu navegador.
- No seu espaço de trabalho do GTM, selecione Visualizar no canto superior direito.
- Insira o URL do seu site (
discourse.example.com) e clique em Conectar.
Identificar elementos de botão específicos
Assim que a janela de visualização estiver aberta, você pode encontrar os identificadores exclusivos para o seu botão de destino.
- Clique no botão que você deseja rastrear (por exemplo, o botão Inscrever-se) no seu site.
- Volte para a aba Tag Assistant.
- Localize o evento de Clique mais recente no painel de resumo à esquerda.
- Selecione a aba Data Layer para ver as propriedades do elemento clicado.
Para segmentar especificamente o botão Inscrever-se, você pode usar sua classe exclusiva: sign-up-button.
Ao criar seu gatilho permanente, use um Seletor CSS para garantir que ele capture cliques mesmo que o usuário clique no texto dentro do botão. Para o botão Inscrever-se, use:
button.sign-up-button, button.sign-up-button *
O * (curinga) no final do seletor garante que, se um usuário clicar no span de texto dentro do botão, o gatilho ainda será acionado.
Melhores práticas
- Use nomes descritivos: Nomeie seus gatilhos e tags claramente, como “GA4 - Evento - Clique no Botão Inscrever-se”.
- Teste anonimamente: Ao testar cliques em botões como “Inscrever-se”, geralmente é melhor usar uma janela anônima ou sair do seu site Discourse para garantir que o botão esteja visível.
- Valide antes de publicar: Sempre verifique o painel Resumo no Tag Assistant para confirmar que sua tag específica é acionada somente quando o botão pretendido é clicado.