Cómo optimizar un sitio de e-commerce en Webflow con Hotjar

Las analíticas de tu tienda Webflow pueden decirte cuántos compradores abandonaron sus carritos, pero no qué sucedió en la página que los hizo irse. Hotjar cierra esa brecha en un sitio de Webflow Ecommerce, sacando a la luz la fricción detrás de los números para que puedas actuar sobre la causa y no solo sobre la métrica.

Hotjar es una herramienta de análisis de comportamiento. Registra cómo se mueven las personas reales por tus páginas, dónde hacen clic, hasta dónde se desplazan y dónde se detienen durante el proceso de pago.

Se instala de la misma forma que cualquier otro script en Webflow, a través del encabezado del sitio, y luego se añaden eventos personalizados para que los datos hablen el idioma de tu tienda: añadir al carrito, iniciar pago, compra.

Esta guía recorre todo el proceso y señala cada trampa a medida que aparece.

¿Qué necesitas para añadir Hotjar a un sitio de comercio electrónico en Webflow?

Necesitas configurar cuatro cosas:

• Un sitio Webflow con un plan de pago que permita código personalizado
• Una cuenta de Hotjar con un sitio y su fragmento de código de seguimiento
• Una configuración de gestión de consentimiento para mantener la integración conforme al RGPD
• Una idea clara de qué nivel del plan de Hotjar cubre las funciones que deseas.

Ninguna de estas cosas es complicada, pero saltarse la parte del consentimiento o no revisar el plan causa la mayoría de los problemas que veo después.

Antes de tocar cualquier código, configura esto.

7 pasos para configurar Hotjar en tu sitio de comercio electrónico en Webflow

La configuración va desde la instalación base hasta el seguimiento específico de la tienda. Primero, instalas el fragmento y lo proteges con el consentimiento. Luego, le enseñas a Hotjar las acciones clave de tu tienda con eventos y atributos de usuario. Finalmente, creas un embudo, bloqueas la información de identificación personal (PII) y verificas que todo funcione correctamente.

Sigue estos pasos en orden. Cada uno termina con lo que deberías ver antes de continuar, para que nunca tengas que adivinar si funcionó.

1. Instala el código de seguimiento de Hotjar en el encabezado del sitio de Webflow

Primero, copia tu fragmento de seguimiento exacto desde Hotjar. En tu panel de control de Hotjar, abre el sitio que creaste, ve a la pantalla de código de seguimiento y copia el bloque completo. En Webflow, abre la configuración del sitio, haz clic en la pestaña de código personalizado y pega el fragmento en el campo de código del encabezado (Head code), luego guarda y publica.

El fragmento se ve así, con el ID de tu propio sitio en lugar del marcador de posición:

<!-- Hotjar Tracking Code -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:YOUR_SITE_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Este fragmento crea la cola global , configura el ID de tu sitio en , y añade el script asíncrono de Hotjar al encabezado de la página para que se cargue sin bloquear tu contenido. Como se coloca en el encabezado de todo el sitio, se ejecuta en cada página, incluyendo las de producto, carrito y pago.hj()_hjSettings

Pega siempre tu propia copia en lugar de este ejemplo, ya que el ID del sitio debe coincidir con tu cuenta. Resultado esperado: tras publicar, tu dominio activo cargará el script de Hotjar en todas las páginas.

2. Limita Hotjar mediante el consentimiento de cookies

No permitas que el fragmento original se ejecute antes de que el visitante dé su consentimiento. La forma más segura es evitar que el script de Hotjar se cargue hasta que tu herramienta de consentimiento confirme la aceptación, en lugar de cargarlo y esperar a que los usuarios se den de baja después. La mayoría de las plataformas de consentimiento gestionan esto controlando las etiquetas de script por ti.

Si gestionas la carga por tu cuenta, envuelve la llamada de Hotjar para que solo se ejecute después del evento de consentimiento:

