Installer Microsoft Clarity avec Google Tag Manager : le guide complet

Google Analytics 4 vous indique combien d’utilisateurs visitent une page, combien convertissent et d’où ils viennent. C’est précieux, mais ces chiffres ne répondent jamais à la vraie question : pourquoi vos visiteurs se comportent-ils ainsi ? Pourquoi 80 % des visiteurs quittent votre page produit sans cliquer sur “Ajouter au panier” ? Pourquoi votre formulaire de devis affiche un taux d’abandon de 65 % ? GA4 ne le dira pas.

C’est précisément le rôle de Microsoft Clarity : un outil d’analyse comportementale gratuit qui enregistre les sessions, génère des heatmaps et identifie automatiquement les zones de friction sur votre site. Couplé à Google Tag Manager, son déploiement prend dix minutes et s’intègre parfaitement à votre stack de tracking existante.

Dans ce guide, vous allez apprendre à :

• installer Microsoft Clarity avec Google Tag Manager
• gérer correctement le consentement utilisateur avec l’API Consent V2 (obligatoire en Europe depuis octobre 2025)
• exploiter des Smart Events pour enrichir vos analyses de sessions
• vérifier que tout fonctionne avant de mettre en production

Pas encore convaincu ? Vous pouvez explorer une démo publique de Microsoft Clarity qui vous donne accès à un projet réel avec heatmaps, recordings et Smart Events, sans rien installer.

Microsoft Clarity, qu’est-ce que c’est ?

Microsoft Clarity est un outil d’analyse comportementale gratuit développé par Microsoft, disponible publiquement depuis fin 2020. Son objectif est simple : vous montrer comment vos visiteurs interagissent réellement avec votre site, là où Google Analytics 4 se contente de vous dire combien ils sont et ce qu’ils consultent.

Concrètement, Clarity vous donne accès à quatre familles de fonctionnalités.

1. Les enregistrements de session (session recordings) rejouent en vidéo le parcours d’un visiteur sur votre site, du premier clic à la sortie.
2. Les cartes de chaleur (heatmaps) agrègent les clics, les mouvements de souris et le scroll pour visualiser les zones d’attention sur une page.
3. Les insights automatiques détectent des comportements anormaux comme les rage clicks (clics répétés et frustrés), les dead clicks (clics sur un élément non interactif), les scrolls excessifs ou les retours en arrière rapides.
4. Les Smart Events identifient automatiquement des actions clés (achat, ajout au panier, soumission de formulaire, inscription).

Clarity est 100 % gratuit, sans limite de trafic, sans limite de sessions enregistrées, sans limite d’utilisateurs sur le compte. Microsoft propose également une intégration native avec Google Analytics 4, permettant de filtrer les enregistrements Clarity directement depuis une dimension GA4, et inversement.

Données quantitatives vs données qualitatives : pourquoi Clarity complète GA4 (et ne le remplace pas)

Pour bien comprendre la valeur de Microsoft Clarity, il faut clarifier une distinction essentielle dans le monde de l’analytics : la différence entre données quantitatives et données qualitatives.

Les données quantitatives répondent aux questions “combien”, “quoi” et “où”. Combien de sessions hier ? Quel est le taux de conversion sur la page panier ? D’où viennent vos visiteurs (canal d’acquisition, pays, appareil) ? Quelles pages génèrent le plus de revenu ? C’est exactement ce que mesure Google Analytics 4 : des métriques agrégées, exprimées en chiffres, qui décrivent ce qui s’est passé sur votre site.

Les données qualitatives, elles, répondent aux questions “pourquoi” et “comment”. Pourquoi les visiteurs abandonnent-ils ce formulaire à l’étape 2 ? Comment scrollent-ils sur cette landing page ? Quels boutons attirent leur attention et lesquels sont totalement ignorés ? Ces données ne se résument pas à un chiffre : elles s’observent à travers des enregistrements vidéo, des cartes de chaleur, des replays de parcours. C’est le terrain de jeu de Microsoft Clarity, et plus largement des outils d’analyse de session (Hotjar, FullStory, Mouseflow, Smartlook).

