Ajouter des analytics à une app React ou Next.js sans cookie

Mesurer l’audience d’une application React ou Next.js réserve toujours une mauvaise surprise à qui vient du web classique. On colle le script d’analytics dans la page, tout semble fonctionner, puis on s’aperçoit que le tableau de bord n’enregistre qu’une seule page vue par visite, quelle que soit la navigation. La raison tient à la nature même de ces applications : elles changent de page sans recharger le document, et le script de mesure, pensé pour des rechargements complets, ne voit jamais ces transitions. Nous vous proposons ici de comprendre ce piège et de le résoudre proprement, avec une mesure sans cookie ni bannière adaptée à React et à Next.js.

Pourquoi une SPA échappe à la mesure classique

Une application React, qu’elle soit servie par Vite ou par Next.js en mode client, fonctionne comme une single-page application : le navigateur charge un document HTML une seule fois, puis le routeur intercepte les clics et remplace le contenu de la page sans jamais recharger le document. C’est ce qui rend ces interfaces fluides et rapides. Mais c’est aussi ce qui trompe les outils de mesure conçus à l’époque des sites multipages.

Un script d’analytics traditionnel enregistre une page vue au moment où le document se charge. Sur un site classique, chaque navigation déclenche un rechargement complet, donc une nouvelle page vue. Dans une application React, ce rechargement n’arrive qu’une fois, à l’entrée sur le site. Toutes les navigations suivantes se font en mémoire, sans nouvel événement de chargement. Résultat : le visiteur peut parcourir dix écrans, l’outil n’en compte qu’un seul. Les parcours sont invisibles, les pages les plus consultées faussées, et les tunnels de conversion inexploitables.

La solution consiste à signaler chaque changement de route au script de mesure, pour qu’il enregistre une page vue à chaque transition, exactement comme le ferait un rechargement sur un site classique. Encore faut-il le faire au bon endroit, et sans dupliquer les événements.

Mesurer sans cookie, la bonne base

Avant même de régler la question du routeur, il vaut la peine de choisir une approche de mesure qui ne repose pas sur des cookies. Une application moderne charge déjà beaucoup de JavaScript ; y ajouter une pile de pistage publicitaire et une bibliothèque de gestion du consentement alourdit inutilement le bundle et impose une bannière que vos utilisateurs subissent à l’entrée.

Une mesure sans cookie ne dépose rien sur l’appareil du visiteur et n’envoie aucune donnée hors d’Europe. Elle enregistre les pages vues, les sources de trafic, la répartition par pays ou par appareil, sans jamais reconstituer un profil individuel. Cela la place hors du champ qui impose une bannière de consentement, et cela allège la page. Chez Takt, le script fait environ 2,5 kilo-octets, il est hébergé en Europe, et il s’intègre à React via un wrapper dédié qui gère pour vous les subtilités du routeur. Si vous hésitez encore entre cette approche et Google Analytics, notre page comparative détaille les différences.

Brancher la mesure sur le routeur

Le principe est toujours le même : enregistrer une page vue à l’entrée, puis une nouvelle à chaque changement de route. La façon de le faire dépend du routeur que vous utilisez.

Avec Next.js et son App Router, le suivi des transitions passe par les hooks du routeur. On place un composant client à la racine de l’application qui observe le chemin courant et déclenche une page vue à chaque fois qu’il change. Il faut veiller à ne pas enregistrer deux fois la première vue : le chargement initial et le premier rendu du hook peuvent se chevaucher si l’on n’y prend pas garde. Le wrapper React de Takt gère ce cas pour vous, en exposant un composant à monter une seule fois qui s’occupe de la vue initiale comme des suivantes.

Avec React Router dans une application Vite, le mécanisme est comparable : on écoute l’objet de localisation fourni par le routeur, et l’on émet une page vue à chaque changement de chemin. Là encore, le wrapper React se branche sur ce flux et évite les doublons.

Dans les deux cas, la bonne pratique consiste à initialiser la mesure une seule fois, le plus haut possible dans l’arbre des composants, puis à laisser le wrapper suivre les transitions. On évite ainsi le piège classique qui consiste à réinitialiser le script à chaque rendu, ce qui multiplierait les événements.

Le piège de l’environnement de développement

Un dernier écueil mérite d’être mentionné, car il gaspille beaucoup de temps. Pendant le développement, votre application tourne en local, et vous naviguez vous-même dedans des dizaines de fois par jour. Si la mesure est active dans cet environnement, vos statistiques de production se retrouvent polluées par votre propre trafic de test, avec des chiffres qui n’ont aucun sens.

La bonne pratique consiste à désactiver la mesure en local. Le wrapper React de Takt propose une option qui exclut d’emblée les visites depuis localhost, ce qui évite d’avoir à câbler soi-même une condition sur l’environnement. Une fois ce garde-fou en place, vous pouvez développer sereinement sans salir vos données réelles.

Au-delà des pages vues, un wrapper de ce type permet aussi d’enregistrer des événements personnalisés — une inscription, un ajout au panier, la validation d’un formulaire — pour construire des objectifs et des tunnels de conversion. C’est ce qui transforme une simple mesure d’audience en un véritable outil de compréhension des parcours, toujours sans cookie ni identification individuelle.

En résumé

Une application React ou Next.js échappe à la mesure classique parce qu’elle change de page sans recharger le document : le script traditionnel ne compte qu’une seule vue par visite. La solution consiste à signaler chaque changement de route au script, en se branchant sur les hooks de Next.js ou sur React Router, tout en évitant de compter deux fois la première vue. En choisissant une mesure sans cookie, hébergée en Europe et intégrée via un wrapper React qui gère ces subtilités — y compris l’exclusion du trafic local en développement — on obtient un suivi fidèle des parcours, des pages plus légères et une conformité par défaut, sans jamais pister individuellement les utilisateurs.