Next.js veut la balise à un seul endroit puis vous laisse tranquille : les navigations côté client se comptent toutes seules, il n'y a donc aucun événement de routeur auquel s'abonner ni rien à appeler au changement de route.

Récupérez d'abord l'extrait depuis votre tableau de bord. Il ressemble à ceci, avec votre propre identifiant de site dans le chemin :

<script src="https://t.skomi.com/s/your-site-id.js" defer></script>

App Router

Dans app/layout.tsx, à l'intérieur du <body> :

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <Script
          src="https://t.skomi.com/s/your-site-id.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

afterInteractive est la valeur par défaut et la bonne ici : la page doit finir de charger d'abord, et rien sur elle n'attend l'analytics.

Pages Router

La même balise dans pages/_app.tsx :

import Script from "next/script";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://t.skomi.com/s/your-site-id.js"
        strategy="afterInteractive"
      />
    </>
  );
}

_app plutôt que _document, pour qu'elle survive à une navigation côté client comme le reste de votre application.

La navigation côté client est déjà comptée

C'est la partie que les gens s'attendent à devoir écrire, et il n'y a rien à écrire.

Le script de Skomi enveloppe history.pushState et history.replaceState et écoute popstate : chaque changement de route que fait Next est donc une page vue, que le visiteur ait cliqué sur un <Link>, soit revenu en arrière, ou que vous ayez appelé router.push vous-même.

Deux détails valent d'être connus, parce que ce sont ceux qui ressemblent à des bugs :

  • Une navigation qui ne change pas l'adresse n'est pas comptée. Remplacer l'URL par la même URL (ce que fait parfois un filtre ou une mise à jour de la position de défilement) est ignoré plutôt que compté comme une seconde vue.
  • La page que l'on quitte est terminée en premier. Son temps passé et sa profondeur de défilement sont vidés avant que la nouvelle vue ne s'ouvre : une application monopage rapporte donc l'attention par route plutôt qu'un seul chiffre pour toute la session.

N'utilisez pas strategy="worker"

next/script propose une stratégie worker qui déplace un script tiers dans un web worker via Partytown. C'est une bonne idée pour des scripts qui ne font qu'envoyer des événements, et cela casse complètement celui-ci : un worker n'a pas de document, il n'y a donc aucune page à lire.

Tout ce que fait Skomi a besoin de la vraie page : les cartes de chaleur et les enregistrements de session en sont une image, le widget de retours doit apparaître dessus, et même l'analytics simple a besoin de l'adresse que le visiteur regarde vraiment. Utilisez afterInteractive.

beforeInteractive n'est pas faux, seulement inutile : il existe pour les scripts qui doivent s'exécuter avant l'hydratation, et compter une visite n'en fait pas partie.

Si vous avez une politique de sécurité du contenu

Next.js facilite l'ajout d'une politique stricte, et une politique stricte bloquera ceci tant que vous ne lui dites pas le contraire. Le script et les données qu'il envoie utilisent tous deux un seul hôte :

script-src  https://t.skomi.com
connect-src https://t.skomi.com

Si votre politique utilise un nonce, appliquez-le à cette balise comme vous le faites aux vôtres.

Rien n'arrive en développement

localhost n'est pas le domaine que vous avez enregistré : les relevés qui en viennent sont donc refusés par la vérification d'origine. C'est délibéré (votre propre travail ne devrait pas figurer dans vos chiffres) et cela veut bien dire que npm run dev n'est pas l'endroit où confirmer l'installation. Déployez sur le vrai domaine, ou sur un sous-domaine, et regardez là.

Vérifier que cela fonctionne

Chargez une page sur le vrai domaine, cliquez vers une autre route, et regardez votre tableau de bord : vous devriez voir deux pages vues plutôt qu'une. Si rien n'arrive, voir que vérifier quand l'extrait ne fonctionne pas.