Microsoft Clarity para PrestaShop: vea cómo usan realmente su tienda los clientes

Clarity sigue siendo gratis, sin límite de sesiones, y los pasos de activación por consentimiento y enmascaramiento en PrestaShop que verás abajo reflejan la práctica actual en materia de RGPD.

Tu analítica puede decirte que el 40% de los visitantes abandona una página de producto concreta. No puede decirte que la abandona porque el botón de añadir al carrito queda por debajo de un bloque alto de selectores de atributos que lo empuja fuera de la primera pantalla en un móvil. Los números describen la fuga; no te enseñan el agujero. Microsoft Clarity es la herramienta que te enseña ese agujero, graba sesiones reales y agrupa los clics en mapas de calor, para que veas cómo se mueven de verdad los clientes por tu tienda PrestaShop en lugar de adivinarlo a partir de una tasa de rebote. Es gratis, sin límite de sesiones, y esa es la parte que hace difícil perder el argumento de "por qué no instalarlo".

Esta guía trata específicamente sobre cómo hacer funcionar Clarity en PrestaShop y cómo leer sus datos como propietario de una tienda: dónde insertar el script para que una actualización del tema no lo borre, qué revelan de forma fiable las grabaciones en los tipos de página propios de PrestaShop y qué enmascaramiento de RGPD tienes que configurar de verdad. Para la pregunta más amplia de qué métricas merecen tu atención, eso ya es otra disciplina: consulta analítica para tiendas online: qué medir y qué ignorar.

Lo que Clarity te cuenta y GA4 nunca podrá contarte

Conviene ser preciso con el reparto de funciones, porque los comerciantes pierden semanas esperando que una herramienta haga el trabajo de la otra. Google Analytics 4 es cuantitativo y agregado: recuentos, tasas, segmentos, embudos. Clarity es cualitativo e individual: te muestra a una persona concreta teniendo problemas con una pantalla concreta. Necesitas ambas, pero para responder preguntas distintas.

El flujo de trabajo práctico consiste en dejar que GA4 te diga qué página tiene una fuga y abrir después Clarity para averiguar por qué. Una tasa de abandono es una linterna apuntando a una habitación; una grabación de sesión es entrar en ella.

Las tres cosas que captura Clarity

Grabaciones de sesión

Clarity reproduce visitas reales como si fueran un vídeo: movimiento del cursor, desplazamiento, clics, pausas. En una tienda PrestaShop, los momentos de revelación recurrentes suelen ser mundanos y solucionables: un cliente pasando el ratón una y otra vez sobre la imagen de producto porque espera un zoom que el tema no conectó, alguien desplazándose más allá del botón de añadir al carrito en móvil porque los desplegables de atributos lo empujaron hacia abajo, un comprador que abre el campo de cupón y no vuelve (se fue a buscar un código). Nada de esto aparece en los datos agregados. Todo resulta evidente en la segunda grabación que ves.

Mapas de calor

Los mapas de calor agregan a todos los visitantes en una sola capa visual, de modo que la anécdota de una grabación se convierte en un patrón:

• Mapas de clics muestran dónde se concentra la atención. Si el punto más caliente de una página de producto es una insignia no clicable o una imagen estática de características, hay una expectativa de UX que no estás cumpliendo.
• Mapas de desplazamiento muestran la realidad del pliegue. Si el 80% de los visitantes nunca llega al bloque de venta cruzada o al texto de confianza en el que invertiste un día, en la práctica es invisible, y en la plantilla de producto predeterminada de PrestaShop, la posición del pliegue cambia mucho entre variantes de tema y tamaños de pantalla.
• Mapas de área muestran qué regiones de la página consiguen interacción, lo que te indica qué conviene subir.

Señales de frustración

Aquí es donde Clarity justifica su sitio, y es el conjunto de funciones en el que realmente detecta mejor que la mayoría de sus rivales. Marca automáticamente los clics de rabia (clics repetidos y rápidos sobre un elemento, normalmente algo roto o que no responde), los clics muertos (clics en elementos que parecen interactivos pero no lo son) y los retornos rápidos (un visitante que aterriza y vuelve atrás de inmediato, señal de que la página no era lo que prometía el enlace). Cada marca es una cohorte filtrable, así que puedes ir directo a "muéstrame todas las sesiones con un clic de rabia en la página del carrito" en lugar de ver grabaciones al azar.

Instalar Clarity en PrestaShop sin romperlo en la próxima actualización del tema

Clarity es un único fragmento de JavaScript que debe ir en el <head>, cargado en todas las páginas. La trampa está en dónde lo colocas, porque el lugar más obvio también es el más frágil.

