Ce que le suivi des clics enregistre sur un site, et les clics qu'il perd

Qu'est-ce que le suivi des clics sur un site web ?

Sur un site web, le suivi des clics consiste à enregistrer l'élément sur lequel un visiteur a cliqué, sur quelle page et à quel moment, puis à envoyer cet enregistrement à un outil d'analytics pour que les clics puissent être comptés, comparés et reliés aux conversions. Un petit script écoute l'événement click du navigateur, lit ce qui a été cliqué et envoie une courte charge utile à un point de collecte. Suivez les clics sur les éléments qui décident si un visiteur convertit, comme le bouton d'inscription, le sélecteur de tarifs et le lien de paiement, avant de suivre quoi que ce soit d'autre.

Le suivi des clics est la couche de données sous plusieurs rapports qui ont l'air différents. Un objectif compte les clics sur un bouton. Une heatmap peint les clics selon leur position. Une étape d'entonnoir peut être un clic. La méthode que vous choisissez décide des rapports que les données peuvent alimenter.

Qu'est-ce qu'un navigateur compte comme un clic ?

Un navigateur déclenche un événement click quand un bouton du pointeur est enfoncé puis relâché dans le même élément, quand un geste tactile s'y pose, ou quand un utilisateur du clavier l'active, donc un seul écouteur couvre la souris, le tactile et le clavier. La référence de MDN indique que "click fires after both the mousedown and mouseup events have fired, in that order," et cite "a touch gesture" et "pressing the Space key or Enter key while the element is focused" comme équivalents.

La règle du clavier cache un piège qui casse le suivi sur les contrôles personnalisés. MDN précise que l'équivalence avec Entrée et Espace "only applies to elements with a default key event handler, and therefore, excludes other elements that have been made focusable by setting the tabindex attribute." Une <div tabindex="0"> stylisée comme un bouton ne reçoit aucun click depuis le clavier, donc les utilisateurs du clavier disparaissent de son nombre de clics. Utilisez un vrai <button> ou <a> pour tout ce que vous prévoyez de suivre.

L'événement compte aussi les répétitions. MDN indique que la propriété detail contient "the number of times the target was clicked," elle vaut donc 2 pour un double clic et 3 pour un triple clic. Ce compteur est la matière première de la détection des rage clicks.

Quelles sont les trois façons de suivre les clics ?

Les trois méthodes sont un événement nommé sur des éléments choisis, un écouteur délégué unique qui enregistre chaque clic sur la page, et la capture des coordonnées qui stocke l'endroit de l'écran où chaque clic a atterri. Chacune répond à une question différente et échoue d'une façon différente.

Les événements nommés sont la méthode derrière le suivi d'événements, où le nom de l'événement porte l'action et les propriétés portent le détail. L'écouteur délégué est ce que les éditeurs appellent l'autocapture. La capture des coordonnées alimente la heatmap de site web, qui agrège les positions de nombreuses visites en une seule image. Un partage pratique consiste à utiliser des événements nommés pour la poignée de clics qui comptent et le replay de sessions pour le reste.

Que doit enregistrer un événement de clic ?

Un événement de clic doit enregistrer l'identifiant stable de l'élément, la page où il a eu lieu, la destination pour les liens et un horodatage, et rien de ce que le visiteur a saisi. Ces quatre champs répondent à "quoi, où, vers où et quand" sans rien stocker de personnel.

Laissez de côté le texte des liens sur les pages qui affichent des données de compte, et ne lisez jamais les valeurs des champs de formulaire voisins, car un bouton qui porte le nom d'un client envoie ce nom à chaque clic. Un attribut data-track dédié est l'identifiant le plus sûr, puisqu'il ne change que lorsque quelqu'un le change volontairement.

L'écouteur ci-dessous utilise un seul gestionnaire pour tout le document, filtre les éléments portant data-track et envoie avec navigator.sendBeacon() :

document.addEventListener(
  'click',
  (event) => {
    const el = event.target.closest('[data-track]');
    if (!el) return;
    navigator.sendBeacon(
      '/collect',
      JSON.stringify({
        name: el.dataset.track,
        path: location.pathname,
        href: el.getAttribute('href'),
        clicks: event.detail,
        ts: Date.now(),
      }),
    );
  },
  { capture: true },
);

