Adding Privacy-First Analytics to a Next.js App

Les applications Next.js disposent de quelques approches analytics courantes, et la plupart impliquent soit un bandeau cookies, soit un script tiers lourd qui ralentit vos Core Web Vitals. Voici comment ajouter des analytics privacy-first en temps réel sans l'un ni l'autre.

Ce que vous obtiendrez

Suivi des pageviews à chaque changement de route, y compris la navigation côté client
Comptages de visiteurs, référents, pays, familles de navigateurs et types d'appareils
Pas de cookies, pas de fingerprinting, pas de consentement RGPD requis
Une seule balise script async — aucun paquet npm à maintenir

Étape 1 : Créer un compte Monoid

Inscrivez-vous sur monoid.website et créez un nouveau site. Vous recevrez un site_id — un court identifiant alphanumérique pour votre propriété.

Étape 2 : Ajouter le traceur à votre layout

Dans Next.js 13+ avec l'App Router, ajoutez le script du traceur à votre layout.tsx racine :

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.monoid.website/tracker.min.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Utiliser strategy="afterInteractive" charge le script après que la page devient interactive, ce qui préserve votre score Largest Contentful Paint.

Étape 3 : Gérer la navigation côté client

Le hook history.pushState intégré au traceur se déclenche automatiquement à chaque événement de navigation, à la fois dans le Pages Router et dans l'App Router. Vous n'avez rien à ajouter de plus.

Si vous souhaitez envoyer des événements personnalisés — par exemple, lorsqu'un utilisateur finalise un checkout ou clique sur un bouton spécifique — appelez le helper global directement :

window.monoid('event', 'checkout_complete')

Étape 4 : Vérifier dans le tableau de bord

Ouvrez votre tableau de bord Monoid et naviguez vers une page de votre site. Vous devriez voir un visiteur en direct apparaître dans le flux temps réel en quelques secondes. Si vous avez configuré un environnement de staging, assurez-vous qu'il utilise un site_id séparé pour que le trafic de développement ne pollue pas vos métriques de production.

Ce qui n'est pas requis

Vous n'avez pas besoin d'installer un gestionnaire de consentement cookies. Vous n'avez pas besoin de mettre à jour votre politique de confidentialité pour mentionner les cookies analytics (parce qu'il n'y en a pas). Et vous n'avez pas besoin de paquet npm — le traceur est un unique fichier JavaScript vanilla servi depuis un réseau edge global.

La famille de navigateur et le type d'appareil sont dérivés côté serveur depuis l'ordinaire User-Agent de la requête pour le reporting agrégé. Les chaînes User-Agent complètes, les versions de navigateur, les cookies, les identifiants persistants et les empreintes d'appareil ne sont jamais stockés.

Pour la plupart des projets Next.js, cela prend moins de deux minutes entre l'inscription et les données en direct.