Les deux approches sont complémentaires, jamais substituables. GA4 vous alerte sur le fait que votre tunnel de commande affiche un taux d’abandon anormal entre l’étape “informations de livraison” et “paiement”. Clarity vous montre ensuite, en rejouant dix sessions abandonnées, que vos utilisateurs tentent désespérément de cliquer sur un champ qui ne réagit pas sur mobile, ou qu’ils butent sur un message d’erreur incompréhensible.

C’est cette boucle “GA4 détecte le problème → Clarity en révèle la cause → vous corrigez → GA4 mesure l’impact” qui fait toute la valeur de la démarche d’optimisation de la conversion (CRO).

Étape 1 : créer un compte Microsoft Clarity et récupérer le project ID

Avant de toucher à Google Tag Manager, vous devez créer un projet Clarity et récupérer son project ID, l’identifiant unique qui servira à associer votre site web à votre compte Clarity.

Rendez-vous sur https://clarity.microsoft.com et connectez-vous avec votre compte Microsoft, Google, Facebook ou via une adresse e-mail dédiée. La création du compte est immédiate et ne nécessite aucune information de paiement.

Une fois connecté, cliquez sur Nouveau projet (ou New project). Renseignez le nom de votre projet, l’URL de votre site web, et sélectionnez la catégorie qui correspond le mieux à votre activité (e-commerce, blog, SaaS, etc.).

Une fois le projet créé, vous arrivez sur le tableau de bord. Pour récupérer le project ID, rendez-vous dans le menu Settings > Overview : le project ID est affiché sous le nom du projet. Dans cet exemple, la chaîne wszl6h7j2r est notre project ID. C’est cette valeur que vous allez coller dans Google Tag Manager à l’étape suivante.

Vous pouvez aussi retrouver cet identifiant en allant dans Settings > Setup > Get tracking code, où il apparaît dans le snippet JavaScript fourni par Clarity.

Étape 2 : installer Microsoft Clarity avec Google Tag Manager (template officiel)

Plusieurs méthodes existent pour installer Clarity avec Google Tag Manager : l’intégration automatique depuis l’interface Clarity, l’installation manuelle via une balise HTML personnalisée, ou l’utilisation du modèle de balise officiel “Microsoft Clarity - Official” disponible dans la galerie communautaire de GTM.

C’est cette dernière méthode que nous recommandons. Pourquoi ? Parce qu’un modèle de balise officiel est sandboxé, validé par Google, et il évite l’injection de JavaScript brut dans votre conteneur (source classique d’erreurs et de failles de sécurité). Le modèle est maintenu directement par Microsoft sur son dépôt GitHub officiel, ce qui garantit sa pérennité.

Importer le modèle de balise officiel

Connectez-vous à votre conteneur Google Tag Manager. Allez dans Tags > New.

Donnez-lui un nom explicite, par exemple Microsoft Clarity - Base Tag. Le nommage cohérent de vos balises est essentiel pour la maintenance à long terme de votre conteneur.

Cliquez sur Tag Configuration, puis sur Discover more tag types in the Community Template Gallery.

Dans la recherche, tapez Clarity, puis sélectionnez l’option Microsoft Clarity - Official.

Cliquez sur Ajouter à l’espace de travail (Add to workspace), puis confirmez l’ajout du modèle à votre conteneur.

Configurer la balise avec votre project ID

Une fois le modèle ajouté, vous arrivez sur la page de configuration de la balise. Le seul champ obligatoire est le Clarity Project ID. Collez la valeur récupérée à l’étape précédente. Dans cet exemple, il s’agit de wszl6h7j2r.

Le modèle officiel expose également plusieurs options avancées dans une section Custom options (ou Options personnalisées) :

• Custom ID : un identifiant utilisateur unique (équivalent du User ID dans GA4) qui permet de retrouver toutes les sessions d’un même utilisateur connecté.
• Session ID : un identifiant de session personnalisé, utile si vous souhaitez croiser vos données Clarity avec un identifiant de session côté serveur.
• Page ID : un identifiant de page personnalisé.
• Friendly Name : un nom lisible pour l’utilisateur (par exemple son prénom ou son segment), qui s’affichera dans l’interface Clarity à côté de chaque session.
• Custom Tags : des couples clé/valeur libres qui permettent d’étiqueter vos sessions (segment utilisateur, version A/B testée, statut d’abonnement, etc.) et de les filtrer ensuite dans l’interface Clarity.