L'option capture: true exécute le gestionnaire pendant la descente dans le DOM, avant tout gestionnaire placé sur le bouton lui-même. Un composant qui appelle event.stopPropagation() dans son propre gestionnaire de clic ne peut alors pas cacher le clic au tracker.

Pourquoi certains clics suivis n'arrivent-ils jamais dans le rapport ?

Les clics disparaissent quand la page se décharge avant l'envoi de la requête, quand un bloqueur supprime la requête, ou quand l'élément cliqué n'a jamais correspondu à l'écouteur. Les liens portent le risque supplémentaire de la première cause, parce que le clic qui lance une navigation est aussi celui qui démonte la page qui l'envoie.

MDN décrit directement le problème : "the browser may be about to unload the page, and in that case the browser may choose not to send asynchronous XMLHttpRequest requests." Sa réponse est navigator.sendBeacon(), qui "asynchronously sends an HTTP POST request containing a small amount of data to a web server" et qui est conçu pour ce cas. La comparaison sendBeacon ou fetch keepalive couvre les limites de taille et les cas où fetch avec keepalive: true convient mieux.

Passez les causes en revue dans cet ordre quand les chiffres semblent bas :

1. Comparez à un total connu. Les clics sur un bouton de paiement ne peuvent pas dépasser les pages vues du paiement. Un ratio très en dessous des attentes indique une perte, pas un manque d'intérêt.
2. Testez le cas des liens. Cliquez sur l'élément avec le panneau réseau ouvert et "Preserve log" activé. Une requête affichée comme annulée, c'est le problème du déchargement.
3. Testez le clavier. Allez sur l'élément avec Tab et appuyez sur Entrée. Aucun événement signifie une div focalisable au lieu d'un bouton.
4. Testez avec un bloqueur activé. Une requête qui disparaît sous un bloqueur de contenu est perdue pour cette part de visiteurs dans tous les rapports.
5. Vérifiez le sélecteur. Une définition écrite sur un nom de classe cesse de correspondre après une refonte, et le compteur tombe à zéro sans la moindre erreur.

Comment GA4 suit-il les clics sans code supplémentaire ?

GA4 suit automatiquement deux types de clics sur des liens grâce aux mesures améliorées : les clics sortants et les téléchargements de fichiers, et il ne suit pas les clics sur les boutons qui restent sur votre propre domaine. Le centre d'aide de Google indique que l'événement click se déclenche "each time a user clicks a link that leads away from the current domain and to another website" et collecte "link_classes, link_domain, link_id, link_url, outbound (boolean)." L'événement file_download se déclenche "when a user clicks a link leading to a file (with a common file extension)."

Tout le reste, y compris le bouton d'inscription et le sélecteur de tarifs, nécessite un événement personnalisé. Les guides pour suivre les liens sortants et les téléchargements de fichiers couvrent en détail les deux cas automatiques.

Que révèlent les schémas de clics sur les pages cassées ?

Les clics répétés sur un même élément et les clics qui ne produisent aucune réaction sont les deux schémas qui signalent une page cassée plutôt qu'un manque d'intérêt. Un rage click est une rafale de clics sur le même élément, et un dead click est un clic après lequel rien ne change sur la page. Les deux ressemblent à de l'engagement dans un décompte brut de clics, et c'est pour ça qu'un rapport de clics sans contexte de session surestime le bon fonctionnement d'une page. Le guide rage clicks et dead clicks liste les seuils publiés par chaque éditeur.

Flowsery couvre les deux moitiés du travail. Les événements personnalisés suivent n'importe quelle interaction avec un appel d'API JavaScript, y compris les clics sur des boutons, les envois de formulaires et les téléchargements de fichiers, et le suivi des objectifs transforme ces événements en taux de conversion, comme le montre la page suivi des objectifs et des événements. L'enregistrement de sessions rejoue les mouvements du curseur, les clics, les défilements et les saisies de formulaire, et l'IA de Flowsery signale les rage clicks, les dead clicks et les erreurs JavaScript dans chaque session enregistrée, puis les regroupe en problèmes classés selon le nombre de sessions touchées. Le suivi fonctionne sans cookies et sans bannière de consentement.

