Microsoft Clarity: analítica visual para entender usuarios reales

Guía práctica para instalar Microsoft Clarity, leer su dashboard y usar heatmaps en un proyecto web.

Por Sofia Grijalva8 de septiembre de 2026

Qué es Microsoft Clarity

Microsoft Clarity es una herramienta gratuita de analítica de comportamiento. A diferencia de una herramienta de métricas tradicional, que suele responder cuántas personas llegaron a una página, Clarity ayuda a responder qué hicieron esas personas cuando estuvieron ahí.

Con Clarity puedes ver grabaciones de sesión, mapas de calor, clics problemáticos, scroll depth, errores de JavaScript, datos de dispositivo, fuentes de tráfico y segmentos de usuarios. La idea no es reemplazar completamente a Google Analytics o a otra plataforma de producto, sino complementar esos datos con evidencia visual.

Por ejemplo: si una landing page tiene muchas visitas pero pocas conversiones, Analytics puede decirte dónde está cayendo el funnel. Clarity puede mostrarte si la gente no llega al CTA, si está haciendo clic en algo que parece botón pero no lo es, si abandona al encontrar un error o si vuelve rápido a la página anterior porque el contenido no era lo que esperaba.

Para qué sirve en un proyecto real

Clarity es especialmente útil cuando necesitas observar el comportamiento de tus usuarios. Te ayuda a encontrar señales como estas:

CTAs que casi nadie ve o que reciben muchos clics.
Elementos que parecen interactivos pero no hacen nada.
Secciones que los usuarios no alcanzan a leer porque están demasiado abajo.
Formularios donde la gente se detiene, vuelve atrás o abandona.
Errores de JavaScript que aparecen durante interacciones reales.
Diferencias de comportamiento entre desktop, tablet y mobile.

Lo importante es ver a Clarity como una herramienta de investigación. Un rage click o un scroll muy rápido no siempre significa que algo está mal, pero sí es una señal fuerte de que vale la pena mirar la sesión o comparar con otros usuarios.

Cómo instalarlo

Primero entra a clarity.microsoft.com, crea un proyecto y copia tu Project ID. Después elige una de estas opciones.

Manual

Si tienes acceso al <head> del sitio, ve a Settings → Setup → Get tracking code y pega el script antes de </head>.

<head>
  <!-- Otros metadatos del sitio -->
 
  <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_PROJECT_ID");
  </script>
</head>

NPM

En proyectos con bundler, usa el paquete oficial.

npm install @microsoft/clarity

import Clarity from "@microsoft/clarity";
 
Clarity.init(import.meta.env.VITE_CLARITY_PROJECT_ID);

En tu .env:

VITE_CLARITY_PROJECT_ID=tu_project_id

Google Tag Manager o CMS

Clarity también se puede instalar desde Google Tag Manager, Shopify, Squarespace, Wix, WordPress y otras plataformas. Es buena opción cuando el equipo de marketing administra scripts o cuando el sitio vive en un CMS.

Verificar que está funcionando

Hay dos formas rápidas de verificar la instalación.

La primera es desde Clarity: abre tu proyecto y revisa si aparecen datos en Dashboard o Recordings. Si hay usuarios activos, Clarity puede mostrar sesiones en tiempo real.

La segunda es desde DevTools:

Abre tu sitio.
Entra a Inspect → Network.
Interactúa con la página.
Busca requests hacia https://www.clarity.ms/collect.

Si ves requests POST hacia esa URL, el script está enviando eventos.

Cómo leer el dashboard

El dashboard es la vista general del comportamiento del sitio. No se trata solo de mirar números grandes, sino de conectar señales.

Antes de leer cualquier métrica, revisa el rango de fechas, filtros y segmentos activos. Un dashboard de “últimos 3 días en mobile” no cuenta la misma historia que uno de “últimos 30 días en todos los dispositivos”.

Vista del dashboard de Microsoft Clarity con métricas e insights

Dato	Qué significa	Cómo usarlo
Sessions y users	Volumen de sesiones y visitantes detectados.	Mide alcance, pero recuerda que sesión no es lo mismo que persona única.
Pages per session y duration	Cuántas páginas visita alguien y cuánto tiempo permanece.	Ayuda a distinguir exploración, lectura profunda o posibles bloqueos.
Click count y scroll depth	Clics registrados y profundidad de scroll.	Útil para validar si los elementos clave se ven y reciben interacción.
Device, browser y OS	Dispositivo, navegador y sistema operativo.	Imprescindible para encontrar bugs responsive o de compatibilidad.
Source, medium y campaign	Datos de tráfico y UTMs.	Permiten comparar comportamiento por canal o campaña.
JavaScript y click errors	Errores del navegador, especialmente después de una acción.	Revisa recordings para ver qué estaba haciendo el usuario cuando falló.
Rage clicks y dead clicks	Clics repetidos o clics sin respuesta visible.	Señalan frustración, lentitud o elementos que parecen interactivos.
Excessive scrolling y quick backs	Scroll intenso o regreso rápido a la página anterior.	Pueden revelar navegación confusa o contenido difícil de encontrar.
LCP, INP y CLS	Métricas de performance web.	Conectan velocidad, respuesta y estabilidad visual con experiencia real.

