Installation Next.js

Next.js stellt eine optimierte <Script>-Komponente bereit, die externe Skripte lädt, ohne die Seite auszubremsen. Das ist die von uns empfohlene Methode.

#App Router (Next 13+)

In app/layout.tsx:

import Script from 'next/script';

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

#Pages Router (Next 12 und älter)

In pages/_document.tsx oder pages/_app.tsx:

import Script from 'next/script';

// in der Root-Komponente, nach den übrigen Skripten
<Script
  id="snorklee"
  src="https://snorklee.com/w.js"
  data-site="ihrsite.com"
  strategy="afterInteractive"
/>;

#Hinweise

• Strategie afterInteractive: der Code lädt, sobald die Seite interaktiv ist, ohne den ersten Seitenaufbau zu blockieren.
• Next.js verlangt das id-Attribut, damit der Code nicht doppelt eingebunden wird.
• Bei dynamischen Routen fügen Sie den Code nur einmal ein (im Layout). Seitenwechsel im Browser (<Link>, router.push, die Zurück-Taste — alles, was über die History-API des Browsers läuft) werden automatisch gezählt, ohne dass Sie etwas einstellen müssen: Bei jedem Pfadwechsel wird die verlassene Seite mit ihrer Dauer und ihrer Scrolltiefe gesendet, dann beginnt ein neuer Seitenaufruf.
• Von der Adresse wird nur der Pfad gesendet: nie die Parameter nach ?, nie das Fragment nach #. Eine Änderung, die nur diese betrifft, zählt daher nicht als neue Seite.
• Die verweisende Website gilt nur für die Einstiegsseite, genau wie bei einer klassischen Navigation.
• Dasselbe gilt für andere Single-Page-Websites (Nuxt, React Router, SvelteKit…): eine Installation, und jeder Pfadwechsel wird gezählt.