Microsoft Clarity : lire les heatmaps et les sessions

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 : enregistrements de session, heatmaps et 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 décrit l’offre, pas ta couverture réelle : refus de consentement, bloqueurs, erreurs d’installation et navigateurs particuliers retirent des visites du total.

Clarity et GA4 répondent à des questions différentes. GA4 compte les événements du parcours d’achat et compare des segments ; Clarity montre comment une interaction s’est déroulée. Leurs volumes ne coïncident pas.

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, aligne l’appareil, le type de page et la période : un affichage mobile et un affichage desktop n’ont ni la même hauteur ni les mêmes contraintes, et une refonte en cours de période fausse la lecture.

Les signaux de frustration : par où enquêter

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. Lis-les comme des filtres, pas comme des diagnostics : le « rage click » désigne une séquence de clics, que l’usage normal produit parfois, et une erreur JavaScript peut être sans effet sur 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 ».

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.

Un exemple de lecture, de bout en bout

Le cas ci-dessous est fictif : il est construit pour montrer l’enchaînement, il ne décrit aucune boutique réelle.

La capture. Sur la fiche produit mobile d’une boutique de luminaires, la heatmap de clics montre une concentration sur la deuxième photo de la galerie, qui n’est ni un lien ni un déclencheur de zoom. Le filtre « dead clicks » remonte une trentaine de sessions sur deux semaines.

Le constat. En ouvrant cinq de ces sessions, le même enchaînement revient : la personne tape deux ou trois fois sur la photo, fait défiler vers le bas, puis remonte. Constat écrit : « Sur mobile, les visiteurs tapent la photo pour l’agrandir ; aucun zoom ne s’ouvre et aucune indication ne signale que la galerie se parcourt par balayage latéral. »

La reproduction. Sur un téléphone réel, la photo ne réagit pas au tap ; le balayage fonctionne, sans aucun repère visuel. Le comportement est identique sur les deux navigateurs testés, et correct sur ordinateur, où le survol affiche une loupe. Le problème est donc mobile et lié à l’absence d’affordance.

La correction et sa vérification. Ajouter un indicateur de galerie sous la photo et rendre le tap équivalent au clic desktop. Points de contrôle : le zoom s’ouvre au tap, se ferme au geste attendu et au bouton, le balayage continue de fonctionner, et la navigation au clavier reste possible sur ordinateur. Ce qui reste inconnu : combien de ces visiteurs auraient acheté. La correction se justifie par l’interaction cassée, pas par une prévision de ventes.

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

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 prouve l’existence d’un problème, pas sa fréquence. Tu constates qu’un bouton ne répond pas ; pour attribuer une évolution des ventes à sa correction, 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’effacement se fait au niveau du projet. La FAQ de Clarity indique que supprimer les données d’un utilisateur passe par la suppression du projet entier, et déconseille l’usage sur les sites ou applications destinés aux moins de 18 ans. Vérifie ces deux points avant l’installation, pas au premier besoin d’effacement.

L’outil montre des gestes, pas des intentions. Un visiteur part parce que le produit ne lui convient pas, parce qu’il compare un prix ou parce qu’on l’a interrompu. C’est la même sortie de page à l’écran.

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.

Contrôle l’ordre d’initialisation entre ta CMP et le tag : la présence d’un bandeau ne prouve pas qu’il parle au tag. Les états à tester sont rassemblés dans la section consentement ci-dessous.

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 et extensions simplifient la pose du Project ID. Traite-les comme un raccourci d’installation, pas comme une garantie : après un changement de thème, une nouvelle CMP ou une modification du checkout, refais la vérification.

Pour contrôler l’installation, ouvre ton site, réalise quelques interactions et cherche la session correspondante dans Clarity. Répète l’opération sur téléphone.

Si la pose des tags et la définition des événements t’arrêtent, le plan de tracking analytics est proposé en option de l’audit : tu reçois les spécifications à appliquer, sans installation.

Consentement : l’outil n’est pas le 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.

Un mode sans cookies change le moyen technique, pas le périmètre à examiner : information des personnes, finalités, données envoyées, destinataires et conservation restent à documenter. Pour une validation de conformité, fais revoir ce périmètre par la personne compétente.

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 surtout ce qui s’affiche après la saisie : coordonnées reprises en texte sur une page de confirmation, récapitulatifs de commande, espace client. Le masquage protège le champ, pas la valeur réaffichée ailleurs. Évite aussi d’envoyer des informations personnelles dans les URL ou dans des événements personnalisés.

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

Oui : une seule session suffit à révéler un bug reproductible, et c’est déjà une correction à faire. Le volume sert à estimer la fréquence du problème et son effet commercial, pas à le découvrir.

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. Si tu veux confier cette lecture à un regard extérieur, l’audit d’une page publique la produit avec un processus assisté par IA, sur mobile et ordinateur, sous 3 jours après réception de l’URL, de la cible et de l’objectif confirmés.

Questions fréquentes

Clarity remplace-t-il Google Analytics ?

Non : ils répondent à deux questions. Clarity montre comment une interaction s’est déroulée ; GA4 compte des événements et des volumes. Garde les deux si tu as les deux questions, et 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 session qui s’arrête net vient plus souvent de l’installation ou d’une limite de collecte que d’un départ du visiteur.

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.