Vous pouvez laisser ces options vides pour un premier déploiement et y revenir plus tard.

Les Custom Tags sont particulièrement puissants en pratique. Quelques cas d’usage concrets que vous voudrez probablement mettre en place dès vos premières semaines :

• ab_test_variant=B pour filtrer les sessions selon la variante d’un test A/B en cours et comparer visuellement les parcours.
• plan=premium ou plan=free pour observer comment les utilisateurs payants se comportent différemment des utilisateurs gratuits sur votre SaaS.
• funnel_step=checkout_step_3 pour isoler les sessions bloquées à une étape précise de votre tunnel et comprendre pourquoi.
• user_role=admin pour exclure (côté filtre Clarity) les sessions internes de vos équipes lors de l’analyse.

Pour passer un Custom Tag, branchez le champ Value sur une variable GTM qui retourne dynamiquement la valeur (une variable de couche de données, une variable de cookie ou une variable JavaScript personnalisée).

Choisir le déclencheur

Cliquez sur la section Déclenchement et sélectionnez Initialization - All Pages (Toutes les pages). Le code Clarity doit en effet se charger sur l’intégralité de votre site pour capturer toutes les sessions.

Cliquez sur Save, puis sur Submit en haut à droite de votre conteneur pour publier vos changements. Quelques minutes après la publication, vous devriez commencer à voir les premières sessions apparaître dans votre dashboard Clarity.

Étape 3 : gérer le consentement avec l’API Consent V2 de Clarity (obligatoire en Europe)

Depuis le 31 octobre 2025, Microsoft Clarity impose un signal de consentement valide pour toutes les visites originaires de l’Espace Économique Européen, du Royaume-Uni et de la Suisse. Sans signal de consentement, Clarity bascule en mode dégradé (no-consent mode) et ne dépose aucun cookie, ce qui empêche le suivi cross-session : chaque page vue est alors comptée comme un utilisateur unique distinct, et vous perdez la majeure partie de la valeur analytique de l’outil.

C’est ici qu’intervient l’API Consent V2, la méthode officielle et recommandée par Microsoft pour transmettre à Clarity la décision de l’utilisateur quant aux cookies. Elle remplace l’ancienne API Consent V1, vouée à être dépréciée.

Le principe de l’API Consent V2

L’API Consent V2 expose une fonction JavaScript globale window.clarity('consentv2', ...) qui prend deux paramètres :

• ad_Storage : consentement pour le stockage de données liées à la publicité (valeurs : "granted" ou "denied")
• analytics_Storage : consentement pour le stockage de données analytiques (valeurs : "granted" ou "denied")

Voici les quatre combinaisons possibles, à appeler après la décision de l’utilisateur :

// Consentement total accordé
window.clarity('consentv2', {
  ad_Storage: "granted",
  analytics_Storage: "granted"
});

// Refus de l'analytique uniquement
window.clarity('consentv2', {
  ad_Storage: "granted",
  analytics_Storage: "denied"
});

// Refus de la publicité uniquement
window.clarity('consentv2', {
  ad_Storage: "denied",
  analytics_Storage: "granted"
});

// Refus total
window.clarity('consentv2', {
  ad_Storage: "denied",
  analytics_Storage: "denied"
});

Vous remarquerez la cohérence avec le Consent Mode V2 de Google : les noms des signaux (ad_Storage, analytics_Storage) sont identiques. C’est volontaire de la part de Microsoft, et cela facilite grandement l’intégration avec votre CMP (Consent Management Platform) existante.

Implémenter l’API Consent V2 avec Google Tag Manager

L’approche que nous recommandons est d’utiliser le modèle communautaire Microsoft Clarity Events de Markus Baersch — celui que nous présentons aussi à l’étape 4 pour les Smart Events. En plus d’envoyer des événements API, ce modèle expose nativement une case Set consent qui appelle pour vous window.clarity('consentv2', ...), sans aucun JavaScript à écrire ni balise HTML personnalisée à maintenir.

