Microsoft Clarity : lire les heatmaps et les sessions pour améliorer ta page

Microsoft Clarity permet de revoir des interactions sur ton site : les clics, le défilement, les tentatives répétées sur un élément et les passages d’une page à l’autre. Ces observations peuvent révéler un bouton qui répond mal, une information difficile à trouver ou une image prise pour un lien.

Installer le tag ne suffit pourtant pas à produire un diagnostic. Une carte de chaleur montre une répartition d’interactions ; elle ne donne ni l’intention de chaque visiteur ni la correction qui fera vendre davantage. L’intérêt de Clarity apparaît quand tu relies une observation à une question précise, puis à une vérification sur ta page.

Ce guide couvre les deux parties du travail : une installation à contrôler, notamment pour le consentement et les données masquées, puis une méthode de lecture pour passer des enregistrements aux hypothèses de correction.

Microsoft Clarity, c’est quoi exactement ?

Clarity est un outil d’analyse comportementale édité par Microsoft. Il associe des enregistrements de session, des heatmaps et des indicateurs d’interaction. Microsoft le présente comme gratuit, sans plafond de trafic ni version payante, et annonce une collecte sans échantillonnage. Ces caractéristiques sont documentées dans sa FAQ officielle.

Cette absence d’échantillonnage ne signifie pas que tous tes visiteurs seront observés. Le refus de consentement, les bloqueurs, les erreurs d’installation ou des navigateurs particuliers peuvent limiter la collecte. Un outil sans plafond reste un instrument dont il faut connaître la couverture.

Clarity et un outil comme GA4 répondent à des questions différentes. GA4 sert notamment à compter les événements du parcours d’achat et à comparer des segments. Clarity aide à voir comment une interaction s’est déroulée. Les deux peuvent se compléter ; leurs volumes ne sont pas automatiquement identiques.

Pour choisir entre Clarity et la suite issue de Hotjar, tu peux aussi consulter le comparatif Clarity et Contentsquare.

Ce que les heatmaps te montrent

Une heatmap agrège des interactions sur une page. Dans Clarity, les principales lectures portent sur les clics, le défilement et l’attention. La documentation des heatmaps détaille leurs usages et leurs paramètres.

La carte des clics aide à repérer les zones utilisées et les éléments qui semblent appeler une action. Une image très cliquée peut servir de point d’entrée, mais elle peut aussi être prise pour une galerie alors qu’elle ne réagit pas. La couleur seule ne permet pas de trancher : il faut ouvrir des sessions et reproduire l’interaction.

La carte de défilement montre quelles zones ont été atteintes dans l’échantillon consulté. Si les conditions de retour se trouvent plus bas que la plupart des visites observées, tu as une question à examiner : cette information arrive-t-elle au bon moment ? Tu n’as pas encore la preuve que déplacer le bloc augmentera les achats.

Avant de comparer deux cartes, vérifie que tu compares le même appareil, le même type de page et une période cohérente. Un affichage mobile et un affichage desktop n’ont ni la même hauteur ni les mêmes contraintes. Une modification de mise en page en cours de période peut aussi rendre la lecture trompeuse.

Les signaux de frustration : des points de départ d’enquête

Clarity étiquette automatiquement plusieurs comportements. Voici comment les lire sans attribuer trop vite une intention au visiteur.

Ces définitions viennent des indicateurs d’interaction de Clarity. Le nom « rage click » ne prouve pas une émotion ; des clics répétés peuvent aussi correspondre à un usage normal. De même, une erreur JavaScript n’interrompt pas forcément l’achat.

Un bon constat associe le signal, l’élément concerné, les conditions de reproduction et les limites de l’observation. « Plusieurs sessions montrent des tentatives de clic sur la photo ; sur mobile, cette photo n’ouvre aucune galerie » est plus utile que « les visiteurs sont frustrés ».

Installer Clarity proprement

Le principe consiste à charger le script associé à ton projet sur les pages que tu souhaites observer. Choisis une seule méthode d’installation. Un plugin, un gestionnaire de balises et un ajout manuel activés en même temps peuvent produire une configuration difficile à maintenir.

Site statique ou thème classique

Récupère le snippet dans les réglages du projet Clarity et installe-le dans le gabarit commun aux pages concernées. Le code d’exemple d’un autre site ne convient pas : le Project ID doit être celui de ton projet.