No lo pegues en la plantilla del tema. Editar themes/your-theme/templates/_partials/head.tpl funciona hasta que la siguiente actualización del tema, o un cambio de tema, lo sobrescribe y tu seguimiento muere en silencio, y no lo notarás durante semanas, porque nada se rompe de forma visible. Todo el sentido de la analítica de comportamiento queda debilitado por un hueco en los datos que ni sabías que existía.

Dos vías duraderas, por orden de preferencia:

• A través de Google Tag Manager. Si ya usas un contenedor de GTM, añade Clarity como una etiqueta de HTML personalizado que se dispare en Todas las páginas, condicionada a tu activador de consentimiento (más sobre esto abajo). Así mantienes todos los scripts de terceros en un único lugar auditable y totalmente fuera de tu tema, el mismo razonamiento que explicamos en configurar el seguimiento con GTM sin tocar código. ¿Y qué? Una actualización del tema no puede tocarlo, y lo activas o desactivas desde un único panel.
• A través de un módulo de inyección en cabecera enganchado a displayHeader. Un pequeño módulo de "código personalizado / HTML de cabecera" registrado en el hook displayHeader inserta el fragmento en el head de cada página, vive en la base de datos en lugar de en un archivo de plantilla y sobrevive a los cambios de tema. Es la ruta sin desarrollador si no usas GTM.

En cualquier caso: crea un proyecto gratis en clarity.microsoft.com, copia el fragmento de seguimiento, publícalo mediante una de las vías anteriores y verifícalo con la vista previa en directo del panel de Clarity antes de darlo por terminado. Los datos suelen empezar a aparecer en un par de horas. Una comprobación específica de PrestaShop: borra la caché (Advanced Parameters → Performance → Clear cache) después de publicarlo, porque un head cacheado ocultará el nuevo script a los visitantes reales aunque a ti te parezca que está todo bien.

Cargar el fragmento solo después del consentimiento

La forma más habitual en que los comerciantes lo hacen mal es ejecutar Clarity al cargar la página y bloquearlo después. Bloquéalo desde el principio. Si lo inyectas mediante un módulo de código personalizado en lugar de GTM, el patrón consiste en mantener el cargador propio de Clarity dentro de una función y llamarlo solo cuando tu banner de cookies haya registrado la aceptación de la categoría de analítica:

<script>
// Clarity's own snippet, wrapped so it only runs after consent
function loadClarity() {
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
}

// Call loadClarity() only when your CMP reports analytics consent.
// Example: most banners expose an event or a stored flag you can read.
if (window.localStorage.getItem("analytics_consent") === "granted") {
  loadClarity();
}
// And subscribe to the consent-change event your banner fires, e.g.:
document.addEventListener("cmp:analytics-accepted", loadClarity);
</script>

Sustituye YOUR_PROJECT_ID por el ID de tu panel de Clarity, y sustituye la comprobación de consentimiento por la señal que emita realmente tu módulo de cookies, los módulos de consentimiento de PrestaShop difieren en el nombre de la bandera y en el evento que exponen, así que lee la documentación de tu módulo en lugar de copiar literalmente los nombres de marcador de posición.

Leer Clarity frente a los tipos de página reales de PrestaShop

El consejo genérico de "ver algunas grabaciones" desaprovecha la herramienta. Clarity da resultados cuando lo apuntas a las plantillas específicas de PrestaShop y haces preguntas concretas.

Páginas de producto (controlador product)

• En el mapa de desplazamiento: ¿el botón de añadir al carrito queda por encima del pliegue en móvil, o los selectores de atributos y el selector de cantidad lo empujan hacia abajo? Esta es la fuga más común que Clarity revela en PrestaShop.
• ¿Los clientes hacen clic en la imagen principal del producto esperando un zoom o una galería? Si el mapa de clics se ilumina ahí pero no pasa nada (clics muertos), la interacción con la imagen de tu tema falta o no se entiende.
• ¿Interactúan con los selectores de atributos (talla, color) sin problemas, o hay clics de rabia que sugieren que la lógica de combinaciones confunde, o que una variante está agotada sin un mensaje claro?
• ¿Llegan siquiera a la pestaña de descripción y a las ventas cruzadas, o abandonan antes?

Páginas de categoría y búsqueda facetada

• ¿Los visitantes usan los filtros de navegación por capas (ps_facetedsearch) o pasan de largo? Si la barra lateral de filtros no recibe clics en móvil, puede estar plegada en un sitio que nunca encuentran.
• ¿Hasta dónde se desplazan antes de hacer clic en un producto o marcharse? Es una señal de si tu ordenación predeterminada y la cantidad de productos por página coinciden con su intención.
• ¿Dónde cae el primer clic: imagen, nombre o precio? Eso te dice qué elemento está haciendo el trabajo de persuasión.

Proceso de pago (controlador order)

