Guía de Hotjar y Google Tag Manager para optimizar tu sitio

¿Quieres ver el contenido de la página? Mostrar

Actualizado: 29 de diciembre de 2019. Si estás interesado en monitorear a los visitantes de tu sitio web y visualizar esos datos en forma de mapas de calor, entonces Hotjar es la herramienta adecuada para ti. Esta herramienta no solo permite crear mapas de calor, sino que también ofrece la opción de ver la profundidad de desplazamiento, crear embudos, realizar encuestas a tus visitantes y mucho más.

En este artículo, exploraremos cómo Hotjar y Google Tag Manager (GTM) se complementan, proporcionando una guía detallada sobre su integración y cómo maximizar su uso. A menudo, las guías en línea se enfocan únicamente en el proceso de instalación, pero aquí profundizaremos en aspectos como el seguimiento de eventos y la etiquetación de sesiones, entre otros.

¿Qué es Hotjar?

Hotjar es una herramienta de análisis y retroalimentación muy popular utilizada por empresas líderes como Unbounce, Invision, Autodesk, Microsoft y muchas otras. Sus características principales incluyen:

Análisis:
- Generación de mapas de calor (basados en clics, desplazamientos y movimientos del ratón).
- Grabación de sesiones de usuarios, permitiendo ver su interacción a nivel individual y cómo navegan por tu sitio.
- Seguimiento de embudos de conversión, que aunque se basa en vistas de página, se puede adaptar para un análisis más profundo.
- Evaluación del compromiso con formularios, lo que permite optimizar su diseño y funcionalidad.
Retroalimentación:
- Recopilación de comentarios de los usuarios a través de encuestas y formularios.
- Ejecutar encuestas y sondeos para comprender mejor las necesidades y expectativas de los visitantes.
- Invitar a los visitantes a pruebas de usuario en vivo mediante compartir pantalla para observar cómo utilizan realmente tus páginas.

Para obtener más información sobre Hotjar y sus funcionalidades, puedes visitar su sitio oficial.

Instalación de Hotjar a través de Google Tag Manager

Instalar Hotjar mediante Google Tag Manager es un proceso simple, especialmente si solo necesitas las funcionalidades básicas como grabaciones y mapas de calor. Existe una plantilla de etiqueta lista para usar en Google Tag Manager que facilita mucho este proceso.

Antes de comenzar, es necesario registrarse en Hotjar, donde podrás elegir entre planes gratuitos y de pago. Una vez completado el registro, se te pedirá que agregues el código de seguimiento a tu sitio web.

Hay dos formas de hacerlo: puedes crear una etiqueta HTML personalizada y pegar el código completo, o simplemente usar el ID del sitio y una plantilla de etiqueta predefinida. Para simplificar, utilizaremos la plantilla de etiqueta de Hotjar.

Primero, copia el ID del sitio de Hotjar y luego inicia sesión en tu cuenta de Google Tag Manager. Dirígete a Etiquetas > Nueva. En la configuración de la etiqueta, selecciona Código de seguimiento de Hotjar y pega el ID del sitio que copiaste anteriormente.

En la sección de activadores, elige Todas las páginas. Guarda la etiqueta y activa el modo de vista previa y depuración para verificar que la etiqueta de Hotjar se active correctamente al navegar por tu sitio. Una vez que todo esté en orden, publica el contenedor y regresa a Hotjar para confirmar la instalación.

Seguimiento de páginas en sitios web de una sola página con Hotjar y GTM

Las Aplicaciones de Página Única (SPA) son sitios que cargan todos los recursos necesarios en la primera carga de la página, lo que significa que, mientras el usuario interactúa, el contenido adicional se carga dinámicamente sin recargar la página. Esto puede complicar el seguimiento tradicional de páginas, ya que la mayoría de las herramientas analíticas solo registran una vista de página principal.

Es común que las SPAs utilicen fragmentos de URL que cambian a medida que el usuario navega. Por ejemplo, al visitar https://www.misitio.com/home#precios, todo lo que aparece después del símbolo de almohadilla es un fragmento de URL.

Para habilitar el seguimiento de cambios en fragmentos de URL, accede a la configuración de tu cuenta de Hotjar, selecciona Sitios y organizaciones, y en Configuración del sitio, activa la opción Rastrear cambios automáticamente, incluidos los fragmentos. Si esto no resuelve el problema, Hotjar también permite el envío manual de vistas de página.

Para hacerlo, puedes usar el siguiente código:

<script>
hj('stateChange', 'alguna/ruta/relativa');
</script>

Cambia alguna/ruta/relativa por un valor significativo, como ‘contacto’ o ‘páginas/precios’. Estos valores se mostrarán como rutas de página en los informes de Hotjar.

Plan de seguimiento para sitios de una sola página

Definir un activador que inicie la etiqueta de Hotjar al cambiar el estado.
Pasar un valor significativo como ruta de página, utilizando una variable del Data Layer.
Crear la etiqueta correspondiente en GTM.

Activador

El activador ideal puede ser el History Change Trigger, pero si no funciona, es recomendable que un desarrollador implemente un método dataLayer.push para disparar el evento cuando hay un cambio de estado.

Proporciona al desarrollador el siguiente código para que lo agregue en la aplicación:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push ({
 'event':'stateChange',
 'pagePath': 'rutaDeLaPagina' // cambia este valor por la ruta actual de la página
})

Este código enviará un evento al Data Layer y se utilizará como condición de activación en GTM.

Variable