Vérifie ensuite le périmètre. Le script est-il présent sur les bonnes pages ? Une mise à jour du thème peut-elle le supprimer ? Une page de confirmation contient-elle des informations qui ne doivent pas être collectées ? Ces questions précèdent l’analyse des heatmaps.

Google Tag Manager

Si tu utilises déjà GTM, l’intégration de Clarity peut centraliser la gestion du tag. La documentation d’installation Microsoft présente les méthodes disponibles.

Le déclenchement sur les pages voulues ne remplace pas la gestion du consentement. Contrôle aussi l’ordre d’initialisation, les choix transmis par ta CMP et la réaction du tag à un refus. La présence d’un bandeau et celle d’un tag ne prouvent pas qu’ils communiquent correctement.

React, Next.js et autres applications avec navigation côté client

Microsoft fournit le package @microsoft/clarity. Il permet d’initialiser Clarity depuis le code de l’application et d’utiliser ses API.

Sur une application avec rendu serveur, cette initialisation se fait dans le navigateur. Évite de réinitialiser le projet à chaque rendu ou à chaque changement de route. Le package ne dispense pas de tester les navigations : ouvre une page directement, passe à une autre sans rechargement, puis utilise le retour du navigateur. Contrôle que le parcours observé correspond au parcours réalisé.

Un snippet correctement intégré peut également fonctionner. Le choix entre package et snippet relève de ton architecture et de ta gestion des tags, pas d’une règle selon laquelle toutes les applications React exigeraient une méthode unique.

CMS et plateformes e-commerce

Les intégrations ou extensions simplifient souvent la pose du Project ID. Leur présence ne garantit pas à elle seule le bon fonctionnement. Après un changement de thème, une nouvelle CMP ou une modification du checkout, refais une vérification.

Pour contrôler l’installation, ouvre ton site avec un état de consentement connu, réalise quelques interactions et cherche la session correspondante dans Clarity. Répète l’opération sur téléphone. Observe aussi le refus : tu dois comprendre ce qui est collecté dans chaque état, pas seulement confirmer que l’outil reçoit quelque chose.

Consentement et confidentialité : distinguer l’outil du cadre légal

Depuis le 31 octobre 2025, Microsoft applique une exigence de signal de consentement pour assurer l’ensemble des fonctions de Clarity aux visites provenant de l’EEE, du Royaume-Uni et de la Suisse. Sans signal approprié, certaines fonctions et la continuité des sessions sont limitées. Le comportement est décrit dans le Consent Mode de Clarity.

Cette date est celle d’une règle technique de Microsoft. Ce n’est ni la date d’entrée en vigueur du RGPD ni une validation juridique de ton installation. En France, la CNIL distingue les traceurs soumis au consentement et ceux qui peuvent bénéficier d’une exemption sous conditions. Elle rappelle aussi que le consentement doit pouvoir être retiré. Consulte son cadre sur les cookies et autres traceurs pour situer ton usage.

En pratique, relie les choix de ta CMP à Clarity par une intégration compatible ou par l’API de consentement prévue par Microsoft. Teste l’absence de choix, l’acceptation, le refus et le retrait. N’envoie pas un état « accepté » par défaut pour retrouver des enregistrements plus complets.

Le mode sans cookies d’un produit n’est pas une exemption générale. L’information des personnes, les finalités, les données envoyées, les destinataires et la conservation restent à examiner selon ton contexte. Pour une validation de conformité, fais revoir ce périmètre par la personne compétente ; l’état d’un bouton dans un tableau de bord ne suffit pas.

Vérifier le masquage sur tes propres pages

Clarity propose les modes Strict, Balanced et Relaxed, ainsi que des règles ciblant des éléments. Les champs de saisie et listes déroulantes sont masqués dans tous les modes. Tu peux ajouter l’attribut data-clarity-mask="True" à un bloc à protéger. Microsoft précise également que les changements de masquage ne s’appliquent pas rétroactivement aux enregistrements. Voir la documentation du masquage.

Sur une boutique, examine notamment les coordonnées affichées en texte après validation d’un formulaire, les récapitulatifs de commande et l’espace client. Le fait qu’un champ soit masqué pendant sa saisie ne prouve pas que sa valeur le sera lorsqu’elle apparaîtra ailleurs dans la page. Évite aussi d’envoyer des informations personnelles dans les URL ou dans des événements personnalisés.

Une méthode de lecture pour faire du CRO

Commence avec une question et un périmètre, par exemple : « Sur téléphone, l’ajout au panier laisse-t-il un retour compréhensible ? » Regarder des dizaines de sessions au hasard donne beaucoup d’images et peu de décisions.

