Microsoft Clarity muestra el mapa de calor y la grabación de una visita que llegó desde Google Ads y se fue sin rellenar el formulario

Microsoft Clarity: qué es, cómo instalarlo con Google Tag Manager y cumplir el RGPD

GA4 te dice que 200 personas entraron en tu landing esta semana y que 3 rellenaron el formulario. Lo que no te dice es qué hicieron las otras 197: si bajaron hasta el botón, si pulsaron algo que no funcionaba o si se fueron a los dos segundos. Microsoft Clarity responde justo a eso con grabaciones de sesión y mapas de calor, y es gratis.

La parte que casi nadie cuenta es la otra mitad: Clarity graba lo que hace un visitante y usa cookies, así que en España entra de lleno en la normativa de cookies y en el RGPD. Desde el 31 de octubre de 2025, además, Microsoft exige una señal de consentimiento para las visitas desde el Espacio Económico Europeo. Instalarlo bien es cargarlo con Google Tag Manager solo cuando el usuario acepta, decirle a Clarity qué ha aceptado y enmascarar lo que no debe grabarse.

En resumen

  • Qué es: una herramienta gratuita de Microsoft que graba sesiones, genera mapas de calor y detecta clics continuos o fallidos. Complementa a GA4, no lo sustituye.
  • Cómo instalarlo: con una etiqueta HTML personalizada en Google Tag Manager, no con la conexión automática de Clarity, que publica tu contenedor con un activador en todas las páginas.
  • Consentimiento: la etiqueta solo se activa cuando el usuario acepta las cookies de estadística, y el código incluye clarity("consentv2", …).
  • Privacidad: enmascarado «Equilibrado» como mínimo y nada de Clarity en webs dirigidas a menores de 18 años.
  • Integraciones: GA4 y Google Ads, para filtrar grabaciones por campaña.

Qué es Microsoft Clarity y qué te aporta

Microsoft Clarity es una herramienta de análisis de comportamiento: en vez de contar visitas, te enseña cómo se mueve la gente por tu web. Según su documentación, es gratuita de forma permanente, sin límites de tráfico ni de sitios por cuenta, y los datos se guardan en Microsoft Azure. Tiene tres piezas:

  • Grabaciones de sesión. Reproducen la visita de una persona: ratón, clics, scroll, cambios de página. Se conservan 30 días (favoritas y una muestra aleatoria, hasta 9 meses).
  • Mapas de calor por URL, disponibles hasta 9 meses y sin mínimo de tráfico.
  • Panel con filtros (dispositivo, país, fuente, UTM) y comportamientos que detecta solo: clics continuos (de rabia), clics fallidos (sobre algo que no responde), desplazamiento excesivo, retrocesos rápidos y errores de JavaScript.
Mapa de calorQué te enseñaPara qué lo usas
Click mapsQué elementos reciben clics; incluye clics fallidos y continuos.Si el CTA se pulsa y si la gente pulsa cosas que no son enlaces.
Scroll mapsHasta dónde baja cada porcentaje de visitantes.Si el formulario queda donde casi nadie llega.
Area mapsClics totales dentro de una zona que seleccionas.Comparar bloques enteros.
Attention mapsTiempo en cada parte de la página.Si la sección de confianza se mira o se salta.
Tipos de mapa de calor según la documentación de Clarity; los nombres aparecen en inglés en la herramienta.

Clarity no sustituye a GA4: GA4 responde al cuánto y al de dónde; Clarity, al cómo y al por qué no. Si aún no tienes los eventos clave montados, empieza por configurar GA4 para saber qué campañas traen contactos.

Antes de instalar: cookies, consentimiento y RGPD