La mejor lectura casi siempre combina tres pasos: detecta una señal en el dashboard, filtra el segmento afectado y mira grabaciones o heatmaps de ese mismo grupo.

Recordings: el contexto detrás del número

Las grabaciones de sesión reconstruyen visualmente lo que hizo una persona: páginas visitadas, clicks, taps, scrolls, cambios de pantalla y eventos relevantes. No son videos literales; Clarity captura HTML y acciones para reconstruir la experiencia.

Animación de recordings en Microsoft Clarity

Esto importa porque un número aislado puede engañar. Un click count alto puede parecer engagement, pero al mirar la sesión quizás descubres que el usuario estaba intentando cerrar un modal que no respondía. Un scroll depth bajo puede parecer desinterés, pero tal vez el contenido principal ya estaba arriba y la página cumplió su objetivo.

Usa recordings cuando necesites entender el “por qué” detrás de una métrica.

Qué son los heatmaps

Los heatmaps son visualizaciones agregadas de interacción. En lugar de ver una sesión individual, ves patrones acumulados sobre una página o grupo de páginas.

Clarity genera heatmaps a partir de los datos que ya recoge: clicks, scrolls, tiempo de atención y conversiones, según el tipo de mapa. No necesitas crearlos manualmente, aunque serán más confiables cuando haya suficiente tráfico.

También puedes filtrar heatmaps por dispositivo, navegador, país, campaña, URL o segmento. Esa parte es clave: un heatmap mezclado de desktop y mobile puede esconder problemas importantes porque el layout cambia por completo.

Animación de heatmaps de clics, scroll y atención en Microsoft Clarity

Tipos de heatmaps en Clarity

Tipo	Qué muestra	Cuándo usarlo
Click maps	Dónde hacen clic los usuarios y qué elementos reciben más interacción.	Para revisar CTAs, navegación, cards, links, botones y elementos que parecen clicables.
Scroll maps	Hasta qué parte de la página llega la gente. Las zonas calientes reciben más vistas y las frías menos.	Para validar jerarquía de contenido y decidir qué debe estar arriba del fold.
Area maps	Total de clics dentro de un área seleccionada.	Para comparar bloques completos, como hero, pricing, footer o secciones de cards.
Conversion maps	Qué clics o zonas se relacionan con conversiones en sitios e-commerce.	Para entender qué interacciones empujan compras o ingresos.
Attention maps	Cuánto tiempo pasan los usuarios mirando cada parte de la página.	Para encontrar contenido que retiene atención o zonas que se ignoran.

Los click maps de Clarity trabajan por elementos, no solo por coordenadas absolutas. Eso ayuda en sitios responsive, porque un botón puede moverse según el viewport y aun así seguir siendo el mismo elemento lógico. También puedes separar all clicks, dead clicks, rage clicks, error clicks, first clicks y last clicks.

En scroll maps, revisa el average fold: la zona promedio visible antes de que el usuario empiece a scrollear. Si solo una minoría llega a una sección crítica, probablemente esa sección está cargando con demasiado peso en la conversión.

Cómo convertir Clarity en decisiones

Una forma simple de trabajar con Clarity es usarlo como ciclo de investigación:

Detecta una señal: muchos quick backs, bajo scroll depth, rage clicks o errores.
Filtra por página, dispositivo, campaña o navegador.
Mira grabaciones del segmento afectado.
Abre el heatmap de esa misma página.
Formula una hipótesis concreta.
Cambia una cosa en el diseño o el código.
Compara el comportamiento después del cambio.

Ejemplo: si mobile tiene muchos dead clicks en una card, el heatmap puede mostrar que la gente intenta tocar toda la card, pero solo el título es link. La decisión podría ser convertir la card completa en un enlace accesible o ajustar el estilo para que el affordance sea más claro.

Buenas prácticas

Instala Clarity solo en entornos donde tenga sentido medir usuarios reales.
Excluye o segmenta tráfico interno si tu equipo prueba mucho el sitio.
Revisa datos por dispositivo antes de sacar conclusiones.
No envíes información personal sensible en custom tags, IDs o eventos, y revisa consentimiento de cookies según tu contexto.
Combina dashboard, recordings y heatmaps; ninguno cuenta la historia completa por sí solo.
Documenta los cambios que hagas para poder comparar antes y después.
Usa segmentos guardados para repetir análisis sin reconstruir filtros cada vez.

Resumen

Microsoft Clarity ayuda a ver el comportamiento real detrás de las métricas. El dashboard te muestra señales generales, las grabaciones te dan contexto individual y los heatmaps revelan patrones visuales en páginas específicas.

La instalación puede ser tan simple como pegar un script en el <head>, instalar @microsoft/clarity con NPM o conectarlo desde Google Tag Manager. Lo más importante viene después: leer los datos con intención, cruzar señales y convertirlas en hipótesis pequeñas que puedas probar en el producto.