Microsoft Clarity est un outil gratuit qui enregistre ce que vos visiteurs font vraiment sur votre site : où ils cliquent, jusqu'où ils descendent, à quel moment ils s'énervent et repartent. Heatmaps, enregistrements de session, détection automatique des frustrations, le tout sans limite de volume et sans carte bancaire.
La plupart des guides s'arrêtent à « installez le tag et regardez les heatmaps ». C'est précisément ce qui fait qu'on tire 10 % de la valeur de l'outil. Ce guide va plus loin : l'installation faite correctement (y compris sur une single page app et côté RGPD, où beaucoup d'articles sont périmés depuis fin 2025), et surtout comment lire Clarity comme un développeur dont le métier est de faire remonter les conversions, pas comme un tableau de bord de plus qu'on ouvre une fois puis qu'on oublie.
Microsoft Clarity, c'est quoi exactement
Clarity est un outil d'analyse comportementale (behavior analytics) édité par Microsoft. Là où Google Analytics vous dit combien de gens font quelque chose, Clarity vous montre comment ils le font. Le premier est quantitatif, le second est qualitatif. Les deux ne se remplacent pas, ils se complètent.
Trois choses le distinguent de ses concurrents historiques (Hotjar en tête) :
- Il est 100 % gratuit, sans palier payant, sans limite de sessions, sans plafond de heatmaps. Là où Hotjar facture au volume, Clarity ne facture rien. Pour un e-commerce qui démarre, c'est décisif.
- La détection de frustration est automatique, sans configuration. Clarity repère seul les clics de rage, les clics morts et les retours en arrière rapides (on y revient, c'est le cœur de sa valeur).
- Une couche d'IA (Copilot) peut résumer des centaines d'enregistrements d'un coup, ce qui répond au vrai problème de ce genre d'outil : on n'a pas le temps de regarder 300 sessions à la main.
Ce que Clarity mesure vraiment
L'erreur classique, c'est de croire que Clarity, ce sont « des cartes de chaleur ». Les heatmaps sont la partie visible, mais pas la plus utile.
Les heatmaps existent en trois lectures : les clics (où l'attention se porte, et surtout où les gens cliquent sur des choses qui ne sont pas cliquables), le scroll (jusqu'où descend réellement votre page, donc ce que 60 % de vos visiteurs ne voient jamais), et les zones d'attention. Sur une fiche produit, une scroll heatmap qui s'effondre avant les avis clients vous dit tout de suite pourquoi votre réassurance ne sert à rien : personne ne l'atteint.
Les enregistrements de session rejouent le parcours réel d'un visiteur : mouvements de souris, clics, défilement, changements d'onglet. Regardés au hasard, ils font perdre un temps fou. Filtrés, ils deviennent une arme (la suite explique comment).
Les signaux de frustration, c'est là que Clarity gagne son ticket. Il détecte et étiquette automatiquement, sans que vous ayez rien à paramétrer :
- Rage clicks : plusieurs clics rapides au même endroit. Le visiteur croit que ça devrait réagir et rien ne se passe. Presque toujours le signe d'un élément qui ressemble à un bouton sans en être un, ou d'un vrai bouton qui rame.
- Dead clicks (clics morts) : un clic qui ne déclenche rien. Une image de produit qu'on croit zoomable, un texte souligné qu'on prend pour un lien.
- Quickbacks (retours rapides) : le visiteur arrive sur une page et repart aussitôt d'où il venait. Signal fort d'une promesse trahie entre le lien et la page.
- Scroll excessif et erreurs JavaScript : une page qu'on parcourt frénétiquement sans trouver, ou une erreur technique qui casse un parcours sans que vous le sachiez.
Ces quatre signaux sont votre porte d'entrée. Ce ne sont pas des métriques à contempler, ce sont des points de départ d'enquête.
L'installer proprement (le vrai sujet des devs)
Le principe est simple : un tag JavaScript à charger sur toutes les pages, le
plus haut possible dans le <head>. La façon de le poser dépend de votre
stack, et c'est là que les guides génériques se trompent.
En direct dans le HTML. Vous récupérez votre snippet dans les réglages du
projet Clarity et vous le collez dans le <head>, sur toutes les pages.
Suffisant pour un site statique ou un thème classique.
Via Google Tag Manager, la méthode la plus propre si vous avez déjà GTM. Clarity fournit un template officiel (« Microsoft Clarity – Official », édité par Microsoft) : vous l'ajoutez à votre conteneur, vous renseignez votre Project ID, et vous déclenchez sur All Pages. Aucun code à toucher, et le consentement se gère au même endroit que le reste (crucial, voir plus bas).
Sur une single page app (Next.js, React, Vue). C'est le piège que je vois
le plus souvent quand je pose Clarity sur un projet Next.js, et celui que les
articles « basiques » ratent. Sur une SPA, le <head> n'est chargé qu'une
fois et les navigations ne rechargent pas la page : un snippet posé naïvement
peut s'initialiser au mauvais moment ou manquer les changements de route.
Clarity publie un package NPM prévu pour ça : vous l'installez, vous appelez
l'initialisation une seule fois côté client au montage de l'app (par exemple
dans le layout racine), et le suivi des vues suit ensuite les navigations. Sur
Next.js en App Router, l'init se fait dans un composant client, pas dans un
Server Component.
Sur un CMS (WordPress, Shopify), un plugin ou une intégration native fait le travail : vous ne collez que votre Project ID.
Dernière étape que tout le monde saute : vérifier que le tag remonte. Clarity a une vue temps réel. Ouvrez votre site, faites deux clics, et confirmez que la session apparaît. Un tag muet pendant trois semaines, c'est trois semaines de données perdues qu'on ne récupère jamais.
RGPD : le point que la plupart des guides n'ont plus à jour
Si vous lisez un article sur Clarity qui ne parle pas de consentement, il date d'avant fin 2025 et il vous met en risque.
Depuis le 31 octobre 2025, Clarity impose un signal de consentement valide pour les visites en provenance de l'EEE, du Royaume-Uni et de la Suisse. Sans ce signal, les fonctionnalités de Clarity ne tournent pas à plein pour ces visiteurs. Concrètement, pour un site français, ça veut dire que Clarity doit être câblé à votre bandeau de consentement, pas posé à côté.
Deux voies pour être en règle :
- Via une CMP (plateforme de gestion du consentement) qui pousse automatiquement le signal à Clarity. Si vous en avez déjà une pour Google Analytics, c'est le chemin le plus court.
- Via la Consent API de Clarity : vous informez explicitement Clarity que le suivi peut démarrer, une fois le consentement obtenu. C'est la voie propre si vous avez un bandeau maison.
Deux réglages à connaître au passage : les cookies sont activés par défaut, désactivez-les tant que le consentement n'est pas donné (le Consent Mode gère ça) ; et le masquage des données (masking) se règle en trois modes, relaxed, balanced (par défaut) ou strict. Clarity masque déjà automatiquement les champs sensibles (mots de passe, numéros de carte), et vous pouvez ajouter vos propres champs à masquer via des sélecteurs CSS. Sur un e-commerce, vérifiez que le récap de commande et les champs d'adresse sont bien couverts.
Ce n'est pas un détail de conformité qu'on traite « plus tard ». C'est le prérequis pour que vos données soient à la fois légales et exploitables.
Comment le lire quand on fait du CRO (et pas juste admirer des jolies cartes)
Voici ce qui sépare l'usage amateur de l'usage utile. Personne ne regarde 200 enregistrements. La méthode, c'est de partir des signaux, pas des sessions.
- Partez des frustrations, pas du hasard. Ouvrez les enregistrements filtrés sur rage clicks ou dead clicks. Vous ne regardez plus des visiteurs au pif, vous regardez les visiteurs qui ont buté sur quelque chose. Le taux de « ça saute aux yeux » explose.
- Croisez avec la page qui compte. Filtrez sur votre fiche produit, votre panier ou votre tunnel de commande. Une frustration sur le checkout coûte infiniment plus cher que la même sur une page « à propos ».
- Confirmez avec la heatmap. Un dead click isolé peut être une anomalie. Le même dead click qui ressort en zone chaude sur la heatmap de clic, c'est un pattern : des dizaines de gens tentent de cliquer sur un élément inerte. Là, vous tenez une correction.
- Laissez Copilot dégrossir. L'IA de Clarity peut résumer un lot d'enregistrements (jusqu'à 250 d'un coup) en une synthèse de problèmes récurrents. Utile pour transformer « j'ai 400 sessions » en « voici les trois blocages qui reviennent ».
Le réflexe à garder : chaque signal est une hypothèse à vérifier, pas une conclusion. Clarity vous montre où ça coince. Il ne vous dit pas encore quoi corriger.
Ce que Clarity ne fait pas (et pourquoi c'est important)
Un outil gratuit et puissant, mais borné, et sur des sites à fort trafic j'en ai touché les limites de première main. Le dire honnêtement, c'est vous éviter des attentes déçues :
- Ce n'est pas de l'analytics quantitatif. Pour vos volumes, vos sources de trafic, vos entonnoirs chiffrés et votre taux de conversion, c'est GA4 (ou équivalent) qui reste la référence. Clarity propose des funnels, mais il ne remplace pas un tracking e-commerce propre.
- Ce n'est pas de l'A/B testing. Clarity observe l'existant, il ne compare pas deux versions. Pour trancher entre deux options avec des chiffres, il faut un outil de test, et surtout le trafic pour que le test conclue.
- Il y a des limites de rétention et d'échantillonnage. Sur gros volume, tout n'est pas conservé indéfiniment. Pour de l'analyse fine dans le temps, on exporte ou on croise.
- Il ne dit ni pourquoi ni quoi changer. Il pointe le symptôme. Le diagnostic (pourquoi ce blocage, et quelle correction prioriser) reste un travail d'analyse.
C'est exactement cette dernière limite qui fait le pont avec la suite.
Clarity, le trafic faible, et là où ça devient intéressant
Voici pourquoi Clarity a une place à part dans la boîte à outils d'un e-commerçant qui n'a pas encore un gros volume.
L'A/B testing exige du trafic, beaucoup, pour qu'un résultat sorte du hasard. En dessous d'un certain seuil, un test tourne des mois pour ne rien prouver. Le signal qualitatif, lui, n'a pas ce prérequis : dix enregistrements suffisent à voir un visiteur galérer sur votre sélecteur de taille. Clarity est donc l'outil idéal quand votre volume ne permet pas encore de tester. C'est le moyen de trouver des problèmes réels sans attendre une significativité statistique que vous n'aurez pas avant longtemps.
Mais Clarity s'arrête où le travail commence vraiment. Il vous donne le où : cet endroit du checkout où les gens rageclickent, cette fiche produit qu'on quitte en quickback. Le pourquoi et le quoi corriger, c'est un diagnostic. Repérer que 40 personnes cliquent sur une image inerte, c'est Clarity. Décider que la vraie correction est de rendre l'image zoomable et de remonter la réassurance au-dessus de la ligne de flottaison et dans quel ordre traiter tout ça, c'est un audit.
C'est le sujet du guide de référence de ce cluster : la méthode d'audit CRO e-commerce, pensée pour décider sans attendre le volume d'un A/B test. Clarity y tient sa place exacte : la source d'observation qui alimente le diagnostic.
FAQ
Microsoft Clarity est-il vraiment gratuit ? Oui, entièrement. Pas de palier payant, pas de limite de sessions, pas de plafond de heatmaps, pas de carte bancaire. Toutes les fonctionnalités (heatmaps, enregistrements, détection de frustration, Copilot) sont incluses sans coût.
Clarity remplace-t-il Google Analytics ? Non, ils sont complémentaires. GA4 mesure le quantitatif (combien, d'où, quel taux de conversion), Clarity montre le qualitatif (comment les gens se comportent, où ils bloquent). Les deux s'intègrent d'ailleurs ensemble. Gardez les deux.
Clarity est-il conforme au RGPD ? Il peut l'être, à condition de le câbler correctement. Depuis le 31 octobre 2025, Clarity exige un signal de consentement valide pour les visiteurs de l'EEE, du Royaume-Uni et de la Suisse. Vous devez donc le relier à votre CMP ou à sa Consent API, désactiver les cookies tant que le consentement n'est pas donné, et vérifier le masquage des champs sensibles.
Comment installer Clarity sur un site Next.js ou React ? Utilisez le package NPM officiel plutôt qu'un snippet collé à la main. Sur une single page app, l'initialisation doit se faire une fois côté client (pour Next.js App Router, dans un composant client, pas un Server Component), afin que le suivi accompagne les navigations sans rechargement.
Combien de trafic faut-il pour que Clarity soit utile ? Beaucoup moins que pour un A/B test. Le signal qualitatif ne demande pas de significativité statistique : quelques dizaines de sessions filtrées sur les frustrations suffisent à repérer des blocages concrets. C'est justement ce qui en fait un bon outil pour les sites à faible volume.
Conclusion
Microsoft Clarity n'est pas « un outil de heatmaps de plus ». C'est le moyen le plus rapide, et gratuit, de voir vos visiteurs buter sur votre site en conditions réelles. À condition de l'installer proprement (RGPD comprise, ce n'est plus optionnel depuis fin 2025) et de le lire en partant des signaux de frustration plutôt que des sessions au hasard.
Mais voir où ça coince n'est que la moitié du chemin. Clarity vous donne les symptômes ; il ne priorise pas les corrections à votre place. C'est là qu'un diagnostic prend le relais.
Vous avez repéré des blocages dans Clarity mais vous ne savez pas lesquels corriger en premier ? Voir l'audit CRO.