Là où ça se complique, c’est qu’il n’existe pas un setup unique : tout dépend de la CMP que vous utilisez. Chaque CMP émet ses propres événements dans le dataLayer lorsque l’utilisateur change son consentement, expose ses propres mécanismes pour savoir si un vendor donné a été accepté, et utilise ses propres identifiants pour Microsoft Clarity. Vous allez donc devoir adapter trois éléments à votre CMP :

• L’événement déclencheur de la balise (axeptio_update_consent pour Axeptio, didomi-consent-changed pour Didomi, etc.).
• La variable GTM qui détermine si l’utilisateur a accepté Microsoft Clarity — c’est elle qui sera utilisée comme condition de déclenchement de la balise Microsoft Clarity Events.
• L’identifiant du vendor Clarity à rechercher dans la CMP.

Voici deux mises en œuvre concrètes, une avec Axeptio et une avec Didomi. Adaptez-les à votre CMP en respectant la même logique.

1. Déclarer Clarity comme vendor dans Axeptio

Dans votre projet Axeptio, ajoutez Microsoft Clarity à la liste de vos vendors. Notez l’identifiant interne attribué par Axeptio (ici clarity) — c’est lui que vous chercherez dans le cookie côté GTM.

2. Créer une variable JavaScript personnalisée dans GTM

Axeptio écrit dans le cookie axeptio_authorized_vendors la liste des vendors pour lesquels l’utilisateur a accordé son consentement, séparés par des virgules. Créez dans GTM une variable JavaScript personnalisée nommée par exemple CJS - Axeptio - Clarity Consent :

function() {
  var match = document.cookie.match(/(?:^|; )axeptio_authorized_vendors=([^;]*)/);
  if (!match) return 'denied';
  var vendors = decodeURIComponent(match[1]);
  return vendors.indexOf('clarity') !== -1 ? 'granted' : 'denied';
}

Cette variable retourne "granted" si l’identifiant clarity est présent dans la liste, "denied" sinon.

3. Configurer un déclencheur sur l’événement Axeptio

Créez un déclencheur d’événement personnalisé dans GTM, branché sur l’événement axeptio_update_consent qu’Axeptio pousse dans le dataLayer à chaque mise à jour du consentement.

4. Configurer la balise Microsoft Clarity Events

Dans une balise basée sur le modèle Microsoft Clarity Events :

• Send event : décochée.
• Set consent : cochée, avec Analytics storage et Ad storage branchés sur la variable CJS - Axeptio - Clarity Consent.
• Déclencheur : l’événement personnalisé axeptio_update_consent créé à l’étape 3.

1. Déclarer Microsoft Clarity comme vendor dans Didomi

Dans la console Didomi, ajoutez Microsoft Clarity à la liste de vos vendors (Data Manager > Vendors). Notez l’identifiant exact attribué par Didomi (par exemple microsoft-tZVFUA2Y).

2. Activer la variable dataLayer didomiVendorsEnabled

Didomi pousse dans le dataLayer une variable didomiVendorsEnabled contenant la liste des vendors acceptés (chaîne séparée par des virgules ou tableau selon votre configuration). Dans GTM, créez une variable de couche de données nommée par exemple DLV - didomiVendorsEnabled avec pour nom de variable didomiVendorsEnabled.

3. Créer une variable JavaScript personnalisée

Créez ensuite une variable JavaScript personnalisée CJS - Didomi - Clarity Consent qui exploite la DLV créée ci-dessus :

function() {
  var vendorName = 'microsoft-tZVFUA2Y';
  var vendors = {{DLV - didomiVendorsEnabled}};
  if (!vendors) return 'denied';
  var list = Array.isArray(vendors) ? vendors.join(',') : String(vendors);
  return list.indexOf(vendorName) !== -1 ? 'granted' : 'denied';
}

Adaptez la chaîne 'microsoft-tZVFUA2Y' à l’identifiant exact noté à l’étape 1.