1. Choisis une page et un segment. Une fiche produit mobile, sur une période où son interface n’a pas changé, constitue un point de départ lisible.
2. Filtre par un signal pertinent. Les dead clicks sont intéressants pour un élément qui semble inerte ; les erreurs peuvent aider à chercher une interaction défaillante.
3. Regarde le contexte avant et après. Un clic isolé ne raconte pas la tâche. Observe ce qui précède, le retour de l’interface et la suite du parcours.
4. Cherche une récurrence. Une heatmap peut montrer que plusieurs interactions se concentrent au même endroit. Elle complète la session ; les deux proviennent toutefois du même dispositif de collecte, pas de deux preuves indépendantes.
5. Reproduis sur la page actuelle. Note le navigateur, l’appareil, les étapes et le résultat. Vérifie aussi une explication alternative : animation lente, comportement prévu, ancien état de la page.
6. Écris une correction et ses critères de vérification. Par exemple : rendre explicite l’ouverture d’une galerie, puis vérifier le clavier, le mobile et la fermeture de l’image agrandie.

Copilot peut aider à trier un groupe d’enregistrements, mais ses résumés doivent être confrontés aux sessions citées. La documentation des Grouped Session Insights précise que la limite dépend de la sélection et que l’IA peut produire des interprétations incorrectes. Utilise le résumé comme un raccourci vers les observations, pas comme un diagnostic déjà validé.

Les limites à connaître avant d’en tirer une conclusion

La mesure des ventes demande un suivi dédié. Clarity propose aussi des funnels, mais un parcours visualisé ne remplace pas une réconciliation des achats avec le back-office. Le guide pour mesurer un taux de conversion e-commerce détaille ce contrôle.

Une session ne mesure pas l’effet d’une correction. Tu peux constater qu’un bouton ne répond pas. Pour attribuer ensuite une évolution des ventes à sa modification, il faut un dispositif de mesure adapté, et parfois un test A/B.

Les données ont une durée de vie. Microsoft indique 30 jours pour les enregistrements, 9 mois pour les sessions mises en favori ou labellisées et pour les heatmaps. Cette politique de rétention doit guider ta routine de lecture.

L’outil n’explique pas toutes les intentions. Un visiteur peut partir parce que le produit ne lui convient pas, qu’il compare un prix ou qu’il doit interrompre sa visite. Une sortie de page n’équivaut pas à un problème d’interface.

Clarity reste-t-il utile avec peu de trafic ?

Oui, une seule session peut révéler un bug reproductible. Ce qui demande du volume, c’est d’estimer la fréquence du problème ou son effet commercial avec précision. Quelques visites ne représentent pas automatiquement l’ensemble de tes futurs acheteurs.

Avec peu de trafic, associe les observations disponibles à une lecture méthodique de la page : promesse, prix, preuve, conditions et prochaine étape. La méthode d’audit CRO e-commerce explique comment formuler et prioriser ces constats sans attendre un test statistique irréaliste.

Questions fréquentes

Clarity remplace-t-il Google Analytics ?

Pas systématiquement. Clarity sert surtout à observer les interactions ; GA4 ou un autre outil de mesure sert à suivre des événements et des volumes. Choisis tes outils selon les questions auxquelles tu dois répondre, puis vérifie leurs différences de collecte avant de rapprocher leurs chiffres.

Un compte Clarity suffit-il pour être conforme au RGPD ?

Non. Le choix des finalités, l’information, le consentement lorsqu’il est requis, la conservation et les données collectées dépendent de l’usage réel. Les réglages du produit participent à ce travail, ils ne délivrent pas une certification de ton site.

Pourquoi mes sessions sont-elles incomplètes ?

Vérifie d’abord les états de consentement, les pages équipées, les bloqueurs et la navigation du site. Une rupture peut venir de l’installation ou des limites de collecte. Elle ne doit pas être interprétée directement comme un abandon volontaire.

Que faire après avoir repéré une friction ?

Conserve la preuve utile, reproduis le problème et écris la modification attendue. Précise ensuite comment vérifier son application et ce qu’il faudrait mesurer pour connaître son effet.

Si tu veux un regard extérieur sur une page publique, consulte l’exemple de restitution. L’audit proposé examine la page sur mobile et ordinateur, puis fournit un diagnostic, des priorités et des instructions de correction. Il ne comprend pas l’accès à ton compte Clarity ni l’installation du suivi ; l’application des changements reste à ta charge.