Clustraly
Analytics, heatmap & tableau de bord

Sachez enfin comment vos articles sont lus avec le tracker heatmap frontend (scroll, zones H2, clics, temps)

Tracker heatmap frontend (scroll, zones H2, clics, temps) une fonctionnalité du module Analytics, heatmap & tableau de bord de Clustraly. Le tracker heatmap frontend mesure côté navigateur la profondeur de scroll, le temps par zone H2, les clics et le temps de lecture.

Le tracker s'installe sur vos pages article, mesure ce que font réellement vos lecteurs et renvoie tout au tableau de bord heatmap. Sans cookie, uniquement après consentement analytics.

Le bénéfice

Découvrez où vos lecteurs décrochent

Chaque page article devient une observation réelle : jusqu'où on descend, quelles sections retiennent l'attention, où l'on clique. Au lieu de deviner, vous voyez le comportement de lecture et décidez quoi réécrire, raccourcir ou mettre en avant.

  • Profondeur de scroll de 0 à 100 pour chaque session
  • Temps réellement passé sur chaque section H2
  • Position des clics pour repérer ce qui attire
  • Temps total de lecture par visite
Comment ça marche

Le tracker s'active tout seul, au bon moment

Le script heatmap-tracker.js ne démarre que si la page contient un élément article balisé data-article-id. Il génère un identifiant de session (UUID) stocké dans le sessionStorage, écoute le scroll en mode passif et observe les zones H2.

Les mesures sont réunies dans un seul objet puis envoyées via navigator.sendBeacon (repli fetch keepalive) vers /api/heatmap, au départ de la page et toutes les 30 secondes, pour que rien ne se perde même si le visiteur quitte brusquement.

  • Ne se déclenche que sur une page article balisée
  • Identifiant de session en sessionStorage, sans cookie
  • Envoi par sendBeacon avec repli fetch keepalive
  • Beacon toutes les 30 s et au départ de la page
Attention par section

Le temps passé sur chaque zone H2, mesuré

Un IntersectionObserver au seuil de 0,5 cumule les secondes pendant lesquelles chaque section H2 reste visible, rattachées à l'identifiant du titre (ou aux 40 premiers caractères de son intitulé). À l'envoi, les timers de zone encore ouverts sont fermés proprement pour un décompte complet.

Agrégée par article, cette mesure vous donne l'attention moyenne, en secondes, pour chaque section de votre contenu.

  • IntersectionObserver au seuil de 0,5 par section
  • Cumul des secondes par identifiant de titre H2
  • Timers de zone fermés proprement à l'envoi
  • Attention moyenne par zone, agrégée par article
Cas d'usage

Des articles retravaillés sur des faits, pas des intuitions

Servez-vous de la profondeur de scroll et du taux de lecture complète pour repérer les articles abandonnés tôt. Comparez l'attention par H2 pour voir quelles sections sont lues et lesquelles sont sautées. Lisez les clics pour comprendre ce qui attire le curseur.

Ensuite, à vous de trancher : raccourcir, réorganiser ou mettre en avant. Les mesures proposent, vous décidez.

  • Repérer les articles abandonnés avant la fin
  • Identifier les sections lues et celles ignorées
  • Comprendre ce qui attire les clics
  • Prioriser vos réécritures sur des mesures
Garde-fous

Respectueux du visiteur, robuste par conception

Le layout public n'injecte le script qu'après consentement analytics (lecture du cookie rgpd_consent). Aucun cookie n'est utilisé pour le suivi : l'identifiant de session vit dans le sessionStorage du navigateur, et les clics sont plafonnés à 100 par session.

L'endpoint qui reçoit les beacons est rate-limité, refuse la collecte sans consentement (403) et échoue en silence : le suivi ne casse jamais une page ni un envoi.

  • Injecté seulement après consentement analytics (RGPD)
  • Aucun cookie de suivi, session en sessionStorage
  • Clics plafonnés à 100 par session
  • Endpoint rate-limité, refus 403 sans consentement
Pourquoi ça compte

Sans cookie, uniquement avec consentement

Le tracker ne se charge qu'après accord analytics du visiteur et n'utilise aucun cookie de suivi : l'identifiant de session reste dans le sessionStorage du navigateur. La collecte échoue en silence plutôt que de gêner la lecture.

FAQ

Questions fréquentes

Le tracker fonctionne-t-il sur toutes les pages ?
Non. Il ne s'active que sur les pages contenant un article balisé avec data-article-id. Les autres pages ne déclenchent aucune mesure.
Utilise-t-il des cookies ?
Pas pour le suivi. L'identifiant de session est un UUID stocké dans le sessionStorage du navigateur, et le script n'est chargé qu'après consentement analytics.
Que se passe-t-il si le visiteur quitte brutalement la page ?
Le beacon est envoyé au beforeunload et toutes les 30 secondes via navigator.sendBeacon (avec repli fetch keepalive), de sorte que les mesures en cours sont transmises même à la fermeture.
Quelles mesures sont remontées ?
La profondeur de scroll maximale (0-100), le temps passé par zone H2, la position des clics (plafonnée à 100) et le temps total de lecture, rattachés à une session sans cookie.
Prêt à commencer ?

Comprenez vos lecteurs, améliorez vos articles

Activez le tracker heatmap frontend et laissez chaque article vous dire où l'attention se porte, où elle décroche et ce qui déclenche le clic. Les mesures s'agrègent dans votre tableau de bord heatmap ; à vous de décider quoi réécrire, raccourcir ou mettre en avant.