Tutorial

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

Jorge Lana

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 resulta muy útil a la hora de hipotetizar es mediante mapas: mapas de desplazamiento, mapas de calor, mapas de clics. Estos mapas son realmente prácticos ya que nos permiten saber exactamente qué contenidos, formularios 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 al mapeo como a la grabación. Sin embargo, solo puedes grabar hasta 100 grabaciones de sesiones 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 utilizar Hotjar debe instalarlo en su página web. Para ello, debes colocar el píxel o código de Hotjar en el código de la página. Hay varias formas de hacerlo: puedes instalar el píxel 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 nos da Hotjar y puedes pedir ayuda para instalarlo a un profesional de la herramienta. Al entrar en tu cuenta, verás la siguiente pantalla que te muestra 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 seleccionada, haz clic en el botón "Crear y publicar etiqueta" para que Google Tag Manager 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 enlace entre Hotjar y Google Tag Manager colocando el código de Hotjar en una etiqueta de Google Tag Manager, la herramienta de medición querrá verificar que el enlace está efectivamente funcionando y que los datos están siendo recogidos. En la siguiente pantalla se le pedirá que realice esta comprobació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! Ya tenemos completada la configuración de Hotjar con Google Tag Manager!

¡Gracias!

¿Como este artículo? Corre la voz.

El bajo código y el no 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