Cómo integrar Hotjar en tu app con Lovable

Si quieres entender cómo se mueven los usuarios dentro de tu aplicación, Hotjar es una de las herramientas de analítica más potentes para grabar sesiones, generar heatmaps y lanzar encuestas. Aquí te muestro cómo integrarlo en un proyecto creado con Lovable y desplegado en Vercel, paso a paso, sin tocar código manualmente.

Qué hace Hotjar y por qué vale la pena sumarlo a tu stack

Hotjar te permite ver grabaciones reales de usuarios interactuando con tu app: hacia dónde hacen scroll, qué botones tocan, cómo recorren la pantalla. En el minuto [0:30] se ve un ejemplo concreto con una app de photo renaming, donde basta darle play a una grabación para observar el comportamiento del usuario en vivo.

Esa capacidad de observación cambia la forma en que tomas decisiones de producto. En lugar de adivinar por qué alguien abandona un flujo, lo ves.

¿Qué es un heatmap en Hotjar? Es una representación visual de dónde hacen clic, scroll o pasan el cursor los usuarios en una página. Sirve para detectar zonas calientes y elementos ignorados.

Cómo crear tu sitio dentro de la cuenta de Hotjar

Al entrar a Hotjar por primera vez, la plataforma te guía con un asistente de creación. Si ya tienes cuenta, puedes ir directo a add new site y replicar el mismo flujo.

Los campos que necesitas completar son simples:

• Organización asociada, por ejemplo el nombre de tu empresa.
• Nombre del sitio, como tu photo renaming application.
• URL real del sitio desplegado, en el ejemplo photorename.fun alojado en Vercel.
• Industria, en este caso SaaS.
• Confirmación de que eres dueño del sitio.

Una vez agregado, vas a la sección install tracking code para abrir el dashboard con el snippet que necesitas integrar.

Cómo instalar Hotjar en Lovable usando NPM

Hotjar te da dos caminos: pegar el tag directamente o instalar un paquete NPM. La opción del paquete es más limpia y se integra mejor con proyectos modernos.

El flujo dentro de Lovable es directo:

1. Copias el comando NPM que aparece en las instrucciones de Hotjar.
2. Lo pegas en el prompt box de Lovable para que instale la dependencia.
3. Mientras se instala, vuelves a Hotjar y copias el script de inicialización.
4. Pegas ese script también en Lovable para que lo importe en el proyecto.

Lovable interpreta el contexto y agrega el código sin que tengas que editar archivos a mano. En el minuto [3:00] se confirma que la instalación fue rápida y que el código quedó integrado correctamente.

¿Por qué usar el paquete NPM en lugar del tag directo? Porque mantiene el código del proyecto más ordenado, controla la versión de Hotjar y se actualiza junto con tus dependencias.

Cómo verificar la instalación antes de empezar a recolectar datos

Antes de validar la instalación, tu aplicación debe estar redesplegada en producción. Si no lo haces, el código nuevo no llega al dominio y la verificación falla.

Una vez redeployado, vuelves a la página de instalación en Hotjar y haces clic en verify installation. Hotjar abre tu sitio en una pestaña nueva y, si todo está bien conectado, aparece la animación de confeti confirmando que la integración funciona.

Ese pequeño detalle de UX, el confeti, te avisa de inmediato que ya estás capturando datos.

Cómo crear tu primer heatmap

En la barra lateral izquierda encuentras la opción heatmap. El proceso para crear uno nuevo es:

• Hacer clic en new heatmap.
• Pegar la URL que quieres analizar, por ejemplo el dominio principal de tu app.
• Saltar las opciones avanzadas si quieres un default heatmapping.
• Guardar y nombrar el heatmap, por ejemplo homepage.

A partir de ese momento, Hotjar empieza a registrar comportamiento en esa URL.

Qué otras funciones tiene Hotjar más allá de los heatmaps

Dentro del panel encuentras varias herramientas adicionales que se comportan de forma parecida a las de PostHog:

• Recordings, para ver sesiones reales de usuarios cuando empiecen a interactuar.
• Surveys, para lanzar encuestas dentro de la app.
• Otras opciones de feedback y segmentación.

Algunas funciones están detrás de planes pagos, pero el plan básico gratuito cubre la mayoría de necesidades para una aplicación en etapas tempranas.

Hotjar vs PostHog y otras herramientas de analítica

La elección entre Hotjar, PostHog u otras plataformas depende de tu preferencia y del tipo de datos que quieras priorizar. Hotjar brilla en observación cualitativa: grabaciones, mapas de calor y encuestas. PostHog se inclina más hacia product analytics y eventos.

No hay una respuesta universal. Lo recomendable es probar cuál encaja con tu flujo de trabajo y con la pregunta que estás intentando responder sobre tus usuarios.

Con esto cierras un recorrido completo: desde estructurar el proyecto, lanzarlo, monetizarlo y ahora medir cómo lo usan. Si ya tienes tu app desplegada y conectada a Hotjar, cuéntame en los comentarios qué fue lo primero que descubriste viendo las grabaciones de tus usuarios.