Outil de heatmap pour site indépendant : déployer Hotjar ou Microsoft Clarity et lire les données
1. Pourquoi même un petit site a besoin d’une heatmap : peu de trafic, encore plus de qualitatif
Google Analytics vous dit « taux de rebond de 70 % sur cette page », mais pas pourquoi l’utilisateur part. La heatmap et l’enregistrement de session comblent ce manque : ils capturent les clics, les défilements et les mouvements de souris réels sur votre page, et vous voyez directement où l’utilisateur bloque, où il clique à côté, où il repart.
Quand le trafic quotidien est faible, les données quantitatives (tests A/B, taux de conversion) ne donnent rien de concluant, alors que l’observation qualitative devient la plus utile. Un site B2B indépendant avec 100 visiteurs par jour enregistre plusieurs centaines de sessions en une semaine, assez pour repérer plusieurs problèmes de design évidents. C’est aussi pourquoi l’article précédent disait de ne pas faire de tests A/B avec peu de trafic, mais de mettre en place une heatmap. Avec Choisir un outil de test A/B à utiliser ensemble : la heatmap fait émerger les hypothèses, le test A/B les valide.
| Outil | Prix | Limite de trafic | Enregistrement de session | Cas recommandé |
|---|---|---|---|---|
| Microsoft Clarity | Gratuit | Non | Oui, filtrage par IA | Démarrage de petit site, budget zéro |
| Hotjar version gratuite | Gratuit | 2 000 sessions/jour | Limitée | Essai avec très peu de trafic |
| Hotjar version payante | à partir de 32 $/mois | Selon le forfait | Complète + filtres | Besoin d’enregistrements soignés |
2. Hotjar ou Clarity : comparatif sur trois dimensions
Les deux se recoupent largement : heatmap de clics, heatmap de défilement, enregistrement de session, tout y est. La différence tient à trois points. D’abord le prix : Clarity est entièrement gratuit et sans limite, Hotjar limite le trafic en version gratuite et démarre à 32 $/mois en version payante. Ensuite la qualité des enregistrements : ceux de Hotjar sont plus fluides et plus finement filtrables, ceux de Clarity saccadent parfois mais suffisent. Enfin les fonctions d’IA : Clarity intègre des analyses par IA qui signalent automatiquement les sessions anormales comme le « retour arrière rapide » ou le « clic de colère », pratique pour les petites équipes.
Contre-intuitif, mais vrai : les deux outils cohabitent sans problème. Les heatmaps se recoupent largement, mais Clarity offre un meilleur filtrage des replays, tandis que Hotjar est plus agréable pour visualiser les heatmaps. Pour un petit site B2B, commencez par Clarity pendant un mois, et si vous avez vraiment besoin de replays plus fins, ajoutez la version payante de Hotjar. Le déploiement passe par GTM dans les deux cas, pour une gestion centralisée. Voir Gérer les balises, déclencheurs et variables dans GTM.
| Critère de comparaison | Clarity | Hotjar | Comment choisir pour un petit site |
|---|---|---|---|
| Coût | Entièrement gratuit | Gratuit avec limite de trafic / payant à partir de 32 $ | Budget zéro : choisissez Clarity |
| Qualité des replays | Suffisante, quelques saccades | Fluide, filtrage fin | Exigences élevées : choisissez Hotjar |
| Analyse IA | Signalement d’anomalies inclus | Uniquement en version payante | IA gratuite : choisissez Clarity |
| Impact sur les performances | Léger | Moyen | Chargement asynchrone dans les deux cas |
III. Déploiement : ajouter le code via GTM, attention à la conformité
Le déploiement des deux outils est simple : créez un compte, récupérez l’ID de suivi, puis ajoutez un bout de code via GTM. Le point sensible, c’est la conformité : l’enregistrement de sessions capture le comportement réel des visiteurs, donc pour un site dans l’UE, le script de heatmap ne doit se charger qu’après le consentement aux cookies, sinon vous enfreignez le RGPD. La méthode est la même que pour un pixel : dans GTM, réglez la balise heatmap sur « attendre le consentement », et elle ne se déclenche qu’une fois l’accord donné.
Côté performance, les deux outils se chargent en asynchrone et pèsent très peu sur les Core Web Vitals, mais évitez de les charger en même temps que d’autres scripts lourds qui bloquent le rendu. La première semaine après le déploiement, surveillez de près : le script ne se charge-t-il qu’après le consentement, et les replays enregistrent-ils bien vos sessions ? Pour les détails de conformité, voir Fondations de conformité pour un site à l’international, et pour les repères de performance, voir Core Web Vitals.
| Étapes de déploiement | Action | Méthode de vérification |
|---|---|---|
| Créer un compte | Récupérer l’ID de suivi | Format d’ID correct |
| Ajouter la balise dans GTM | Renseigner le code avec l’ID | Vérifier le déclenchement en mode aperçu |
| Configurer le consentement aux cookies | Charger après le consentement | Aucune requête réseau sans consentement |
| Vérifier par auto-enregistrement | Visitez le site vous-même et interagissez | Replay visible dans le back-office sous 10 minutes |
IV. Lecture des données : quoi regarder dans chaque type de heatmap
Il existe trois types de heatmaps, et chacune se lit différemment. La heatmap de clics montre où les utilisateurs cliquent : cherchez en priorité les zones « cliquées sans réaction », souvent des éléments que les visiteurs croient à tort cliquables. La heatmap de défilement montre jusqu’où ils descendent : si 80 % s’arrêtent à une certaine ligne, c’est que le contenu au-dessus n’a pas retenu l’attention. Les replays de session montrent le parcours complet : c’est le cœur de l’analyse qualitative, en observant directement le parcours d’un visiteur réel, de son arrivée à son départ.
Jugement clé : en dessous de 200 visites par page, une heatmap n’a aucune valeur statistique. Sur un petit site, un article de blog peut ne faire que 50 visites par semaine ; la heatmap ne montrera que du bruit, ne tirez pas de conclusions dessus. Ne regardez les heatmaps que pour les pages dépassant 200 visites par mois, et fiez-vous à GA4 pour les tendances des autres pages. Pour savoir comment lire les heatmaps liées aux formulaires, voir Fiabilité des formulaires de contact et anti-spam.
| Type de heatmap | Quoi vérifier | Signal | Action |
|---|---|---|---|
| Heatmap de clics | Zones de clics erronés | L’utilisateur clique sur un élément non interactif | Ajouter un lien ou modifier l’indication |
| Heatmap de défilement | Points de rupture du contenu | Arrêt massif du défilement à un endroit | Optimiser le contenu à cet endroit |
| Enregistrement de session | Parcours comportemental complet | Hésitations répétées, retours rapides | Identifier les points de confusion |
V. Erreurs de lecture courantes : une zone rouge ne signifie pas que les utilisateurs en veulent
L’erreur la plus fréquente chez les débutants : voir une zone rouge sur une heatmap et penser « les utilisateurs s’intéressent à cet endroit, je devrais ajouter du contenu ». Faux. Le rouge peut signaler un clic erroné — l’utilisateur croyait qu’il y avait un lien, il n’y en a pas — ou un emplacement publicitaire, dont les couleurs vives attirent naturellement le clic. La bonne méthode : ouvrir l’enregistrement de session et regarder ce que font réellement les visiteurs à cet endroit, puis déterminer s’il s’agit d’un besoin ou d’une erreur.
Autre contresens : prendre la heatmap pour une donnée statistique. Une heatmap est une visualisation agrégée, pas un test de significativité. Une zone rouge peut provenir des clics répétés de 10 visiteurs seulement et ne représente pas « la majorité des utilisateurs ». Les petits sites doivent être particulièrement prudents : sur un petit échantillon, chaque couleur de la heatmap peut être fortuite. Regarder 20 enregistrements par semaine est bien plus fiable que de scruter la heatmap. Pour le rythme de suivi au quotidien, voir Les six tâches mensuelles de la maintenance d’un site.
| Contresens | Jugement de surface | Explication probable | Méthode de vérification |
|---|---|---|---|
| Point rouge = les utilisateurs en veulent | Ajouter du contenu et des liens | Clic erroné ou emplacement publicitaire | Vérifier le comportement en replay |
| Personne ne clique à cet endroit = personne n’en veut | Supprimer ce contenu | Position trop basse, jamais vue | Regarder la profondeur de défilement |
| Un utilisateur bloqué en replay = problème grave | Refonte complète du design | Cas isolé d’un seul utilisateur | Compter les replays similaires |
| Plus la heatmap est rouge, mieux c’est | Courir après les points chauds | Des points chauds dispersés = aucun point focal | Regarder la concentration des clics |
6. Transformer les découvertes de la heatmap en actions
Regarder la heatmap et les replays ne sert à rien si on ne change rien. Réservez 30 minutes par semaine pour identifier 1 à 2 problèmes les plus évidents et corrigez-les la semaine suivante. Par exemple, si vous constatez que les utilisateurs cliquent sans cesse sur une image en croyant à un lien, ajoutez un lien ou une légende à cette image ; si la heatmap de défilement montre un arrêt massif sur la ligne des caractéristiques produit, c’est que ces caractéristiques sont trop denses : présentez-les sous forme de tableau ou de liste à puces. Après correction, observez pendant une semaine si la même confusion disparaît des replays.
Ce cycle « détecter – corriger – réobserver » est le processus minimal d’optimisation par heatmap pour un petit site. Ne cherchez pas à tout corriger d’un coup : un correctif par semaine, c’est 12 améliorations par trimestre. À combiner avec Surveillance et alertes du site pour traiter séparément les problèmes de performance et ceux d’expérience.
FAQ — Questions fréquentes
Hotjar ou Microsoft Clarity : lequel choisir ?
Combien d’échantillons faut-il pour qu’une heatmap soit significative ?
Que signifient les zones rouges sur une heatmap ?
Les replays de session doivent-ils respecter le RGPD ?
Les outils de heatmap ralentissent-ils le site ?
À quelle fréquence consulter heatmaps et replays ?
Pour conclure
Les heatmaps et les replays de session sont l’un des rares outils d'”étude utilisateur” abordables pour un petit site. Les grandes entreprises font des entretiens utilisateurs et des tests d’utilisabilité ; un petit site enregistre quelques centaines de replays avec la version gratuite de Clarity, et le résultat n’est pas très différent. L’essentiel n’est pas le prix de l’outil, mais votre patience à consacrer 30 minutes par semaine à observer réellement comment les gens utilisent votre site.
Trois étapes pour passer à l’action. Un : installez Clarity aujourd’hui, via GTM, avec le consentement cookies configuré. Deux : bloquez 30 minutes par semaine pour examiner les heatmaps des pages clés et 20 replays. Trois : retenez chaque fois 1 à 2 problèmes parmi les plus évidents, corrigez-les la semaine suivante, puis observez à nouveau. Faites tourner cette petite boucle pendant un trimestre : l’expérience de votre site indépendant progressera de façon visible.
Une phrase à retenir : le rouge d’une heatmap n’est pas la voix des utilisateurs. Ce sont ces clics hésitants et ces retours en arrière rapides dans les replays de session. Regardez les replays, pas seulement les heatmaps.