Questions fréquentes

Quelle est la différence entre le suivi des clics et une heatmap ?

Le suivi des clics est la collecte des enregistrements de clics, et une heatmap est une façon de les afficher. Une carte des clics agrège les positions x et y de nombreux clics en une superposition colorée sur une image de la page. Les événements de clic nommés ne portent aucune position et alimentent plutôt les objectifs et les entonnoirs.

Le suivi des clics compte-t-il les tapotements sur mobile ?

Oui. Un geste tactile sur un élément déclenche le même événement click qu'un appui puis un relâchement de la souris, donc un seul écouteur compte les deux. Les clics sur mobile ont besoin de leur propre vue de heatmap, puisque les coordonnées bougent avec la mise en page plus étroite.

Pourquoi mes clics sur les liens sortants sont-ils sous-comptés ?

La page commence à se décharger dès que le visiteur suit le lien, et le navigateur peut abandonner une requête ordinaire pendant le déchargement. Envoyer l'événement avec navigator.sendBeacon() ou fetch avec keepalive: true permet à la requête de survivre à la page. Les bloqueurs de contenu retirent une part supplémentaire qu'aucune méthode d'envoi ne récupère.

Faut-il suivre chaque clic ou seulement les plus importants ?

Suivez les clics liés à une conversion sous forme d'événements nommés, et laissez le reste au replay de sessions ou à une heatmap. Des événements nommés sur chaque élément produisent un schéma que personne ne maintient. Un écouteur délégué sur tout produit du volume avec des sélecteurs qui cassent à la prochaine refonte.

Le suivi des clics collecte-t-il des données personnelles ?

Un enregistrement de clic contient un identifiant d'élément, un chemin de page et un horodatage, et rien de tout cela n'identifie une personne. Les données personnelles entrent en jeu quand la charge utile inclut le texte d'un lien ou des valeurs de formulaire qui affichent les informations d'un client, ou quand les clics sont reliés à un identifiant persistant. Envoyez une valeur data-track fixe au lieu du texte visible pour garder l'enregistrement anonyme.

GA4 peut-il suivre automatiquement les clics sur les boutons ?

Non. Les mesures améliorées de GA4 enregistrent les clics sur les liens qui quittent votre domaine et sur les liens vers des types de fichiers courants. Un bouton qui reste sur votre propre site nécessite un événement personnalisé envoyé avec votre propre code ou via un gestionnaire de tags.

Pourquoi un <div tabindex="0"> n'enregistre-t-il pas les clics au clavier ?

Selon MDN, l'équivalence clavier pour Entrée et la barre d'espace ne s'applique qu'aux éléments dotés d'un gestionnaire d'événements clavier par défaut, ce qui exclut les éléments rendus focalisables uniquement par tabindex. Un <div tabindex="0"> stylé comme un bouton ne déclenche jamais d'événement click quand un utilisateur clavier appuie sur Entrée ou espace, ces utilisateurs disparaissent donc du comptage de clics. Utilisez un vrai <button> ou <a> pour tout ce que vous comptez suivre.

Que mesure la propriété detail de l'événement de clic ?

La propriété detail contient le nombre de fois où la cible a été cliquée, elle vaut donc 2 pour un double clic et 3 pour un triple clic. Ce compteur est la matière première de la détection des rage clicks. Un événement nommé qui journalise aussi detail peut signaler des clics répétés sur un élément sans écouteur supplémentaire.

Quelle est la différence entre un rage click et un dead click ?

Un rage click est une rafale de clics sur le même élément, et un dead click est un clic après lequel rien ne change sur la page. Les deux ressemblent à de l'engagement dans un simple comptage de clics, un rapport de clics sans contexte de session peut donc faire passer une page cassée pour une page populaire.

Que fait l'option capture: true dans un écouteur de clic ?

Elle fait exécuter le gestionnaire de suivi en descendant dans le DOM, avant tout gestionnaire de clic attaché à l'élément lui-même. Un composant qui appelle event.stopPropagation() dans son propre gestionnaire est quand même enregistré, car le traqueur s'est déjà exécuté avant que ce gestionnaire ne se déclenche.