Qué es Microsoft Clarity

Una herramienta gratuita de Microsoft para analizar el comportamiento de los usuarios. Ofrece mapas de calor, grabaciones de sesiones e informes automáticos de problemas de UX.

Categoría de cookie

Microsoft Clarity pertenece a la categoría analytics.

Instalación con Consentio

Añade el código de seguimiento de Microsoft Clarity con los atributos type="text/plain" y data-category="analytics", para que solo se cargue después de que se conceda el consentimiento de analítica:

<!-- Microsoft Clarity - bloqueado hasta obtener el consentimiento de analítica -->
<script type="text/plain" data-category="analytics">
  (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_CLARITY_ID");
</script>

Alternativa con API de JavaScript

Carga Microsoft Clarity dinámicamente después de que se conceda el consentimiento:

Consentio.onConsentChange((consent) => {
  if (consent.analytics) {
    // Cargar Microsoft Clarity
    (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_CLARITY_ID");
  }
})

Integración mediante GTM

En Google Tag Manager, añade una etiqueta de Microsoft Clarity con un requisito de consentimiento para analytics_storage. Clarity está disponible como plantilla comunitaria en la Galería de plantillas de GTM.

Google Consent Mode v2

Microsoft Clarity admite Google Consent Mode. Si usas GTM, basta con establecer el requisito de consentimiento en analytics_storage.

Verificación

1. Abre las herramientas de desarrollador (F12) → pestaña Red
2. Antes del consentimiento: clarity.ms no debería cargarse
3. Concede el consentimiento de analítica
4. Verifica clarity.ms en la pestaña Red
5. Comprueba el panel de Clarity