Heatmaps de site web : ce que c'est et comment les lire
Heatmaps de site web
Qu'est-ce qu'une heatmap ? Cartes de clics et de scroll expliquées | We.Inc
Ce qu'est une heatmap de site web, comment sont collectées les cartes de clics, de scroll et d'attention, que faire pour la vie privée et le consentement, et une démo en direct qui dessine une heatmap à partir de vos propres clics.
Une heatmap de site web est une image de votre page recouverte de couleurs qui montrent où les visiteurs ont cliqué, jusqu'où ils ont fait défiler ou où ils ont passé du temps. Les couleurs chaudes signifient beaucoup de visiteurs, les couleurs froides peu. Un petit script sur la page enregistre les interactions, et l'outil les additionne sur de nombreuses visites.
Types de heatmaps courants
Type
Ce qu'elle montre
Question à laquelle elle répond
Carte de clics
Où les gens ont cliqué ou tapé
Est-ce que quelqu'un appuie sur mon bouton principal ?
Carte de scroll
La part des visiteurs ayant atteint chaque profondeur de la page
Les gens voient-ils seulement mes prix ?
Carte de zone
Le total des clics dans une zone que vous sélectionnez
Dans quelle mesure le menu entier est-il utilisé ?
Carte d'attention
Le temps passé sur chaque partie de la page
Quelle section retient les gens ?
Carte de mouvements
Où est allé le pointeur de la souris, proposée par certains outils
Qu'est-ce qui attire les visiteurs sur ordinateur ?
L'analytics vous dit combien de personnes ont visité une page. Une heatmap montre ce qu'elles y ont fait. Pour le site d'une petite entreprise, elle résout souvent l'énigme en un coup d'œil : le bouton que personne ne clique, la photo que tout le monde tape en pensant que c'est un lien, l'offre placée sous l'endroit où la plupart des visiteurs arrêtent de défiler. Essayez la démo pour voir comment on en construit une.
Choisissez un outil de heatmap et créez un projet pour votre site.
Ajoutez le script de suivi de l'outil sur chaque page, ou installez son plugin pour votre outil de création de site.
Mettez en place le consentement si vous avez des visiteurs de régions qui l'exigent, et choisissez quelle quantité de texte de la page l'outil peut enregistrer.
Attendez quelques centaines de visites sur la page qui vous intéresse avant de tirer des conclusions.
Ouvrez la heatmap de cette page, regardez mobile et ordinateur séparément, et notez un changement à tester.
Regardez téléphones et ordinateurs séparément. La même page s'affiche différemment, donc les cartes mélangées deviennent floues.
Des clics sur des éléments qui ne sont pas des liens, comme des photos ou du texte en gras, signifient que les gens s'attendent à ce qu'ils fassent quelque chose.
Si la plupart des visiteurs arrêtent de défiler avant votre appel à l'action, remontez-le plutôt que de l'agrandir.
Les rage clicks, quand quelqu'un tape encore et encore au même endroit, signalent souvent un élément cassé ou lent.
Voyez une heatmap comme une source d'idées, puis confirmez le changement avec un test A/B ou des données de conversion.
Questions fréquentes
Existe-t-il des outils de heatmap gratuits ?
Oui. La documentation de Microsoft présente Clarity comme un service gratuit pour toujours, avec cartes de clics, de scroll, de zone, de conversion et d'attention, plus des enregistrements de sessions. D'autres outils comme Hotjar proposent aussi des heatmaps ; consultez leurs offres actuelles sur leurs propres sites.
Combien de visiteurs faut-il pour une heatmap utile ?
Il n'y a pas de chiffre officiel. Certains outils dessinent une carte avec très peu de trafic, mais une poignée de visites montre surtout des habitudes individuelles. Attendez que le motif cesse de changer à mesure que les visites arrivent avant de refaire quoi que ce soit.
Les heatmaps nécessitent-elles un consentement aux cookies ?
Cela dépend de l'outil et de la loi applicable à vos visiteurs. Clarity, par exemple, a commencé à appliquer les signaux de consentement pour les visites depuis l'EEE, le Royaume-Uni et la Suisse le 31 octobre 2025. Ceci n'est pas un conseil juridique ; vérifiez les règles qui s'appliquent à vous.
Les outils de heatmap enregistrent-ils ce que les gens tapent ?
Les bons outils le masquent. La documentation de Clarity indique que le contenu des champs de saisie et des listes déroulantes est masqué dans tous les modes, et que son mode par défaut, Balanced, masque aussi les nombres et les adresses e-mail.
Quelle différence entre une heatmap et un enregistrement de session ?
Une heatmap additionne de nombreuses visites en une seule image d'une page. Un enregistrement de session rejoue le parcours d'un visiteur à travers les pages. Les heatmaps montrent des tendances ; les enregistrements aident à expliquer un cas isolé étrange.
Comment les données sont collectées
Un script sur votre page écoute les clics, les taps et le défilement, et envoie de petits enregistrements à l'outil : quel élément a été pressé, la largeur de la page, jusqu'où le visiteur est descendu. L'outil regroupe ensuite les enregistrements par page et par appareil, puis colore la page.
Les meilleurs outils rattachent les clics aux éléments de la page plutôt qu'à des positions brutes à l'écran. La documentation de Clarity indique que ses cartes de clics utilisent les éléments plutôt que la position absolue de la souris, pour que les cartes restent exactes quelles que soient la taille d'écran et la mise en page responsive.
Les réglages de confidentialité à choisir dès le premier jour
Décidez quelle quantité de texte de la page l'outil peut stocker. Clarity propose Strict, qui masque tout le contenu, Balanced, qui masque le contenu sensible comme les nombres et les adresses e-mail, et Relaxed, qui ne masque que les champs de formulaire et les listes déroulantes.
Vous pouvez aussi marquer certaines parties d'une page comme privées. Dans Clarity, c'est l'attribut data-clarity-mask, présenté dans le code ci-dessous. Clarity indique aussi qu'il ne doit pas être utilisé sur des sites destinés aux moins de 18 ans.
Le code dont vous pourriez avoir besoin
Deux courts snippets pour les sites qui utilisent Clarity. Les deux suivent l'API publiée par Microsoft ; les valeurs sont des exemples.
Masquer une partie d'une page dans les enregistrements
Ajouter data-clarity-mask avec la valeur True masque cet élément et tout ce qu'il contient, quel que soit le réglage du site.
Indiquer à Clarity que le visiteur a accepté
Appelez ceci depuis votre bandeau cookies après l'acceptation du visiteur. S'il refuse, Clarity fonctionne sans cookies, aucun appel n'est donc nécessaire.
Comment la démo dessine la chaleur
Chaque clic devient un cercle flou créé avec createRadialGradient. Les cercles qui se chevauchent s'additionnent, donc les zones très cliquées deviennent plus foncées.
Créez une heatmap à partir de vos propres clics
Cliquez ou tapez n'importe où sur la page d'exemple ci-dessous. Chaque clic ajoute de la chaleur. Rien n'est envoyé nulle part : les clics restent dans cet onglet du navigateur.
Page d'exemple. Cliquez pour ajouter de la chaleur à cet endroit.
Clics enregistrés : {n}
Effacer les clics
Afficher la page sous la chaleur
Carte
Commander
Nous trouver
Pain au levain frais, cuit à 5 h du matin
Commandez avant 10 h du soir pour un retrait le lendemain matin.
Commander du pain
Ouvert du mardi au dimanche, de 7 h à 2 h de l'après-midi