Next.js braucht das Tag an einer Stelle und lässt Sie dann in Ruhe: clientseitige Navigationen zählen sich selbst, es gibt also kein Router-Ereignis zu abonnieren und nichts beim Routenwechsel aufzurufen.

Holen Sie sich zuerst das Snippet aus Ihrem Dashboard. Es sieht so aus, mit Ihrer eigenen Website-ID im Pfad:

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

App-Router

In app/layout.tsx, innerhalb des <body>:

import Script from "next/script";

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

afterInteractive ist die Voreinstellung und hier die richtige: die Seite soll zuerst fertig laden, und nichts darauf wartet auf Analytics.

Pages-Router

Dasselbe Tag in 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 statt _document, damit es eine clientseitige Navigation genauso übersteht wie der Rest Ihrer Anwendung.

Clientseitige Navigation wird bereits gezählt

Das ist der Teil, von dem Menschen erwarten, ihn schreiben zu müssen, und es gibt nichts zu schreiben.

Skomis Skript umhüllt history.pushState und history.replaceState und hört auf popstate, jeder Routenwechsel, den Next macht, ist also ein Seitenaufruf, ob der Besucher einen <Link> geklickt hat, zurückgegangen ist oder Sie selbst router.push aufgerufen haben.

Zwei Einzelheiten, die es wert sind, gekannt zu werden, weil sie wie Fehler aussehen:

  • Eine Navigation, die die Adresse nicht ändert, wird nicht gezählt. Die URL durch dieselbe URL zu ersetzen (was ein Filter oder eine Aktualisierung der Scrollposition manchmal tut), wird ignoriert statt als zweiter Aufruf gezählt.
  • Die verlassene Seite wird zuerst abgeschlossen. Ihre Verweildauer und ihre Scrolltiefe werden weggeschrieben, bevor der neue Aufruf beginnt, eine Single-Page-Anwendung meldet Aufmerksamkeit also je Route statt einer Zahl für die ganze Sitzung.

Nutzen Sie strategy="worker" nicht

next/script bietet eine worker-Strategie an, die ein Skript eines Dritten über Partytown in einen Web Worker verlagert. Das ist eine gute Idee für Skripte, die nur Ereignisse senden, und es macht dieses hier vollständig kaputt: Ein Worker hat kein document, es gibt also keine Seite zu lesen.

Alles, was Skomi tut, braucht die echte Seite: Heatmaps und Sitzungsaufzeichnungen sind ein Bild von ihr, das Feedback-Widget muss auf ihr erscheinen, und selbst schlichte Analytics braucht die Adresse, die der Besucher tatsächlich vor sich hat. Nehmen Sie afterInteractive.

beforeInteractive ist nicht falsch, nur unnötig: Es gibt es für Skripte, die vor der Hydration laufen müssen, und einen Besuch zu zählen gehört nicht dazu.

Wenn Sie eine Content Security Policy haben

Next.js macht eine strenge CSP leicht hinzuzufügen, und eine strenge CSP blockiert das hier, bis Sie es ihr sagen. Das Skript und die Daten, die es sendet, nutzen beide einen Host:

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

Wenn Ihre Richtlinie eine Nonce verwendet, wenden Sie sie auf dieses Tag an, wie Sie es bei Ihren eigenen tun.

In der Entwicklung kommt nichts an

localhost ist nicht die Domain, die Sie registriert haben, Aufrufe von dort werden also von der Herkunftsprüfung abgelehnt. Das ist Absicht (Ihre eigene Arbeit soll nicht in Ihren Zahlen stehen), und es bedeutet, dass npm run dev nicht der Ort ist, an dem Sie die Installation bestätigen. Liefern Sie auf die echte Domain oder eine ihrer Subdomains aus und sehen Sie dort nach.

Prüfen, ob es funktioniert

Laden Sie eine Seite auf der echten Domain, klicken Sie sich zu einer anderen Route durch und sehen Sie in Ihr Dashboard: Sie sollten zwei Seitenaufrufe sehen statt einem. Wenn nichts ankommt, siehe was zu prüfen ist, wenn das Snippet nicht funktioniert.