Cómo enviar eventos con Google Tag Manager

Con Eventos de Hotjar puedes enviar eventos a Hotjar basados en acciones o cambios que ocurran en tu sitio. Estos eventos luego se pueden utilizar dentro de Hotjar para activar las herramientas de Hotjar o filtrar los datos de Grabaciones y Mapas de calor.

Con Google Tag Manager (GTM), puedes utilizar Eventos y Disparadores dentro de GTM para enviar eventos a Hotjar, evitando la necesidad de colocar manualmente código adicional en tu sitio. Esto se hace creando una etiqueta HTML personalizada en GTM que contenga el código asociado con el Evento. Puedes obtener más información en la documentación de Google sobre Etiquetas personalizadas y Disparadores.

En este artículo, te guiaremos paso a paso sobre cómo enviar Eventos a Hotjar con GTM utilizando un ejemplo en el que enviamos un evento cuando un usuario hace clic en cualquier parte de una página.

• Cómo crear una etiqueta HTML personalizada para enviar un evento a Hotjar
• Cómo verificar que se está enviando un evento a Hotjar

Cómo crear una etiqueta HTML personalizada para enviar un evento a Hotjar

Google Tag Manager debe estar instalado en tu sitio antes de seguir esta guía. Si aún no tienes instalado Google Tag Manager, primero necesitarás configurarlo. Utiliza el artículo de Google Configurar e instalar Tag Manager para aprender cómo hacerlo.

Crea una nueva etiqueta HTML personalizada en GTM.

En la sección de Etiquetas, haz clic en Nuevo.

Haz clic en Configuración de etiqueta, luego elige HTML personalizado.

Incluye el script que enviará el evento a Hotjar en el campo HTML.

En este ejemplo, estamos enviando un evento a Hotjar llamado 'click'. A continuación se muestra el script que incluiremos en la sección HTML de la etiqueta HTML personalizada. Esto significa que cada vez que se active la etiqueta de GTM, se enviará un evento a Hotjar a través de nuestra API de Eventos llamado 'click'.

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

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

Haz clic en Disparadores y aplica el disparador relevante para activar la etiqueta

Dentro de la sección de Disparadores también puedes hacer clic en el icono + para agregar un nuevo disparador.

En este ejemplo, activaremos la etiqueta cuando un usuario haga clic en 'Todos los elementos'.

Esto significa que la etiqueta HTML personalizada se activará cuando un usuario haga clic en cualquier parte de la página. Cuando se active la etiqueta, el evento 'click' se enviará a Hotjar.

Haz clic en Guardar para confirmar la configuración de tu etiqueta HTML personalizada.

Haz clic en el botón Enviar.

Asegúrate de que los cambios se estén aplicando al entorno en vivo y haz clic en Publicar.

Consulta la siguiente sección sobre Cómo verificar que se esté enviando un evento a Hotjar, para probar que el evento se esté enviando a Hotjar cuando se active la etiqueta.

Volver arriba

Cómo verificar que se envía un evento a Hotjar

En el ejemplo anterior, configuramos una etiqueta HTML personalizada para enviar un evento a Hotjar basado en un clic en la página. Ahora podemos utilizar las herramientas de desarrollo del navegador para confirmar que el evento se está enviando a Hotjar correctamente.

Habilita el modo de depuración de Hotjar.

Cualquier página que tenga el Código de Seguimiento de Hotjar instalado puede utilizar nuestros registros de depuración. Para utilizar esta función, agrega el siguiente parámetro al final de la URL de tu página web cuando la abras en tu navegador: ?hjDebug=1

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

Abre las Herramientas de Desarrollo de tu navegador y haz clic en la pestaña Consola.

• Para hacer esto en Chrome, en la barra de menú haz clic en Ver > Desarrollador > Herramientas de Desarrollo
• Para hacer esto en Firefox, en la barra de menú haz clic en Herramientas > Herramientas del navegador > Herramientas de desarrollo web

Una vez que se abra el menú de Herramientas de Desarrollo en el navegador, selecciona la pestaña Consola.

Actualiza la página.

Recomendamos recargar la página después de haber habilitado el modo de depuración y abierto tus herramientas de desarrollo, para asegurarte de ver todos los registros relevantes que ocurren al cargar la página. Deberías ver múltiples entradas de registro de colores que se parecen a estas:

Desencadena el evento en la página.

Realiza la acción necesaria para desencadenar el evento. Si seguiste el ejemplo descrito anteriormente en este artículo, puedes hacer clic en cualquier parte de la página para desencadenar el evento. Si el evento se envió correctamente, lo verás aparecer en la pestaña de Consola de esta manera:

Si viste que tu evento apareció correctamente en la Consola del navegador, ¡ya has terminado! Si no lo viste aparecer, es posible que necesites revisar tus configuraciones de GTM para asegurarte de que el código del evento se implementó correctamente.

Después de configurar eventos para ser enviados a Hotjar utilizando GTM, comenzarás a ver los eventos disponibles para su uso en las herramientas de Hotjar. A partir de aquí, actualmente puedes hacer lo siguiente con los Eventos de Hotjar:

• Filtrar Grabaciones por Eventos.
• Filtrar Mapas de Calor por Eventos.
• Crear un Segmento de Grabación que incluya el evento filtrado.
• Dirigir Encuestas y widgets de Feedback para activarse en base a Eventos.
• Iniciar la captura de sesión basada en la activación de Eventos.

Volver arriba

Ver también

• ¿Qué son los Eventos?
• [Curso] Eventos para Grabaciones
• Referencia de la API de Eventos
• Cuándo usar Eventos y Atributos de Usuario