, 
ou 
planos. Disponível para Feedback e Pesquisas com Ask Com os 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 acionar as ferramentas do Hotjar ou filtrar dados de Gravação e Mapa de Calor.
Com o Google Tag Manager (GTM), você pode usar Eventos e Acionadores dentro do GTM para enviar eventos para o Hotjar, evitando a necessidade de colocar manualmente código adicional em seu site. Isso é feito criando uma tag HTML personalizada no GTM contendo o código associado ao Evento. Você pode aprender mais na documentação do Google sobre Tags personalizadas e Acionadores.
Neste artigo, vamos passar pelo envio de Eventos para o Hotjar com o GTM usando um exemplo onde enviamos um evento quando um usuário clica em qualquer lugar de 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
Não oferecemos suporte para solução de problemas com Eventos no GTM
Este artigo está disponível para ajudá-lo sobre o que você pode precisar fazer para enviar eventos para o Hotjar via GTM. Cabe a você e à sua equipe de desenvolvimento implementar essa funcionalidade da maneira que melhor atenda às suas necessidades.
Como criar uma tag HTML personalizada para enviar um evento ao Hotjar
O Google Tag Manager deve ser instalado em seu site antes de você seguir este guia. Se você ainda não instalou o Google Tag Manager, precisará configurá-lo primeiro. Use o artigo Configurar e instalar o Gerenciador de Tags do Google para aprender como.
Crie uma nova tag HTML personalizada no GTM.
Na seção Tags, clique em Novo.
Clique em Configuração de Tag, depois escolha HTML personalizado.
Inclua o script que enviará o evento para o Hotjar no campo HTML.
Neste exemplo, estamos enviando um evento chamado ‘click’ para o Hotjar. Abaixo está o script que incluiremos na seção HTML da tag HTML personalizada. Isso significa que sempre que a tag GTM for acionada, um evento será enviado para o Hotjar através da nossa API de Eventos chamada 'click'.
<script>
hj('event', 'click');
</script>
O Código de Rastreamento do Hotjar precisará ser carregado em sua página antes do seu código de evento
Ao usar uma tag HTML personalizada do GTM, o código window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments);}; deve ser adicionado dentro das mesmas tags <script> que o seu código de Evento, logo acima do Evento. Por exemplo:
<script>
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments);};
hj('event', 'click');
</script>Se você não incluir o código dentro das tags <script>, ele pode aparecer em seu site como texto, pois o GTM o injetará como HTML regular.
Clique em Acionamento e aplique o acionador relevante para disparar a tag
Na seção Acionamento, você também pode clicar no ícone + para adicionar um novo acionador.
Neste exemplo, acionaremos a tag para disparar quando um usuário clicar em 'Todos os Elementos'.
Isso significa que a tag HTML personalizada será disparada quando um usuário clicar em qualquer lugar da página. Quando a tag for disparada, o evento ‘click’ 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.
Como verificar se um evento está sendo enviado para o Hotjar
No exemplo acima, nós configuramos uma tag HTML personalizada para enviar um evento para o Hotjar com base em um clique na página. Agora podemos usar nossas ferramentas de desenvolvedor do navegador para confirmar que o evento está sendo enviado para o Hotjar com sucesso.
Ative o Modo de depuração do Hotjar.
Qualquer página que tenha o Código de Rastreamento do Hotjar instalado pode utilizar nossos logs de depuração. Para utilizar este recurso, adicione o seguinte parâmetro ao final da URL da sua página da web quando você a abrir no seu navegador: ?hjDebug=1
Exemplos:
https://www.hotjar.com/pt-BR/?hjDebug=1
https://www.hotjar.com/pt-BR/?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 Visualizar > Desenvolvedor > Ferramentas do Desenvolvedor
- Para fazer isso no Firefox, na barra de menu clique em Ferramentas > Ferramentas do Navegador > Ferramentas de Desenvolvedor Web
Uma vez que o menu Ferramentas de Desenvolvedor abre no navegador, selecione a aba Console.
Atualize a página.
Recomendamos recarregar a página depois de ter ativado o modo de depuração e aberto suas ferramentas de desenvolvedor, para garantir que você está vendo todos os logs relevantes que ocorrem quando a página é carregada. Você deve ver várias entradas de log coloridas que se parecem com estas:
Acione o evento na página.
Realize a ação necessária para acionar o evento. Se você seguiu o exemplo descrito anteriormente neste artigo, você pode clicar em qualquer lugar na página para acionar o evento. Se o evento foi enviado com sucesso, você verá aparecer na aba Console assim:
Se você viu seu evento aparecer com sucesso no Console do navegador, então você terminou! Se você não viu aparecer, pode ser necessário 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 Gravações por Eventos.
- Filtrar Mapas de Calor por Eventos.
- Criar um Segmento de Gravação que inclua o evento filtrado.
- Direcionar Pesquisas e widgets de Feedback para serem acionados com base em Eventos.
- Iniciar captura de sessão com base no acionamento de Eventos.