Heatmaps
Heatmaps visuelles de clics, de défilement et de mouvements pour n'importe quelle page. Visualisez où les utilisateurs cliquent, jusqu'où ils défilent et où ils survolent la page — sans regarder les enregistrements individuels.
Ce que vous verrez
La page Heatmaps affiche une liste de vos pages avec le nombre de sessions capturées sur chacune. En cliquant sur une page, vous accédez à l'interface de visualisation :
Interface de visualisation
L'écran est divisé en deux parties :
- Aperçu de la page (gauche/centre) — votre page réelle avec la superposition de la heatmap
- Panneau de contrôle (droite) — options de type de heatmap, filtre de période et sélection d'appareil
Types de heatmaps
Heatmap de clics Superpose une couche de chaleur sur les zones de la page les plus cliquées. Les zones rouges/orange indiquent une concentration élevée de clics, les zones bleues une concentration faible. Chaque point représente un clic agrégé de plusieurs utilisateurs.
Utile pour identifier :
- Les éléments qui attirent les clics mais ne sont pas cliquables (frustration utilisateur)
- Les CTA les plus efficaces
- Les zones ignorées qui mériteraient plus de visibilité
Heatmap de défilement Visualise jusqu'où les utilisateurs défilent sur la page. Une ligne horizontale matérialise le seuil en dessous duquel X % des utilisateurs ne descendent pas. Le gradient de couleur indique la densité des utilisateurs ayant atteint chaque zone.
Utile pour identifier :
- Le « fold » réel de votre page (point où la majorité des utilisateurs s'arrête)
- Le contenu important placé trop bas dans la page
- L'efficacité des sections longues
Heatmap de mouvements Agrège les mouvements de souris des utilisateurs. Les zones de forte densité correspondent aux zones où le regard des utilisateurs se concentre (les études montrent une corrélation entre mouvement de souris et regard).
Panneau d'informations par élément
En mode heatmap de clics, survolez un élément de la page pour voir :
- Nombre de clics sur cet élément
- Pourcentage du total des clics
- Nombre de sessions distinctes ayant cliqué
Comment l'utiliser
Accéder à la heatmap d'une page
- Accédez à Analytics → Heatmaps.
- La liste des pages détectées s'affiche avec le nombre de sessions disponibles.
- Cliquez sur la page à analyser.
- Choisissez le type de heatmap dans le panneau de contrôle (Clics, Défilement ou Mouvements).
- Sélectionnez la plage de dates et le type d'appareil (Tous, Bureau, Tablette, Mobile).
Configurer la capture de heatmap
Par défaut, le SDK capture automatiquement les données de clics et de défilement sur toutes les pages dès son installation. Aucune configuration supplémentaire n'est nécessaire.
Pour activer la capture des mouvements de souris (plus gourmande en bande passante) :
QMTracker.init({
siteId: 'YOUR_SITE_ID',
heatmaps: {
trackMouseMove: true,
sampleRate: 0.3 // capturer 30 % des sessions seulement
}
});
Analyser une page de destination (landing page)
- Chargez la heatmap de clics de votre page de destination principale.
- Identifiez les zones chaudes inattendues — des utilisateurs cliquent-ils sur des éléments non interactifs comme une image ou un texte ?
- Passez à la heatmap de défilement — quel pourcentage d'utilisateurs atteint votre CTA principal ?
- Si moins de 50 % des utilisateurs voient le CTA, envisagez de le remonter dans la page.
Comparer bureau vs. mobile
Les patterns de clic et de défilement diffèrent souvent fortement entre bureau et mobile. Analysez chaque type d'appareil séparément :
- Sur mobile, les zones cliquables doivent être suffisamment grandes (minimum 44 × 44 px selon les guidelines Apple/Google)
- La profondeur de défilement est généralement plus élevée sur mobile car les utilisateurs sont habitués à faire défiler
Combiner heatmaps et enregistrements
Pour les zones problématiques identifiées dans la heatmap (ex. : clics répétés sur un élément non cliquable), utilisez l'onglet Enregistrements avec un filtre sur la page concernée pour regarder les sessions individuelles et comprendre le contexte complet.
Condition de validation
Cet achievement est débloqué lorsque : au moins une page de votre site dispose d'une heatmap de clics générée à partir d'un minimum de 50 sessions.
Problèmes courants
La heatmap ne s'aligne pas avec la page actuelle Si votre site a été redessiné depuis la capture des données, la superposition peut être décalée. Filtrez la période pour n'afficher que les données collectées après la mise à jour du design. Vous pouvez également fixer une URL de référence dans les paramètres de la heatmap.
Les pages dynamiques (générées côté client) ne s'affichent pas correctement Pour les SPA où le contenu change sans rechargement de page, les heatmaps peuvent manquer d'éléments. Assurez-vous que les événements de navigation SPA sont correctement envoyés via l'intégration framework (React/Next.js). Les heatmaps fonctionnent mieux sur des pages avec une structure HTML stable.
Le nombre de sessions est faible (< 50) Les heatmaps ne sont statistiquement significatives qu'à partir d'un certain volume de sessions. Augmentez la plage de dates de la heatmap pour agréger plus de données. Pour les sites à faible trafic, une période de 30 à 90 jours est recommandée.
Les clics sur des éléments mobiles tactiles ne s'affichent pas Les taps sur écran tactile sont bien capturés par le SDK. Assurez-vous que le filtre d'appareil est bien défini sur « Mobile » ou « Tous » dans le panneau de contrôle de la heatmap.