• ¿En cuál de los pasos del pago de PrestaShop, datos personales, direcciones, entrega, pago, se atascan los clientes que abandonan? Las grabaciones muestran el momento exacto.
• ¿Qué campos del formulario provocan intentos repetidos o pausas largas (un caso habitual: campos de dirección que se vuelven a validar y se borran, o un campo de teléfono con formato estricto)?
• ¿El campo de cupón envía a la gente fuera? Una caja de cupón abierta y prominente en el pago es una salida conocida: los clientes se van a Google a buscar un código y no todos vuelven.

El proceso de pago es donde los hallazgos de Clarity se convierten en correcciones de mayor valor, porque todo visitante que llega ahí ya quiere comprar. Si las grabaciones apuntan una y otra vez a la misma fricción del flujo por pasos, secciones que se revalidan, demasiadas barreras, una caja de cupón haciendo daño. Eso es un problema estructural del pago, no un ajuste menor. Rehacer el flujo en sí (una sola pantalla, total actualizado en vivo, compra como invitado por defecto) es para lo que está creado nuestro módulo Checkout Revolution, configurado desde el back office en lugar de una factura de desarrollo, el tipo de cambio que haces después de que Clarity te haya mostrado exactamente dónde vive la fricción.

RGPD: el enmascaramiento que sí tienes que configurar

Clarity enmascara por defecto el texto y el contenido introducido en campos (su modo de enmascaramiento "Balanced"), pero el comportamiento predeterminado es configurable y en una tienda PrestaShop hay exposiciones propias de la tienda que conviene cerrar explícitamente, y "la grabación capturó el nombre y la dirección completa de un cliente conectado en el área de cuenta" es una brecha real, común y evitable.

• La activación por consentimiento no es opcional. El script de Clarity no debe cargarse hasta que el visitante haya aceptado las cookies de analítica. Si lo ejecutas mediante GTM, asígnalo a tu activador de consentimiento; si lo haces mediante un módulo de cabecera, condicionalo a la señal de analítica de tu CMP. Cargarlo antes del consentimiento es el error más común y el que un regulador detecta.
• Enmascara explícitamente las regiones de datos personales de PrestaShop. Usa las reglas de enmascaramiento de Clarity (y el atributo data-clarity-mask, o una configuración de enmascaramiento por selector CSS) sobre el bloque de cuenta de cliente (plantillas my-account / identity), la página de confirmación de pedido y cualquier visualización de dirección, para que las grabaciones no almacenen nombres, direcciones ni detalles de pedidos. Eso sí, el enmascaramiento solo oculta el contenido visual en la reproducción: no eliminará los datos personales que acaben en otros lugares. Complétalo limpiando identificadores de URLs y cadenas de consulta, no pasando nunca datos personales a etiquetas, atributos o eventos personalizados, y comprobando que cualquier encuesta o recogida de comentarios que uses no capture texto libre que exponga a un cliente.
• Decláralo. Incluye Microsoft Clarity como encargado del tratamiento en tu política de privacidad y colócalo en la categoría de "analítica" de tu banner de cookies.

Si estás comparando este tipo de tratamiento de datos por terceros con mantener la analítica dentro de casa, es una decisión deliberada que merece su propio análisis; lo cubrimos en analítica centrada en la privacidad para tu tienda.

Dónde encaja Hotjar, y dónde no

El equivalente más cercano de Clarity es Hotjar; ambos ofrecen mapas de calor y grabaciones. La versión honesta y breve: Clarity es gratis, con sesiones ilimitadas y una detección de frustración más potente, mientras que Hotjar añade encuestas en el sitio y widgets de comentarios que Clarity no tiene. Para la mayoría de tiendas PrestaShop, el plan gratuito de Clarity cubre por completo el trabajo de análisis de comportamiento, y recurrirías a Hotjar específicamente cuando quieras hacer preguntas a los visitantes en lugar de solo observarlos. Hacemos la comparación completa función por función, incluidos los detalles de configuración en PrestaShop para cada uno, en Hotjar para PrestaShop, así que no la duplicaremos aquí.

Un matiz específico de PrestaShop: tráfico de bots en tus grabaciones

Si empiezas a ver grabaciones y encuentras sesiones que añaden un producto al carrito y luego no hacen nada humano, sin desplazamiento, acciones instantáneas, sin pago, quizá estés viendo tráfico automatizado, no clientes. Las sesiones de bots o automatizadas pueden aparecer en herramientas de analítica y grabación, distorsionando tu percepción de cómo se comportan los visitantes "reales". Antes de rediseñar una página en torno a un patrón que te muestra Clarity, filtra las sesiones sospechosas y comprueba con sentido común que lo que queda es humano. Desgranamos qué es ese tráfico y por qué no deberías bloquearlo en Google Storebot compra en tu tienda PrestaShop.

