Tutorial

Cómo integrar Hotjar en el flujo web a través de Google Tag Manager

Elisa Garrido

Junior Maker Analyst

@

Mínimo.

Sabemos que el estudio de la métrica es algo vital en la vida de cualquier proyecto. El seguimiento de los datos nos ayuda a diseñar estrategias de mejora y a posicionarnos en base a hipótesis que, gracias a estos números, nos muestran objetivamente cuáles son las tendencias.

Para poder visualizar los datos recogidos de nuestro proyecto o sitio web tenemos diferentes herramientas disponibles. Además de la gama de herramientas, los datos pueden ser leídos de diferentes maneras: en tablas, con métricas simples, porcentajes, en gráficos de barras o líneas, en gráficos de porciones...

Otra forma de visualizar los datos que es muy útil cuando se hacen hipótesis es por medio de mapas: mapas de desplazamiento, mapas de calor, mapas de clic. Estos mapas son realmente prácticos ya que nos permiten saber exactamente qué contenidos, formas o diseños atraen más la atención de nuestros usuarios. Además de los mapas, también podemos observar directamente las grabaciones de las sesiones en nuestra página.

Hotjar es la herramienta NoCode que nos permite visualizar los datos de estas dos maneras y por lo tanto la consideramos una herramienta básica para la medición. En este post aprenderemos paso a paso como configurarlo para recoger los datos de nuestro proyecto Webflow a través del Google Tag Manager.

Requisitos

Antes de comenzar, debes tener tu contenedor y cuenta de Google Tag Manager creada, así como la cuenta de Hotjar.

  • Hotjar
  • Administrador de etiquetas de Google
  • Webflow

Paso 01 - Inscríbete en Hotjar

Para empezar, como mencionamos, necesitarás crear una cuenta en Hotjar para poder enlazar con tu proyecto.

Hotjar tiene planes gratuitos y de pago. A diferencia de otras herramientas, en los planes gratuitos de Hotjar puedes acceder tanto a la cartografía como a la grabación. Sin embargo, sólo puedes grabar hasta 100 sesiones de grabación aleatorias y hacer un número limitado de mapas.

Elija uno de los planes no gratuitos para obtener grabaciones de sesiones y mapas ilimitados, así como otras características no incluidas en el plan gratuito.

En este enlace puedes elegir los planes de Hotjar: www.hotjar.com

Paso 02 - Instalar Hotjar en tu sitio

Para poder usar Hotjar debes instalarlo en tu sitio web. Para ello, debes colocar el píxel o código de Hotjar en el código de la página. Hay varias maneras de hacerlo: puedes instalar el pixel o código de Hotjar directamente en el código de la página web, puedes hacerlo a través de una de las integraciones que Hotjar nos da y puedes pedir ayuda para instalarlo a un profesional de la herramienta. Cuando entres en tu cuenta, verás la siguiente pantalla que te mostrará las siguientes opciones:

Como vamos a instalar Hotjar a través de Google Tag Manager, algo que facilitará el proceso y nos permitirá centralizar todos los datos a través de la herramienta de Google, hay que pulsar el botón "Start Setup" y entre las opciones seleccionar la cuenta con la que se ha creado Hotjar.

Ahora, puedes aceptar todos los permisos que Hotjar te pida y hacer clic en el botón "Permitir". Aceptar los permisos autorizará a la herramienta a recoger todos los datos que nos serán tan útiles.

Ahora, en la ventana que aparecerá, elige y selecciona tu cuenta de Google Tag Manager y el contenedor que quieras vincular. Como mencionamos al principio, debes haber creado previamente dicho contenedor.

Una vez seleccionado, haz clic en el botón "Crear y publicar etiqueta" para que el Administrador de etiquetas de Google recoja las instrucciones de Hotjar y cree automáticamente una etiqueta para la herramienta.

Finalmente, debe confirmar la publicación de la instalación con el botón "Confirmar y crear".

Paso 03 - Verificar la instalación

Ahora que hemos creado el vínculo entre Hotjar y el Google Tag Manager colocando el código de Hotjar en una etiqueta del Google Tag Manager, la herramienta de medición querrá verificar que el vínculo funciona efectivamente y que los datos se están recopilando. En la siguiente pantalla se le pedirá que realice esta verificación, haga clic en el botón para verificar la instalación:

Para verificar la instalación correctamente, en la ventana emergente debe introducir la URL de su sitio o página web y hacer clic de nuevo en el botón para verificar la instalación.

Deberías obtener la pestaña de verificación y una nueva ventana emergente con la confirmación, de esta manera:

¡Bien! ¡Ahora tenemos la configuración de Hotjar completada con el Google Tag Manager!

¡Gracias!

¿Como este artículo? Corre la voz.

Código bajo y sin código en acción

Suscríbete a nuestro boletín de noticias

Únete a nuestro boletín de noticias y recibe recursos, contenido curado e inspiración para el diseño directamente en tu bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
Algo salió mal al enviar el formulario. Por favor, inténtelo de nuevo.

Lo último de nuestro Blog

Tienes preguntas, tenemos respuestas

FAQ

¿Quiénes somos?
¿Cuánto tiempo lleva construir mi producto digital o MVP?
¿Puedo trabajar con Minimum.run de forma continua una vez que mi MVP o producto esté lanzado?
¿Con qué tecnologías e integraciones trabaja Minimum.run?
¿Cuál es el proceso de trabajo con Minimum.run?
¿Cuáles son las entregas típicas?
¿Seré capaz de gestionar mi producto personalizado una vez que esté lanzado?
Suscríbase a