Installation Next.js

Next.js fournit un composant <Script> optimisé pour charger des scripts externes sans ralentir l'affichage. C'est la méthode que nous recommandons.

#App Router (Next 13+)

Dans app/layout.tsx :

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <Script
          id="snorklee"
          src="https://snorklee.com/w.js"
          data-site="monsite.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

#Pages Router (Next 12 et antérieurs)

Dans pages/_document.tsx ou pages/_app.tsx :

import Script from 'next/script';

// dans le composant racine, après les autres scripts
<Script
  id="snorklee"
  src="https://snorklee.com/w.js"
  data-site="monsite.com"
  strategy="afterInteractive"
/>;

#Notes

• Stratégie afterInteractive : le code se charge une fois la page interactive, sans bloquer le premier affichage.
• L'attribut id est demandé par Next.js pour éviter les doublons.
• Pour les routes dynamiques, vous ne posez le code qu'une seule fois (dans le layout). Les changements de page côté navigateur (<Link>, router.push, bouton retour — tout ce qui passe par l'API History du navigateur) sont comptés automatiquement, sans réglage de votre part : à chaque changement de chemin, la page quittée part avec sa durée et son défilement, puis une nouvelle page vue commence.
• Seul le chemin de l'adresse est envoyé : jamais les paramètres après ?, jamais le fragment après #. Un changement qui ne touche qu'eux ne compte donc pas comme une nouvelle page.
• Le site d'origine (référent) ne vaut que pour la page d'arrivée, comme pour une navigation classique.
• Il en va de même pour les autres sites d'une seule page (Nuxt, React Router, SvelteKit…) : une seule installation, et chaque changement de chemin est compté.