De mirar a actuar: una rutina que sobrevive al primer mes

El modo de fallo de la analítica de comportamiento es ver grabaciones como entretenimiento y no cambiar nada. Átala a una cadencia:

• Semanalmente: ve 10–15 sesiones, filtradas a sesiones de pago y a tus páginas de producto con más salidas, no grabaciones aleatorias. Los filtros de segmento de Clarity hacen que sea una tarea de dos minutos.
• Mensualmente: revisa los mapas de calor de tus diez páginas principales y repasa los puntos calientes de clics de rabia y clics muertos para detectar nuevas regresiones (un ajuste del tema que rompe un objetivo de clic aparece aquí primero).
• Después de cada cambio: cuando muevas un botón, edites una plantilla o modifiques el pago, mira grabaciones de la nueva versión para confirmar que se comporta como esperabas, en lugar de darlo por supuesto.

Cada observación debe producir una acción específica y con nombre: mover el botón de añadir al carrito por encima del pliegue en móvil, conectar el zoom de imagen que el tema olvidó, arreglar el campo que se borra solo, ocultar la caja de cupón detrás de un enlace "¿Tienes un código?". Pequeñas por separado; acumulativas a lo largo de un trimestre.

Clarity es gratis y se instala correctamente en PrestaShop en diez minutos. La razón para hacerlo es la misma por la que la mayoría de propietarios de tiendas se equivoca sobre su propio proceso de pago: tú diseñaste la tienda, así que no puedes verla como la ve un visitante que llega por primera vez. Clarity te permite mirar por encima de su hombro. Combínalo con GA4 para los números, enmascara correctamente los datos de tus clientes, apúntalo a los tipos de página reales de PrestaShop y actúa según lo que te muestra: ese ciclo es lo que convierte una herramienta de analítica gratuita en mejoras medibles y defendibles para tu tienda.

Preguntas frecuentes

¿Microsoft Clarity es realmente gratis, o hay letra pequeña para una tienda PrestaShop con mucho tráfico?

Es gratis, sin límite de sesiones, y eso se mantiene tanto si tu tienda recibe cien visitas al día como decenas de miles. La contrapartida no es el dinero: es que los datos de comportamiento de tus visitantes los procesa Microsoft, así que debes incluir Clarity como encargado del tratamiento en tu política de privacidad y condicionarlo al consentimiento de analítica como cualquier otro rastreador de terceros. Si para ti es importante mantener los datos de comportamiento fuera de servidores de terceros, ese es el argumento a favor de una alternativa autoalojada, algo que valoramos en Matomo frente a Google Analytics.

¿Clarity ralentizará mi tienda PrestaShop?

El script de seguimiento carga de forma asíncrona, así que no bloquea el renderizado de la página. La nota realista sobre rendimiento es que añade una solicitud de terceros más, y en una tienda que ya carga varias etiquetas eso suma, otra razón para gestionarlas todas desde un único contenedor GTM condicionado por consentimiento en lugar de dispersar fragmentos. Si la velocidad de página ya es un problema, arréglala primero; una herramienta de grabación no será tu cuello de botella, pero tampoco pesa cero.

¿Clarity funciona con los pagos en una sola página y los pagos basados en módulos de PrestaShop?

Sí, Clarity graba lo que se renderiza en el navegador, así que captura tanto el pago nativo de PrestaShop en cinco pasos como los módulos de pago en una sola página. Lo que debes verificar es el enmascaramiento: los módulos de pago personalizados pueden renderizar campos en un marcado que las reglas de enmascaramiento predeterminadas no detectan, así que revisa algunas de tus propias grabaciones de pago de principio a fin y confirma que no sea visible ningún correo electrónico, dirección o campo similar a una tarjeta antes de confiar en él.

¿Puedo usar Clarity y GA4 al mismo tiempo?

Sí, y por lo general deberías hacerlo: responden preguntas distintas. GA4 te da los recuentos y tasas agregados que te dicen qué página tiene una fuga; Clarity te muestra por qué. Carga ambos mediante el mismo contenedor GTM y detrás del mismo activador de consentimiento de analítica para que se activen juntos, y ninguno se ejecute antes de que el visitante acepte.

¿Por qué Clarity muestra sesiones que no se comportan como compradores reales?

Porque algunas no lo son. El tráfico automatizado, rastreadores y bots de compra, se mueve por las páginas de PrestaShop y aparece en las grabaciones como sesiones instantáneas, sin desplazamiento y poco humanas. Filtra esas sesiones antes de sacar conclusiones, o rediseñarás una página en torno a un comportamiento que ningún cliente mostró jamás. Cubrimos este fenómeno en Google Storebot compra en tu tienda PrestaShop.