4. Configurer un déclencheur sur l’événement Didomi

Créez un déclencheur d’événement personnalisé branché sur l’événement didomi-consent-changed que Didomi pousse à chaque mise à jour du consentement.

5. Configurer la balise Microsoft Clarity Events

Dans une balise basée sur le modèle Microsoft Clarity Events :

• Send event : décochée.
• Set consent : cochée, avec Analytics storage et Ad storage branchés sur la variable CJS - Didomi - Clarity Consent.
• Déclencheur : l’événement personnalisé didomi-consent-changed créé à l’étape précédente.

Vérifier que le signal de consentement est bien transmis

Pour valider l’implémentation, ouvrez la console de votre navigateur sur une page de votre site, acceptez les cookies dans votre bannière CMP, puis exécutez :

document.cookie

Vous devriez voir apparaître les cookies Clarity (_clck, _clsk) si le consentement a bien été accordé. À l’inverse, en retirant le consentement, ces deux cookies ne doivent pas apparaître.

Étape 4 : configurer des Smart Events dans Microsoft Clarity

Les Smart Events sont l’une des fonctionnalités les plus puissantes de Microsoft Clarity, et pourtant souvent ignorée par les utilisateurs débutants. Leur promesse : identifier automatiquement les actions clés sur votre site (achat, ajout au panier, inscription, contact, téléchargement…) sans configurer la moindre balise GTM ni écrire la moindre ligne de code.

Comment fonctionnent les Smart Events ?

Clarity combine plusieurs signaux (clics sur des boutons, navigation entre pages, soumissions de formulaires) pour reconstituer des événements de haut niveau, similaires à ceux que vous configureriez dans GA4. L’outil détecte automatiquement neuf types d’événements :

• Purchase (achat)
• Add to Cart (ajout au panier)
• Begin Checkout (début de tunnel de commande)
• Contact Us (prise de contact)
• Submit Form (soumission de formulaire)
• Request Quote (demande de devis)
• Sign Up (inscription)
• Login (connexion)
• Download (téléchargement)

Concrètement, dès que vous installez Clarity sur votre site, l’outil commence à apprendre. Au bout de quelques jours, il vous propose dans le dashboard une liste de Smart Events auto-détectés que vous pouvez activer en un clic.

Créer un Smart Event personnalisé sans code

Vous pouvez aussi créer vos propres Smart Events à partir de zéro, toujours sans code. Allez dans Settings > Smart events > New event.

Vous avez le choix entre quatre catégories de signaux :

• Button clicks : un clic sur un bouton ou un lien spécifique (sélecteur CSS).
• Page visits : une visite sur une URL ou un pattern d’URL (par exemple /merci après un formulaire).
• API events : un événement envoyé via l’API Clarity (window.clarity('event', 'event_name')), pour les cas avancés.
• Auto events : un événement déjà détecté automatiquement par Clarity, que vous souhaitez raffiner.

Vous pouvez combiner plusieurs signaux dans un même Smart Event pour grouper différentes actions équivalentes. Par exemple, un événement “Sign Up” peut agréger un clic sur le bouton “Créer un compte” en haut de page et la visite de l’URL /welcome après l’inscription.

Créer un Smart Event personnalisé avec Google Tag Manager (recommandé)

Microsoft ne fournit pas (à l’heure où nous écrivons ces lignes) de modèle officiel pour envoyer des événements API à Clarity depuis Google Tag Manager. C’est Markus Baersch qui maintient le modèle communautaire de référence : Microsoft Clarity Events, disponible dans la galerie GTM et open source sur GitHub.

Ce modèle vous permet, depuis une seule balise, d’envoyer un événement Clarity, de poser des custom tags sur la session, de forcer l’enregistrement d’une session prioritaire et même de mettre à jour le consentement — sans écrire la moindre ligne de JavaScript.

Dans votre conteneur Google Tag Manager, créez une nouvelle balise, ouvrez la galerie communautaire (Découvrez plus de types de balises) et recherchez Microsoft Clarity Events. Vérifiez bien que l’auteur affiché est mbaersch, puis ajoutez le modèle à votre espace de travail.

