Vous payez peut-être Hotjar (désormais chez Contentsquare) ou FullStory au-delà de leurs offres gratuites, alors que Microsoft Clarity fait à peu près la même chose dans son coin. Gratuitement, pour toujours. Sans plafond de trafic, sans échantillonnage. Les vraies limites sont généreuses : jusqu’à 100 000 sessions enregistrées par projet et par jour, et jusqu’à 100 000 pages vues par heatmap (FAQ Clarity). Aucun pop-up « passez à l’offre supérieure ».
Trop beau pour être vrai ? Je le pensais aussi. Mais après avoir déployé Clarity sur plusieurs projets ces dernières années, je peux dire qu’il est légitime, puissant et franchement sous-utilisé.
Qu’est-ce que Microsoft Clarity ?
Clarity est un outil gratuit d’analytics comportemental qui montre comment les utilisateurs interagissent réellement avec votre site. Il ne s’agit pas de pages vues ou de taux de rebond (Google Analytics s’en charge) : Clarity montre le pourquoi derrière les chiffres. GA vous dit que 80 % des utilisateurs quittent votre fiche produit ; Clarity vous montre ce qu’ils ont fait avant de partir.
L’outil est édité par Microsoft, open source (le code est sur GitHub), conçu pour être conforme au RGPD (vous devez quand même recueillir le consentement quand il est requis, voir la FAQ) et gratuit sans condition.
Les fonctions principales
- Enregistrements de sessions. Des rejeux de vraies sessions : clics, défilement, remplissage de formulaires (données sensibles masquées automatiquement), navigation dans le menu, abandons. Ce sont des reconstructions du DOM, pas de vraies vidéos : légères (le script se charge en asynchrone), respectueuses de la vie privée (aucune capture d’écran) et fidèles aux contenus dynamiques.
- Heatmaps. Cinq types : clics, défilement, zones, conversion et attention (aperçu des heatmaps). Les trois plus utiles : clics (où l’on clique), défilement (jusqu’où l’on descend) et zones (les sections qui captent l’attention). Plus la couleur est chaude, plus l’activité est forte.
- Détection des clics de frustration. Les rage clicks : plusieurs clics rapides au même endroit (métriques sémantiques de Clarity), signe d’un élément qui paraît cliquable mais ne répond pas. Les dead clicks : clics sur un élément inactif. Le défilement excessif : va-et-vient en cherchant quelque chose. Les quick backs : retour immédiat sur la page précédente, signe que la navigation n’a pas aidé. Ces signaux évitent de regarder des centaines de sessions à la main.
- Tableau de bord. Vue du trafic (sessions, utilisateurs, pages par session), pages populaires, erreurs JavaScript, profondeur de défilement, répartition par appareil et navigateur, géographie.
- Filtres et segments. Par appareil, navigateur, OS, pays, source, tags personnalisés (via l’API Clarity), erreurs JavaScript, clics de frustration, durée de session. On enregistre les filtres comme segments.
Pourquoi utiliser Clarity ?
C’est gratuit, pour de bon
Pas de limite de trafic (toutes les sessions sont suivies, avec 100 000 enregistrements par projet et par jour), pas de limite d’utilisateurs, de fonctions ni de durée. Les concurrents facturent en général au volume de sessions dès qu’on quitte leurs offres gratuites (voir leurs pages de tarifs à jour). Les limites réelles, toutes tirées de la FAQ officielle :
| Élément | Limite |
|---|---|
| Prix | Gratuit pour toujours, sans limite de trafic ni échantillonnage |
| Sessions enregistrées | Jusqu’à 100 000 par projet et par jour |
| Heatmaps | Jusqu’à 100 000 pages vues par heatmap |
| Conservation des enregistrements | Jusqu’à 30 jours après l’enregistrement |
| Projets, membres, admins | Illimités (10 invitations en attente au maximum) |
| Tags personnalisés | 128 par page au maximum |
Une conception orientée vie privée
Clarity masque automatiquement les champs de formulaire sensibles (mots de passe, cartes bancaires), n’utilise pas de suivi inter-sites, fournit des API de consentement et permet de configurer des règles de masquage. Depuis le 31 octobre 2025, Clarity exige un signal de consentement pour les visiteurs de l’EEE, du Royaume-Uni et de la Suisse ; sans lui, enregistrements et parcours sont fragmentés (Consent API v2).
Léger, compatible, avec de l’IA
Le script est asynchrone et sobre en bande passante. Clarity s’intègre à Google Analytics (liaison des sessions), à Google Tag Manager, à WordPress, Shopify, Wix, Squarespace, et à tout projet via un paquet NPM. Son Copilot résume les enregistrements, repère les motifs récurrents, signale les points de frustration et tire des enseignements des heatmaps.
Comment l’installer
Clarity s’exécute côté client, dans le navigateur : il doit accéder au DOM, capter les interactions et enregistrer les mutations. Il n’existe pas d’implémentation server-side.
Méthode 1 : installation directe
- Créer un projet sur clarity.microsoft.com avec un compte Microsoft et récupérer le Project ID.
- Dans Settings > Setup > Install manually, copier le snippet JavaScript :
<script type="text/javascript">
(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_PROJECT_ID");
</script>- Le coller dans le
<head>, déployer, puis attendre quelques minutes : les sessions en direct apparaissent dans le tableau de bord.
Méthode 2 : Google Tag Manager
Option A, le modèle officiel (le plus simple) : nouveau tag, « Discover more tag types in the Community Template Gallery », chercher « Microsoft Clarity – Official », ajouter à l’espace de travail, saisir le Project ID, déclencheur « All Pages », enregistrer et publier. Option B, tag Custom HTML : coller le code de suivi, même déclencheur. Dans les deux cas, utilisez le vrai Project ID (Settings > Overview), testez en mode Aperçu, et rappelez-vous que Clarity demande un conteneur web côté client, pas un conteneur server-side.
Méthode 3 : paquet NPM (React, Vue, Angular)
npm install @microsoft/clarityimport Clarity from '@microsoft/clarity';
Clarity.init('YOUR_PROJECT_ID');Configuration avancée
Identifier les utilisateurs avec un ID personnalisé, pour filtrer par utilisateur, les suivre entre sessions ou rapprocher Clarity de votre CRM. Utilisez un identifiant interne, jamais un e-mail ni un vrai nom : Clarity hashe l’ID, mais le nom affiché apparaît en clair dans le tableau de bord (Identify API).
window.clarity("identify", "CRM-48213", null, null, "Customer 48213");Tags personnalisés pour la segmentation :
clarity("set", "plan", "premium");
clarity("set", "experiment", "variantA");Consentement (Consent API v2) :
// With the tag snippet: grant consent
window.clarity('consentv2', { ad_Storage: 'granted', analytics_Storage: 'granted' });
// With the tag snippet: deny consent
window.clarity('consentv2', { ad_Storage: 'denied', analytics_Storage: 'denied' });
// With the NPM package
Clarity.consentV2({ ad_Storage: 'denied', analytics_Storage: 'granted' });Masquage : Clarity masque le contenu sensible par défaut. Vous pouvez forcer le masquage avec data-clarity-mask="True", le lever avec data-clarity-unmask="true", ou définir des règles dans Settings > Masking (masquage Clarity).
Trois cas d’usage
Voici comment trois entreprises citées dans les études de cas de Microsoft ont utilisé l’outil. J’ai volontairement retiré les pourcentages d’amélioration : la page des études de cas de Microsoft était hors ligne quand j’ai mis l’article à jour (octobre 2026), je n’ai donc pas pu les vérifier.
- Scrape.do (inscriptions à l’essai). Fort taux de rebond sur la page d’inscription. Les enregistrements montraient des clics sur des éléments secondaires plutôt que sur le CTA principal, et les pages d’atterrissage des publicités avaient une mise en page confuse. Actions : parcours d’inscription refondu autour d’un seul CTA clair, éléments distrayants retirés, bénéfices placés en haut de page, landing pages publicitaires simplifiées. Résultats : plus d’inscriptions, plus de conversions issues des campagnes, meilleur retour sur dépense publicitaire.
- Supademo (onboarding). Des utilisateurs décrochaient pendant l’onboarding sans qu’on sache où. Les rejeux montraient des blocages à des étapes précises et une confusion sur l’emplacement des fonctions clés. Actions : parcours repensé sur le comportement observé, aide contextuelle aux points de friction, chemin raccourci vers les fonctions principales. Résultats : meilleur taux de complétion, meilleur engagement, moins de tickets de support sur l’onboarding.
- Places for People (pages vues). Des rage clicks sur des carrousels qui ne fonctionnaient pas comme prévu, des utilisateurs frustrés par un contenu peu pertinent, certaines pages à très forte profondeur de défilement. Actions : carrousels problématiques supprimés, contenu réorganisé selon l’intention, pages performantes mises en avant, navigation améliorée. Résultats : plus de pages vues, moins de rage clicks, meilleure découverte du contenu.
Le schéma est le même partout : repérer les signaux de frustration, regarder les enregistrements pour le contexte, analyser les heatmaps, formuler des hypothèses, changer, puis mesurer l’impact avant/après.
Clarity face à la concurrence
| Critère | Clarity | Hotjar | FullStory / LogRocket |
|---|---|---|---|
| Prix | Gratuit pour toujours | Offre gratuite + offres payantes (page de tarifs, vérifiée en octobre 2026) | Offre gratuite + offres payantes sur devis (FullStory, LogRocket) |
| Limite de sessions | Jusqu’à 100 000 enregistrées par jour | Selon l’offre | n.c. |
| Heatmaps et enregistrements | Oui | Oui | Rejeu avancé |
| Rage / dead clicks | Détection automatique | Limité | n.c. |
| Questionnaires / feedback | Non | Oui | n.c. |
| Entonnoirs | Basiques | Avancés | n.c. |
| Erreurs, console, réseau | Erreurs basiques, console limitée, pas de requêtes réseau | n.c. | Complets |
| Public visé | Marketeurs, UX | Marketeurs, UX | Développeurs, produit |
Verdict : Clarity gagne sur le coût et le volume de sessions ; Hotjar gagne si vous avez besoin de questionnaires et d’entonnoirs avancés ; FullStory et LogRocket ont des outils de débogage plus profonds. Face à GA4, les deux se complètent : GA4 dit ce qui se passe (métriques, conversions, acquisition), Clarity dit pourquoi (comportement, frictions). Utilisez les deux.
Limites et pièges
- Pas de rendu des iframes tierces ni du canvas (publicités, contenus embarqués, frames cross-origin). Les clics sur les iframes first-party sont en revanche captés (FAQ).
- Côté client uniquement : aucune option server-side.
- Pas d’A/B testing intégré : Clarity montre le comportement mais ne fait pas d’expériences.
- Analyse d’entonnoir basique par rapport aux outils dédiés.
- Conservation de 30 jours pour les enregistrements : notez ou exportez ce que vous voulez garder.
- Pas de co-browsing : les enregistrements en direct existent (Clarity live), mais pas de navigation partagée ni d’annotation en direct.
Bonnes pratiques
- Filtrer intelligemment. Ne regardez pas des sessions au hasard : sessions avec erreurs JavaScript ou clics de frustration, sources de trafic précises, mobile contre desktop, convertisseurs contre non-convertisseurs.
- Combiner avec GA4. Liez Clarity à Google Analytics pour voir les enregistrements de segments GA4 précis et valider les hypothèses des rapports.
- Créer des tags personnalisés : type d’utilisateur, variante d’expérience, étape du parcours, feature flags.
- Revoir régulièrement : sessions très frustrantes chaque semaine, pages populaires chaque mois, parcours en profondeur chaque trimestre.
- Respecter la vie privée : consentement bien implémenté, données sensibles masquées, utilisateurs informés, RGPD et CCPA respectés.
- Agir. Clarity est inutile sans suite : documentez, priorisez, corrigez, mesurez, recommencez.
Autres usages
Débogage : filtrez par erreur JavaScript pour voir les actions exactes avant l’erreur et les bugs propres à un navigateur. Formulaires : repérez libellés confus, validations bloquantes, champs évités, soucis de clavier mobile. UX mobile : tailles de zones tactiles, défilement horizontal, navigation. Contenu : profondeur de défilement pour fixer la longueur idéale et placer les CTA. E-commerce : fiches produit, abandons de panier, frictions au paiement.
Intégrations
Pour l’intégration Google Analytics, allez dans Settings > Setup > Google Analytics integration et connectez votre propriété GA4 (une propriété GA par projet). Clarity affiche alors vos données et segments GA dans son interface. Les données vont de GA vers Clarity, pas l’inverse (intégration Google Analytics). Côté API, Clarity fournit une API client (identify, tags, événements, consentement) et une Data Export API (jeton dans Settings > Data Export), utiles pour le reporting sur mesure, l’export et l’intégration à des outils internes.
Conclusion
Clarity est la rare combinaison de « gratuit » et « vraiment bon ». Il ne remplacera pas toute votre stack analytics, mais il comble un vide essentiel : comprendre pourquoi les utilisateurs se comportent ainsi. L’installation prend cinq minutes, et sur la plupart des sites où je l’ai posé, la première semaine d’enregistrements a révélé quelques corrections UX rapides. Si vous payez Hotjar ou équivalent pour de simples enregistrements et heatmaps, vous payez trop. Si vous n’utilisez aucun outil d’analytics comportemental, vous pilotez à l’aveugle.
Sources
- Documentation officielle Clarity
- FAQ Clarity
- Clarity Consent API v2
- Identify API
- Intégration Google Analytics
- Data Export API
- Dépôt GitHub
- Paquet NPM
Pour aller plus loin, lisez la version complète de l’article (en anglais) : Microsoft Clarity: The Free Analytics Tool You’re Probably Ignoring (And Shouldn’t).