Como Enviar Eventos com o Google Tag Manager

Com Eventos do Hotjar, você pode enviar eventos para o Hotjar com base em ações ou mudanças que ocorrem em seu site. Esses eventos podem ser usados dentro do Hotjar para disparar as ferramentas do Hotjar ou filtrar dados de Recordings e mapas de calor.

Com o Google Tag Manager (GTM), você pode usar Eventos e Triggers dentro do GTM para enviar eventos para o Hotjar, evitando a necessidade de colocar código adicional manualmente em seu site. Isso é feito criando uma tag HTML personalizada no GTM contendo o código associado ao Evento. Você pode saber mais na documentação do Google sobre Tags personalizadas e Triggers.

Neste artigo, vamos passar pelo processo de envio de Eventos para o Hotjar com o GTM, usando um exemplo em que enviamos um evento quando um usuário clica em qualquer lugar em uma página.

• Como criar uma tag HTML personalizada para enviar um evento para o Hotjar
• Como verificar se um evento está sendo enviado para o Hotjar

Como criar uma tag HTML personalizada para enviar um evento para o Hotjar

O Google Tag Manager deve ser instalado no seu site antes de seguir este guia. Se você ainda não instalou o Google Tag Manager, precisará configurá-lo primeiro. Use o artigo de Configuração e instalação do Tag Manager do Google para aprender como fazer isso.

Crie uma nova tag HTML personalizada no GTM.

Na seção de Tags, clique em Nova.

Clique em Configuração da Tag e escolha HTML Personalizado.

Inclua o script que enviará o evento para o Hotjar no campo HTML.

Neste exemplo, estamos enviando um evento para o Hotjar chamado ‘clique’. Abaixo está o script que incluiremos na seção HTML da tag HTML personalizada. Isso significa que sempre que a tag do GTM for acionada, um evento será enviado para o Hotjar por meio da nossa API de Eventos chamada 'clique'.

<script>
  hj('event', 'clique');
</script>

<script>
  window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments);};
  hj('event', 'clique');
</script>

Clique em Acionadores e aplique o acionador relevante para disparar a tag

Dentro da seção de Acionadores, você também pode clicar no ícone + para adicionar um novo acionador.

Neste exemplo, iremos acionar a tag quando um usuário clicar em 'Todos os Elementos'.

Isso significa que a tag HTML personalizada será acionada quando um usuário clicar em qualquer lugar na página. Quando a tag for acionada, o evento ‘clique’ será enviado para o Hotjar.

Clique em Salvar para confirmar a configuração da sua tag HTML personalizada.

Clique no botão Enviar.

Certifique-se de que as alterações estão sendo aplicadas ao ambiente ao vivo e clique em Publicar.

Veja a próxima seção sobre Como verificar se um evento está sendo enviado para o Hotjar, para testar se o evento está sendo enviado para o Hotjar quando a tag é acionada.

Voltar ao topo

Como verificar se um evento está sendo enviado para o Hotjar

No exemplo acima, configuramos uma tag HTML personalizada para enviar um evento para o Hotjar com base em um clique na página. Agora podemos usar as ferramentas de desenvolvedor do nosso navegador para confirmar se o evento está sendo enviado com sucesso para o Hotjar.

Ative o Modo de depuração do Hotjar.

Qualquer página que tenha o código de rastreamento do Hotjar instalado pode utilizar nossos registros de depuração. Para usar esse recurso, adicione o seguinte parâmetro ao final da URL da sua página da web quando a abrir em seu navegador: ?hjDebug=1

Exemplos:
https://www.hotjar.com/?hjDebug=1
https://www.hotjar.com/?utm=123&hjDebug=1

Abra as Ferramentas de Desenvolvedor do seu navegador e clique na aba Console.

• Para fazer isso no Chrome, na barra de menu clique em Ver > Ferramentas do desenvolvedor > Ferramentas do desenvolvedor
• Para fazer isso no Firefox, na barra de menu clique em Ferramentas > Ferramentas do navegador > Ferramentas de desenvolvimento da web

Assim que o menu das Ferramentas de Desenvolvedor abrir no navegador, selecione a aba Console.

Atualize a página.

Recomendamos recarregar a página depois de ativar o modo de depuração e abrir suas ferramentas de desenvolvedor, para garantir que você esteja vendo todos os registros relevantes que ocorrem quando a página é carregada. Você deve ver várias entradas de log coloridas que se parecem com estas:

Dispare o evento na página.

Realize a ação necessária para disparar o evento. Se você seguiu o exemplo descrito anteriormente neste artigo, pode clicar em qualquer lugar na página para disparar o evento. Se o evento foi enviado com sucesso, você verá ele aparecer na aba Console como neste exemplo:

Se você viu seu evento aparecer com sucesso no Console do navegador, então você terminou! Se não viu ele aparecer, talvez precise revisar suas configurações do GTM para garantir que o código do evento foi implementado corretamente.

Depois de configurar eventos para serem enviados para o Hotjar usando o GTM, você começará a ver os eventos disponíveis para uso nas ferramentas do Hotjar. A partir daqui, você pode atualmente fazer o seguinte com os Eventos do Hotjar:

• Filtrar Recordings por Eventos.
• Filtrar Heatmaps por Eventos.
• Criar um Segmento de Recording que inclui o evento filtrado.
• Segmentar Surveys e widgets de feedback para disparar com base em Eventos.
• Iniciar a captura de sessão com base no disparo de Eventos.

Voltar ao topo

Veja também

• O que são Eventos?
• [Curso] Eventos para Recordings
• Referência da API de Eventos
• Quando usar Eventos e Atributos do Usuário