Hace rato quería traer algo simple, gratis y que te dé valor al toque. Microsoft Clarity es exactamente eso: un “poné y mirá” para entender cómo navegan tus usuarios, con mapas de calor y grabaciones de sesiones. Lo probé en varios proyectos y la data que te da te cambia decisiones de UI en minutos. En este post te cuento qué es, cómo lo uso y cómo integrarlo en Next.js en 2 minutos.
¿Qué es Clarity y por qué vale la pena?
Clarity es una herramienta de analítica enfocada en comportamiento, no en métricas vanity. Te permite:
- Ver grabaciones reales de las sesiones (Session Replay).
- Analizar dónde clickea la gente, hasta dónde scrollea y qué ignoran (Heatmaps).
- Detectar señales como rage clicks, dead clicks, excesos de scroll, etc.
Es gratis, no te pide tarjeta y para sitios chicos/medianos venís sobrado.
Un vistazo rápido al dashboard
El dashboard es muy directo:
- Timeline con sesiones grabadas, filtros por dispositivo, país, fuente, etc.
- Panel de insights automáticos (rage clicks, U-turns, JS errors).
- Heatmaps por página, con vistas de clics, scroll y movimiento.
Tip: filtrá por “Rage clicks” y “JS errors” para descubrir fricciones que no se ven con Google Analytics.
Session Replay: dónde aparece el dolor de verdad
Mirar sesiones te muestra cosas que los números no cuentan:
- Campos donde la gente duda o reintenta.
- Elementos que parecen clickeables pero no lo son.
- Layouts que en mobile se rompen por un pixel.
Podés ajustar velocidad, saltar a interacciones y compartir un link de la grabación con tu equipo.
Integralo en Next.js en 2 minutos
Clarity es un script que cargás de forma asíncrona. Lo ideal en Next.js es usar next/script. Te dejo dos variantes según tu setup.
App Router (app/)
En app/layout.tsx (o en el layout raíz):
// app/layout.tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es">
<body>
{children}
{process.env.NEXT_PUBLIC_CLARITY_ID && (
<Script id="clarity" strategy="afterInteractive">
{`
(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", "${process.env.NEXT_PUBLIC_CLARITY_ID}");
`}
</Script>
)}
</body>
</html>
);
}Pages Router (pages/)
En pages/_app.tsx:
// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
{process.env.NEXT_PUBLIC_CLARITY_ID && (
<Script id="clarity" strategy="afterInteractive">
{`
(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", "${process.env.NEXT_PUBLIC_CLARITY_ID}");
`}
</Script>
)}
</>
);
}Recomendado:
- Guardá el ID del proyecto en NEXT_PUBLIC_CLARITY_ID.
- Cargalo solo en producción (podés chequear process.env.NODE_ENV === "production").
- Si tenés rutas privadas/admin, filtralas desde Clarity con “URL filters”.
Tips para sacarle el jugo
- Heatmaps: esperá un poco de tráfico para que sean representativos. Mirá desktop vs mobile por separado.
- Eventos custom: logueá acciones clave para filtrar mejor las grabaciones:
// Por ejemplo, cuando alguien hace click en "Comprar" window.clarity && window.clarity("event", "cta_buy_click"); - Identificar usuarios (sin PII): si tenés un userId interno, podés asociarlo:
window.clarity && window.clarity("identify", "user_1234");Ojo: no mandes emails ni datos sensibles.
- Privacidad: Clarity enmascara inputs por defecto. Si querés ocultar algo extra, agregá la clase clarity-mask. Para desmascarar algo específico, clarity-unmask.
- Consentimiento: si usás banner de cookies, podés cargar el script solo cuando haya consent o usar el modo de “consent” de Clarity.
Mirá el paso a paso acá
Cierre
Si nunca miraste una sesión real de tus usuarios, te juro que te vas a sorprender. Clarity te da ese cachetazo amable que te ayuda a priorizar cambios con impacto. Si lo integraste o te trabaste con algo, dejame un comentario y lo vemos. Nos leemos en el próximo, y a seguir remándola con código y mate.
