Qu'est-ce que Microsoft Clarity

Un outil gratuit de Microsoft pour analyser le comportement des utilisateurs. Il propose des cartes thermiques, des enregistrements de sessions et des rapports automatiques sur les problèmes d'expérience utilisateur.

Catégorie de cookie

Microsoft Clarity appartient à la catégorie analytique.

Installation avec Consentio

Ajoutez le code de suivi Microsoft Clarity avec les attributs type="text/plain" et data-category="analytics", afin qu'il ne se charge qu'après le consentement à la catégorie analytique :

<!-- Microsoft Clarity - bloqué jusqu'au consentement analytique -->
<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>

Alternative via l'API JavaScript

Chargez dynamiquement Microsoft Clarity une fois le consentement accordé :

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

Intégration via GTM

Dans Google Tag Manager, ajoutez un tag Microsoft Clarity avec une exigence de consentement pour analytics_storage. Clarity est disponible en tant que modèle communautaire dans la galerie de modèles GTM.

Google Consent Mode v2

Microsoft Clarity prend en charge Google Consent Mode. Si vous utilisez GTM, il vous suffit de définir l'exigence de consentement sur analytics_storage.

Vérification

1. Ouvrez les DevTools (F12) → onglet Réseau
2. Avant le consentement : clarity.ms ne doit pas se charger
3. Accordez le consentement analytique
4. Vérifiez clarity.ms dans l'onglet Réseau
5. Vérifiez le tableau de bord Clarity