Para acceder al valor de pagePath, es necesario crear una variable del Data Layer en Google Tag Manager. Ve a Variables > Variables definidas por el usuario > Nueva > Variable de Data Layer y establece el nombre como pagePath.

Etiqueta HTML personalizada

Finalmente, crea una etiqueta HTML personalizada en GTM y utiliza el siguiente código:

<script>
hj('stateChange', '{{dlv - pagePath}}');
</script>

Asegúrate de que la etiqueta se active utilizando el disparador que creaste previamente. Guarda los cambios y prueba en el modo de vista previa para confirmar su funcionamiento.

Seguimiento de eventos con Hotjar y Google Tag Manager

Aunque Hotjar permite el seguimiento de embudos, actualmente solo admite vistas de página. ¿Qué ocurre si deseas realizar un seguimiento de eventos como envíos de formularios? A pesar de que no hay una función de Evento en la interfaz de Hotjar, se puede utilizar un enfoque similar al del seguimiento de vistas de página.

Convierte un envío de formulario o un clic en un botón en una vista de página simulada. Esta técnica permite incluir interacciones en los embudos sin complicaciones adicionales. Para configurarlo, necesitarás definir un activador para el evento que desees rastrear.

Después de configurar el activador, crea una etiqueta HTML personalizada con el siguiente código:

<script>
hj('stateChange', 'envioFormulario'); // esto se rastreará como https://www.example.com/envioFormulario
</script>

Sustituye envioFormulario por un valor significativo. Recuerda que Hotjar espera una ruta de página, por lo que debe ser un único término.

Verifica en el modo de vista previa que la etiqueta se dispare solo cuando debería hacerlo y asegúrate de que los datos se muestren en los informes de Hotjar.

Crear un embudo

Para crear un embudo en Hotjar, dirígete a Embudos y selecciona Nuevo embudo. Por simplicidad, crea un embudo con tres pasos:

Visita la página de inicio
Visita una página con un formulario
Envía el formulario

A diferencia de los embudos de Google Analytics, Hotjar permite construirlos de forma retrospectiva. Esto significa que si decides agregar, eliminar o editar un paso en un embudo, Hotjar analizará los datos existentes.

Etiquetado de sesiones de Hotjar con Google Tag Manager

Nota: Esta función solo está disponible en los planes de pago de Hotjar.

Una de las características destacadas de Hotjar es la grabación de sesiones. Sin embargo, si tu sitio recibe mucho tráfico, puede ser difícil encontrar las sesiones relevantes entre miles de grabaciones. Por ello, el etiquetado de sesiones se vuelve esencial.

Etiquetar tus grabaciones te permite identificar acciones específicas, como clics en CTA o suscripciones. Una vez que hayas comenzado a etiquetar, podrás utilizar el filtro de etiquetas en tu panel de grabaciones para encontrar rápidamente las sesiones que deseas revisar.

Puedes leer más sobre el etiquetado de sesiones en la documentación de Hotjar, donde se explican dos opciones: etiquetado manual (desde la interfaz de Hotjar) y etiquetado automático (utilizando JavaScript).

Utilizaremos Google Tag Manager para el etiquetado automático. Necesitarás:

Algunos datos (o varias variables) para etiquetar.
Un activador que determine cuándo debe dispararse.
Una etiqueta HTML personalizada.

Colocación y acceso a datos en el Data Layer

Normalmente, los datos sobre el usuario (como el plan de precios) no son accesibles por JavaScript, por lo que se requiere la ayuda de un desarrollador para enviar esa información al Data Layer.

El siguiente código debe ser agregado por el desarrollador en el código de tu sitio:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push ({
 'pricingPlan': 'Premium' // este valor debe basarse en el plan actual del usuario
})

Asegúrate de que este fragmento se agregue por encima del código del contenedor de Google Tag Manager.

Para acceder a este dato en GTM, crea una Variable del Data Layer siguiendo los pasos adecuados.

Condición de disparo

Queremos enviar los datos a Hotjar cuando comience la grabación de la sesión, pero también cuando el código de seguimiento principal de Hotjar se haya disparado correctamente. Para solucionar esto, utilizaremos la secuenciación de etiquetas de GTM.

Esta técnica permite que un disparador dispare un segundo disparador solo si el primero tuvo éxito. Para nuestra situación, esto significa enviar la etiqueta con el plan de precios inmediatamente después de que se active el código de seguimiento de Hotjar.

Etiqueta y secuenciación de etiquetas

Para etiquetar una sesión con datos adicionales, utiliza el siguiente código:

<script>
hj('tagRecording', ['tag1', 'tag2']);
</script>

Modificaremos este código para utilizar solo un tag, reemplazándolo con nuestra variable del Data Layer:

<script>
hj('tagRecording', ['Plan de precios: {{dlv - pricingPlan}}']);
</script>

Cuando esta etiqueta HTML se dispare, GTM reemplazará automáticamente {{dlv – pricingPlan}} con el valor real disponible en ese momento.

Finalmente, regresa a la etiqueta que creamos para el código de seguimiento de Hotjar y aplica la secuenciación de etiquetas, asegurándote de que la etiqueta personalizada se dispare después de que la etiqueta del código se haya activado.

Optimización menor

En muchos casos, querrás rastrear eventos como vistas de página y también etiquetar las sesiones correspondientes. Esto se puede hacer disparando ambos códigos como etiquetas separadas. Sin embargo, puedes optimizarlo aún más combinando ambas acciones en un solo fragmento y disparándolo como una única etiqueta de GTM:

<script>
hj('stateChange', 'registro');
hj('tagRecording', ['Registro completado']);
</script>