L’option Send event (cochée par défaut) envoie un événement à Clarity à chaque déclenchement de la balise. Renseignez un Event Name : c’est l’équivalent de window.clarity('event', 'mon_evenement') en JavaScript.

Pour illustrer, créons une balise Microsoft Clarity - Smart Event - newsletter_signup qui se déclenche à chaque inscription à la newsletter, avec uniquement Send event coché et Event Name = newsletter_signup.

Exploiter les Smart Events au quotidien

Une fois vos Smart Events configurés, vous pouvez filtrer vos enregistrements et vos heatmaps en fonction de ces événements. Quelques exemples concrets :

• Visualiser uniquement les sessions des utilisateurs ayant abandonné leur panier (déclenchement de “Add to Cart” mais pas de “Purchase”).
• Comparer les heatmaps des visiteurs qui ont converti versus ceux qui n’ont pas converti.
• Identifier les pages où le taux d’apparition d’un Smart Event “Submit Form” chute brutalement, signe d’un problème UX sur ces pages.

Combinés aux insights automatiques de Clarity (rage clicks, dead clicks, JavaScript errors), les Smart Events transforment l’outil en véritable plateforme de diagnostic CRO.

Étape 5 : vérifier l’installation de Microsoft Clarity

Avant de considérer le déploiement comme terminé, prenez cinq minutes pour valider que tout fonctionne correctement. Trois vérifications successives sont à effectuer.

Vérification dans le mode Preview de Google Tag Manager

Dans votre conteneur GTM, cliquez sur Aperçu (Preview) en haut à droite. Saisissez l’URL de votre site et lancez la session de debug. Naviguez normalement sur quelques pages.

Dans la fenêtre Tag Assistant qui s’ouvre, vérifiez que votre balise Microsoft Clarity - Base Tag apparaît bien dans la colonne Tags Fired sur chacune des pages visitées.

Si la balise n’apparaît pas dans Tags Fired mais bien dans Tags Not Fired, cliquez dessus pour comprendre pourquoi : déclencheur incorrect, condition de consentement non remplie, etc.

Vérification dans la console du navigateur

Ouvrez la console développeur de votre navigateur (F12 sur la plupart des navigateurs) sur une page de votre site, puis tapez :

typeof window.clarity

Si Clarity est correctement chargé, la console doit retourner "function". Vous pouvez également inspecter les requêtes réseau (onglet Network) et filtrer sur domain:*.clarity.ms : vous devez voir plusieurs requêtes partir vers ce domaine.

Vérification dans l’interface Clarity

Connectez-vous à votre projet Clarity. Allez dans Dashboard et vérifiez que vos données remontent correctement : le compteur de sessions doit passer de zéro à au moins 1 après votre passage sur le site.

Comptez quelques minutes entre votre première visite et l’apparition de la session dans l’onglet Recordings. Les heatmaps, elles, demandent un volume de trafic plus significatif (généralement quelques dizaines de sessions) pour être pertinentes.

Conclusion

Installer Microsoft Clarity avec Google Tag Manager est l’une des opérations les plus rentables de votre stack analytics. En moins de dix minutes, vous ajoutez une couche qualitative complète à votre dispositif de mesure, en complément des données quantitatives que vous remontent déjà GA4 et vos autres outils. Le tout, sans le moindre coût et sans limite de volume.

Trois points à retenir pour réussir votre déploiement :

• Utilisez systématiquement le modèle officiel “Microsoft Clarity - Official” de la galerie GTM plutôt qu’une balise HTML personnalisée.
• Gérez le consentement avec l’API Consent V2 pour rester conforme RGPD et préserver la qualité de vos données en Europe.
• Activez les Smart Events dès les premiers jours pour transformer Clarity en véritable plateforme d’analyse de conversion.

Une fois votre installation en place, le vrai travail commence : regarder régulièrement vos enregistrements, croiser vos heatmaps avec vos tunnels GA4, et tester des hypothèses d’amélioration UX. C’est cette boucle quantitatif/qualitatif qui transforme un site moyen en un site qui convertit.

FAQ