<script>
  window.addEventListener('CookiebotOnAccept', function () {
    if (Cookiebot.consent.statistics) {
      // Load Hotjar only after statistics consent is granted
      (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:YOUR_SITE_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    }
  });
</script>

El código escucha el evento de aceptación de la plataforma de consentimiento, verifica que el visitante haya permitido la categoría de estadísticas y solo entonces inyecta el cargador de Hotjar. Esto te mantiene en cumplimiento por defecto: no se captura ningún dato de comportamiento de quienes rechazan el seguimiento.

Cambia por la plataforma que utilices, ya que cada una dispara su propio nombre de evento de consentimiento. Resultado esperado: Hotjar recopila datos solo de los compradores que aceptan las cookies de análisis.Cookiebot

3. Rastrea eventos de comercio electrónico con la API de eventos

Enseña a Hotjar las acciones reales de tu tienda usando la API de eventos. Las interacciones de comercio electrónico en Webflow no recargan la página, así que el enfoque más limpio es asignar una clase personalizada a tu botón de "Añadir al carrito" en el Diseñador de Webflow y luego vincular un detector de clics en el código del pie de página.

La llamada de evento de Hotjar es una sola línea:

<script>
  document.addEventListener('click', function (e) {
    if (e.target.closest('.add-to-cart')) {
      window.hj = window.hj || function(){ (hj.q = hj.q || []).push(arguments) };
      hj('event', 'add_to_cart');
    }
  });
</script>

El detector observa los clics en cualquier parte de la página, comprueba si el clic se produjo dentro de un elemento que lleva tu clase .add-to-cart y envía un evento llamado add_to_cart a Hotjar cuando ocurre.

Los nombres de los eventos pueden tener hasta 250 caracteres y no pueden incluir propiedades, así que mantenlos descriptivos y coherentes, como begin_checkout y purchase. Dispara el evento purchase en tu página de confirmación de pedido de Webflow. Resultado esperado: en pocos minutos, estos eventos aparecerán en Hotjar y se convertirán en filtros para grabaciones y mapas de calor.

4. Identifica a los compradores registrados con atributos de usuario

Adjunta lo que sabes sobre un comprador para poder segmentar su comportamiento más adelante. Si tu tienda tiene cuentas de cliente, la API de identificación etiqueta la sesión actual con atributos como el gasto total o el estado del cliente, lo que te permite observar cómo se comportan los compradores recurrentes de forma distinta a los nuevos.

La llamada requiere un ID de usuario y un objeto de atributos:

<script>
  hj('identify', 'USER_ID_FROM_YOUR_DB', {
    is_customer: true,
    total_spend: 500,
    plan_tier: 'returning'
  });
</script>

Aquí, el primer argumento es un ID de usuario estable de tu base de datos o de la API de CMS de Webflow (o null si se desconoce), y el objeto contiene los atributos. Hotjar acepta números, cadenas de hasta 200 caracteres, fechas en formato ISO-8601, valores booleanos y una clave dedicada email, con hasta 100 nombres de atributos distintos por sitio.

Cada llamada de identificación sobrescribe los valores almacenados para ese usuario, así que envía el estado actual. Esta función requiere un plan Observe Business o superior. Resultado esperado: las grabaciones y los mapas de calor ahora pueden filtrarse por atributos del comprador, como si es recurrente o nuevo.

5. Crea un embudo de pago en Hotjar

Convierte tus eventos y visitas a páginas en un embudo medible. Dentro de Hotjar, crea un nuevo embudo y añade pasos ordenados que reflejen tu proceso de compra. Un paso del embudo puede ser una página vista, un elemento clicado o un evento personalizado, que es precisamente la razón por la que configuraste eventos en el tercer paso.

Un embudo de comercio electrónico bien organizado se ve así, en términos sencillos:

• Paso 1: visualización de la página de producto
• Paso 2: add_to_cart evento activado
• Paso 3: visualización de la página de pago
• Paso 4: visualización de la página de confirmación de pedido

Cada paso corresponde a algo que Hotjar ya puede detectar en tu tienda publicada, por lo que el embudo se monta en un abrir y cerrar de ojos. Hotjar permite hasta diez pasos, y todos deben ocurrir dentro de una misma sesión para que cuenten como conversión.

La recompensa es ver el porcentaje de abandono entre cada etapa, así sabrás exactamente dónde se van tus clientes. Los embudos requieren el plan Observe Scale. Resultado esperado: un embudo en tiempo real que muestra las tasas de conversión y abandono entre cada paso de tu proceso de pago.

6. Oculta la información personal (PII) en las páginas de carrito y pago

Protege los datos de tus clientes antes de revisar ni una sola grabación. Como el código de seguimiento se ejecuta en el pago, debes evitar que Hotjar capture información sensible. Hotjar ya oculta todas las pulsaciones de teclas por defecto y enmascara automáticamente cualquier número de nueve dígitos o más, lo que cubre tarjetas de crédito y números de teléfono.

Para todo lo demás, añade el data-hj-suppress atributo a los elementos que muestren datos personales, como direcciones guardadas o resúmenes de pedido.

Puedes añadir atributos personalizados a cualquier elemento desde el panel de configuración de elementos del Diseñador de Webflow:

<div data-hj-suppress>
  <p>Jane Doe</p>
  <p>221B Baker Street</p>
</div>

Aplicar data-hj-suppress a un elemento padre oculta todo lo que contiene, incluidos textos e imágenes, así que basta con envolver todo el bloque de la dirección. Ten en cuenta que Hotjar no puede ocultar SVGs en línea, solo fuentes de imágenes enlazadas.

Resultado esperado: las grabaciones y mapas de calor se reproducen con los campos personales enmascarados, manteniendo la integración segura y privada.

7. Verifica la integración de principio a fin

Confirma que todo funciona antes de confiar en los datos. Empieza en Hotjar, donde el panel te dirá si el código de seguimiento se detecta en tu dominio. Luego, abre tu tienda en un navegador normal, acepta las cookies y completa una compra de prueba. Añade un producto, avanza por el proceso de pago y llega a la página de confirmación.

Espera unos minutos y comprueba tres cosas en Hotjar: que tu sesión de prueba aparezca en Grabaciones, que tus eventos add_to_cart y purchase aparezcan como filtros, y que el embudo registre tu prueba como una conversión.

Si usas Google Tag Manager junto con Hotjar, confirma que la etiqueta se active con el mismo consentimiento. Resultado esperado: una única compra de prueba visible en grabaciones, eventos y el embudo, lo que confirma que todo el sistema funciona.

¿Qué causa problemas de seguimiento de Hotjar en sitios de comercio electrónico de Webflow?

La mayoría de los fallos se deben a unas pocas causas previsibles: el sitio no se volvió a publicar tras añadir el código, el consentimiento bloquea la recopilación, los eventos rompen los límites de nombres o sesiones de Hotjar, el enmascaramiento oculta demasiado o tu límite diario de sesiones restringe lo que puedes ver. Cada una produce un síntoma distinto.

Las siguientes secciones relacionan el síntoma que observes con su causa y solución, en el orden en que es más probable que te los encuentres.

No aparecen datos en Hotjar

Si Hotjar indica que no encuentra el código de seguimiento, la causa más común en Webflow es que el sitio se editó pero nunca se volvió a publicar. El código personalizado solo se activa al publicar, por lo que guardar el campo Head no es suficiente. Vuelve a publicar en tu dominio de producción y confirma que pegaste el fragmento en el campo de código Head y no en el pie de página.

La segunda causa es un problema con el plan: el código personalizado para todo el sitio requiere un plan de sitio de Webflow de pago; si esa sección no aparece, el código del encabezado nunca se aplicó. La tercera es una discrepancia en el ID del sitio dentro del fragmento.

Verifica que el ID coincida con el sitio que aparece en tu panel de Hotjar, ya que un ID de ejemplo copiado no recopilará absolutamente nada.

Las grabaciones están vacías o faltan datos

Cuando existen grabaciones pero parecen estar en blanco, o la recopilación es mucho menor que tu tráfico, la razón suele ser el consentimiento. Si el script de Hotjar está correctamente bloqueado por el consentimiento, cada visitante que rechaza las cookies de análisis no genera datos; esto funciona según lo previsto, pero puede parecer un error. Confirma que tu herramienta de consentimiento realmente otorgue la categoría de estadísticas al aceptar.

Otra causa común es la supresión excesiva: aplicar a un contenedor de alto nivel, como el cuerpo de la página, oculta mucho más de lo que pretendías. Aplica el atributo solo a los elementos específicos que contienen datos personales.data-hj-suppress

Haz una prueba aceptando las cookies tú mismo y completando una sesión, luego confirma que se graba correctamente ocultando solo los campos sensibles.

Los eventos personalizados no aparecen en los filtros

Si tus eventos o no aparecen, empieza por revisar tu plan de Hotjar. La API de eventos requiere un plan Observe Plus o superior; en el nivel básico gratuito, tus llamadas de eventos simplemente no hacen nada.add_to_cartpurchase

A continuación, comprueba el nombre del evento según las reglas de Hotjar: los nombres pueden tener hasta 250 caracteres, usar letras, números y un conjunto limitado de símbolos, y no pueden incluir propiedades.

Una tercera causa son los límites de sesión de Hotjar, donde solo los primeros 50 eventos únicos en una misma sesión se pueden buscar mediante filtros, por lo que una página que dispara docenas de eventos puede enterrar los que realmente te interesan. Mantén tu conjunto de eventos pequeño y bien definido.

Por último, confirma que el detector de clics coincida realmente con la clase que asignaste en el Diseñador.

El muestreo oculta sesiones que esperabas ver

Si las sesiones parecen desaparecer en una tienda con mucho tráfico, es probable que estés alcanzando el límite diario de sesiones de tu plan. El nivel básico gratuito de Hotjar limita la recopilación a unas 35 sesiones por día, y los niveles de pago aumentan ese techo gradualmente. Una vez que alcanzas el límite, Hotjar deja de grabar nuevas sesiones hasta el día siguiente, por lo que un pico de tráfico o una oferta pueden hacer que tus sesiones más importantes no se capturen.

No hay otra solución que entender cómo funciona: o subes de nivel para aumentar el límite, o usas la segmentación para grabar solo las páginas que importan, como el carrito y el pago, para que tu cuota limitada se gaste donde realmente cuenta.

En una tienda en crecimiento, planificar este límite de muestreo es parte de la elección del plan.

Convierte los datos de comportamiento en ingresos para tu tienda Webflow

Cada carrito abandonado en tu tienda es un cliente que quería comprar y se encontró con algún obstáculo. El objetivo de poner Hotjar en Webflow es hacer visible esa fricción invisible para que puedas arreglar ese menú desplegable, esa sorpresa en los gastos de envío o ese botón confuso que te está costando ventas en silencio.

Una vez que puedes ver dónde tienen dificultades los compradores, el siguiente paso natural es facilitarles el camino. Si tu embudo muestra abandonos en el paso de pago, optimizar tu flujo de Stripe checkout suele ser la solución de mayor impacto.

Si los compradores convierten pero no vuelven, la experiencia post-compra es donde los recuperas, empezando por correos de confirmación de pedido fiables y una forma de automatizar los pedidos de e-commerce en tu oficina administrativa para que no se escape nada.

Para la capa de analítica, la página oficial de integración de Webflow y Hotjar es la referencia para las opciones de conexión. Si quieres modelar datos de comportamiento junto con los datos de tu tienda, puedes integrarlos en tu propio panel de control en tiempo real.

Empieza instalando el fragmento de código, observa diez sesiones de pago reales esta semana y deja que lo que veas dicte tu próxima mejora.