Clarity utiliza cookies. Según su lista oficial, las propias son _clck (identificador de usuario) y _clsk (une varias páginas en una grabación), y puede usar cookies de terceros de dominios de Microsoft como MUID, CLID, SM, MR y ANONCHK. Tres consecuencias prácticas:

  1. Necesitas consentimiento previo. La guía de cookies de la AEPD no exime a las cookies de análisis del consentimiento informado, seguir navegando no es consentimiento y el botón de rechazar debe estar en la misma capa y al mismo nivel que el de aceptar. Clarity no puede cargarse hasta que el usuario acepte la categoría de estadística.
  2. Microsoft también lo exige. Desde el 31 de octubre de 2025 Clarity aplica el «Consent Mode» a las visitas desde el EEE, Reino Unido y Suiza: no coloca cookies hasta recibir una señal válida. Sin ella funciona en modo sin cookies, con un identificador distinto por página vista, y las grabaciones de varias páginas, los embudos y los usuarios recurrentes salen incompletos.
  3. Tienes que informar. Tu política de cookies debe recoger estas cookies, su finalidad y su duración.

Esto no es asesoramiento legal

Te contamos cómo lo montamos nosotros y qué dicen la AEPD y Microsoft en sus documentos públicos. Tu política de cookies y si tu actividad admite grabar sesiones (salud, finanzas) es cosa de tu asesor. Microsoft indica que Clarity no debe usarse en webs dirigidas a menores de 18 años.

Cómo instalar Microsoft Clarity con Google Tag Manager

La documentación de Clarity ofrece tres caminos dentro de Tag Manager: la conexión automática desde Clarity, la plantilla «Microsoft Clarity – Official» de la galería de la comunidad y una etiqueta HTML personalizada con el código oficial. Nosotros usamos la tercera.

Esquema comparativo: la integración automática de Clarity publica el contenedor de Tag Manager con un activador en todas las páginas; la etiqueta manual se activa solo tras el consentimiento de estadística
Las dos formas de meter Clarity en Tag Manager. Solo una respeta tu banner de cookies.

Por qué no usamos la integración automática Clarity → GTM

En Settings → Setup → Google Tag Manager → Finish setup, Clarity te pide iniciar sesión con Google y permiso para publicar en Tag Manager; eliges cuenta y contenedor, pulsas «Create and publish» y Clarity crea la etiqueta y publica el contenedor por ti. Según la documentación, los tres métodos usan el activador «All pages» y la página de la integración no menciona el consentimiento. Es lo contrario de lo que necesitas en Europa: Clarity se ejecutaría antes de que el usuario toque el banner, y el contenedor se publicaría con cualquier cambio que tuvieras a medias. Si ya la conectaste, desconéctala en Settings → Setup → Google Tag Manager → Disconnect y pausa o borra la etiqueta que creó.

Paso a paso con una etiqueta HTML personalizada

Damos por hecho que tienes Tag Manager en WordPress (si no, empieza por la guía de Google Tag Manager para pymes) y un banner que lance un evento cuando el usuario acepta la categoría de estadística. En nuestro caso es Cookiebot con el evento cookie_consent_statistics; otros gestores tienen su equivalente.

  1. Crea el proyecto en Clarity en clarity.microsoft.com y, en Settings → Setup, elige Install manually → Get tracking code. El código contiene tu ID de proyecto.
  2. Crea la etiqueta en Tag Manager: Etiquetas → Nueva → HTML personalizado. Pega el código oficial y, detrás, la llamada consentv2 del bloque de abajo.
  3. Limita la activación. En Configuración avanzada → Opciones de activación de etiquetas, elige «Una vez por página».
  4. Activador por consentimiento: de tipo Evento personalizado, con el nombre del evento que lanza tu banner al aceptar estadística (cookie_consent_statistics en Cookiebot). Nada de «All pages».
  5. Prueba en vista previa con las cookies borradas: la etiqueta no debe activarse antes de aceptar y sí al aceptar. Si Tag Assistant no conecta, aquí tienes las causas habituales.
  6. Publica el contenedor.

La etiqueta queda así (sustituye TU_ID_DE_PROYECTO por el tuyo):

<script type="text/javascript">
(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", "TU_ID_DE_PROYECTO");

// Le decimos a Clarity qué ha aceptado el usuario (API de consentimiento v2)
window.clarity("consentv2", {
  ad_Storage: "denied",
  analytics_Storage: "granted"
});
</script>

¿Y si también acepta marketing?

Clarity documenta que interpreta automáticamente las señales del modo de consentimiento de Google si tu web ya lo usa. Nosotros, además, se lo decimos de forma explícita con consentv2, que es lo que su API recomienda. Si quieres que ad_Storage refleje la decisión real del usuario, usa una variable de Tag Manager con el estado del consentimiento de marketing en vez del valor fijo denied.

Esquema: el usuario acepta las cookies de estadística, Cookiebot lanza el evento, Tag Manager activa la etiqueta de Clarity con consentv2 y empieza la grabación; si rechaza, Clarity no se carga
El orden que respeta el RGPD: primero el banner, después Tag Manager, al final Clarity.

Cómo comprobar que está bien instalado

Borra las cookies de tu web, entra y rechaza el banner: en las herramientas de desarrollador (F12) no debe haber peticiones a clarity.ms ni cookies _clck o _clsk. Repite aceptando estadística: ahora sí aparecen. Por último, pega en la consola el fragmento de verificación de Microsoft y comprueba que consentStatus devuelve analytics_storage: "GRANTED".

clarity("metadata", (d, upgrade, consent) => {
  console.log("consentStatus:", consent);
}, false, true, true);

Enmascarado: qué se ve en las grabaciones y qué no

Una grabación es una reconstrucción de la página a partir de su HTML, no un vídeo. Lo que Clarity enmascara no se envía nunca a sus servidores: se sustituye por símbolos en el navegador. El nivel se elige en Configuración → Enmascaramiento (la interfaz de Clarity está en español):

ModoQué ocultaCuándo usarlo
EstrictoTodo el texto de la página.Áreas privadas o webs con datos personales en pantalla.
Equilibrado (por defecto)Lo que Clarity clasifica como sensible: números y direcciones de correo.La mayoría de webs de servicios. Es el que usamos nosotros.
RelajadoNada, salvo campos de formulario y desplegables.Solo si ninguna página muestra datos de usuarios.

En los tres modos, lo que se escribe en campos de formulario y desplegables está siempre enmascarado y no se puede cambiar. Tres matices más:

  • Puedes afinar por elemento en Enmascaramiento por elemento con un selector CSS, o en tu HTML con data-clarity-mask="true" y data-clarity-unmask="true". Los atributos mandan sobre el panel y se aplican a los elementos hijos.
  • Clarity no enmascara el contenido de las hojas de estilo: no metas datos sensibles en CSS.
  • Los cambios afectan solo a grabaciones nuevas y pueden tardar hasta una hora. Y si necesitas borrar los datos de una persona concreta, la FAQ de Clarity indica que hay que eliminar el proyecto completo; tenlo en cuenta en tu registro de tratamientos.

Integraciones con GA4 y Google Ads

Las dos integraciones se activan desde el panel de Clarity con una cuenta de Google que tenga acceso a la propiedad o a la cuenta publicitaria. No hay que tocar Tag Manager.

GA4: datos de Analytics dentro de Clarity

En Settings → Setup → Google Analytics integration → Get Started eliges la propiedad GA4 (o la configuras a mano con el ID de cuenta, el ID de medición G-… y el ID de propiedad). Clarity trae datos de GA4 a su panel para cruzarlos con las grabaciones. Dos límites documentados: una sola propiedad por proyecto, y Clarity no envía la URL de la grabación a GA4. El cruce se mira desde Clarity, no desde Analytics.

En Settings → Integrations vinculas tu cuenta de Google Ads. Clarity muestra junto a las sesiones métricas de la cuenta (impresiones, clics, CTR, CPC, coste, conversiones, CPA, valor de conversión y tipo de campaña, según los anuncios oficiales de Clarity) y permite filtrar grabaciones y mapas de calor por campaña. Para una pyme es la integración más útil: ves la landing que más gasta con los ojos de quien ha hecho clic.

Un truco que usamos mucho: como Google Ads añade a nuestras URLs utm_term={keyword} mediante el sufijo de URL final, en Clarity filtramos por UTM term y vemos las grabaciones de quienes buscaron una palabra concreta. Lo explicamos en cómo usar UTM sin romper el seguimiento.

Nuestro caso: cómo lo tenemos en migoramarketing.es

Nuestra web es WordPress con Kadence, Tag Manager con el plugin GTM4WP y Cookiebot cargado únicamente desde Tag Manager, con el consentimiento por defecto en denied. Clarity está montado como describe esta guía: etiqueta HTML personalizada con consentv2, «Una vez por página», activador cookie_consent_statistics, sin plugin, enmascarado «Equilibrado» e integraciones con GA4 y Google Ads. El píxel de Meta, en cambio, va con cookie_consent_marketing, como contamos en la guía del píxel de Meta con Tag Manager.

Etiqueta HTML personalizada de Microsoft Clarity en Google Tag Manager con el activador cookie_consent_statistics y la opción Una vez por página
Nuestra etiqueta de Clarity en Tag Manager: el activador es el evento de consentimiento de estadística, no «All pages».
Ajustes de enmascaramiento de Microsoft Clarity con el modo Equilibrado seleccionado
Enmascaramiento «Equilibrado» en nuestro proyecto: los correos, los números y lo escrito en formularios no salen del navegador.
Panel de Microsoft Clarity del proyecto de Migora Marketing con las pestañas Publicidad y Google Analytics y el módulo de Google Ads
Nuestro panel de Clarity: con las integraciones activas aparecen las pestañas «Publicidad» y «Google Analytics» y el módulo de Google Ads.

Qué mirar en Clarity si tienes una pyme

Es fácil pasarse una tarde viendo grabaciones al azar y no sacar nada. Nuestra rutina con las landings de campaña:

  1. Filtra antes de mirar: campaña de Google Ads, dispositivo móvil y URL de la landing. Una grabación sin filtro es ruido.
  2. Mapa de scroll. ¿Qué porcentaje llega al formulario o al botón de WhatsApp? Si el CTA está donde solo baja una minoría, el problema no es el texto del botón.
  3. Clics fallidos y continuos: te dicen qué espera la gente que sea clicable y no lo es.
  4. Grabaciones de quien llegó al formulario y no lo envió: campos que confunden, errores de validación, un teclado móvil que tapa el botón.
  5. Compara con los datos duros. Lo que ves en Clarity es una hipótesis; confírmala en GA4 y Google Ads y cambia una cosa a la vez.

Errores típicos

ErrorConsecuenciaSolución
Integración automática Clarity → GTM o activador «All pages»Clarity se carga antes del banner; cookies sin consentimientoEtiqueta HTML con activador por consentimiento de estadística
Instalarlo dos veces (plugin + Tag Manager)Dos scripts y más JavaScript del necesarioUn solo método. Busca clarity.ms en el código fuente
No enviar la señal de consentimientoSesiones de una sola página, sin embudos ni usuarios recurrentesAñadir consentv2 y comprobarlo en consola
Enmascaramiento «Relajado» por ver másCorreos y números visibles en grabaciones«Equilibrado» por defecto; «Estricto» en áreas privadas
No actualizar la política de cookiesIncumples el deber de información de la AEPDAñadir las cookies de Clarity, finalidad y duración
Mirar grabaciones sin filtroHoras perdidas sin conclusionesFiltrar por campaña, dispositivo y URL

Clarity vs Hotjar (ahora Contentsquare)

La comparación clásica «Clarity vs Hotjar» ha quedado desfasada: Hotjar se ha integrado en Contentsquare y, según su propia web, ya no se pueden crear cuentas nuevas en Hotjar; los usuarios nuevos entran en el plan gratuito de Contentsquare. Comparamos solo con lo que ambas empresas publican hoy:

Microsoft ClarityHotjar / Contentsquare (plan gratuito)
PrecioGratis, sin límites de tráfico ni de sitios (según su FAQ)Plan Free con límite mensual de sesiones, un proyecto y un mes de acceso a datos (según su página de precios)
Grabaciones y mapas de calorSí, con detección de clics continuos, clics fallidos y errores JSSí, con embudos
Encuestas y feedbackNo es su focoEncuestas básicas incluidas
RetenciónGrabaciones 30 días; mapas 9 mesesUn mes de acceso a datos
Comparación cualitativa a partir de la documentación pública de ambas herramientas. No usamos Hotjar ni Contentsquare en nuestra web.

Para una pyme que capta contactos, Clarity cubre lo necesario sin coste y se integra con las dos plataformas donde ya está el dinero. Las obligaciones de consentimiento y enmascarado son las mismas con cualquiera de las dos.

Sigue con: cómo configurar Cookiebot y el modo de consentimiento y cómo medir los clics en WhatsApp y en el teléfono. Si quieres usar estos datos para mejorar tus campañas, así trabajamos la gestión de Google Ads para pymes.

Preguntas frecuentes

¿Microsoft Clarity es gratis de verdad?

Sí. Su FAQ oficial dice que es un servicio gratuito de forma permanente, sin límites de tráfico y sin obligación de pasar a una versión de pago. Lo que sí tiene límites es la retención: grabaciones 30 días (favoritas y una muestra, hasta 9 meses) y mapas de calor hasta 9 meses.

¿Puedo instalar Clarity sin banner de cookies?

En España, no. La guía de cookies de la AEPD no exime a las cookies de análisis del consentimiento informado, y Clarity usa cookies propias y de terceros. Además, desde el 31 de octubre de 2025 Clarity no coloca cookies a visitantes del EEE sin señal de consentimiento, así que tendrías datos incompletos.

¿Qué pasa si el usuario rechaza las cookies?

Con la instalación que describimos, Clarity ni siquiera se carga, porque la etiqueta depende del evento de aceptación. Si lo cargaras sin consentimiento, funcionaría en modo sin cookies: un identificador por página vista, sin unir páginas en una sesión ni reconocer usuarios recurrentes.

¿Clarity ralentiza la web?

Microsoft afirma que el script es asíncrono y no afecta a la carga percibida. No lo des por hecho: mide tus Core Web Vitals antes y después con PageSpeed Insights. En nuestro caso, al cargarlo solo tras el consentimiento, no entra en la carga inicial de quien aún no ha aceptado.

¿Ve Clarity lo que la gente escribe en mis formularios?

No. El contenido de los campos de formulario y los desplegables está enmascarado en los tres modos y no se puede desactivar; se sustituye por símbolos en el navegador y no llega a Microsoft. Lo que sí debes revisar es el texto visible de la página: con Equilibrado se ocultan números y correos; con Estricto, todo.

¿Quieres Clarity bien montado, con consentimiento y conectado a tus campañas?

Revisamos tu Tag Manager, tu banner de cookies y tu Clarity, y lo dejamos funcionando junto a GA4 y Google Ads. Sin permanencia y hablando directamente con quien lo configura.

Miguel Ángel Cebrián, fundador de Migora Marketing

Miguel Ángel Cebrián

Fundador de Migora Marketing. Tiene 7 certificaciones oficiales de Google (Búsqueda, Display, Medición, Vídeo, Shopping con IA, Optimización de conversiones y Google Analytics). Configura y revisa a diario Google Tag Manager, GA4, Google Ads y el píxel de Meta, empezando por nuestra propia web.

Sigue leyendo