Adding Privacy-First Analytics to a Next.js App

Next.js-Anwendungen haben einige gängige Analytics-Ansätze, und die meisten von ihnen erfordern entweder ein Cookie-Banner oder ein schwergewichtiges Drittanbieter-Skript, das Ihre Core Web Vitals verlangsamt. Hier ist, wie Sie Echtzeit-, datenschutzfreundliches Analytics ohne beides hinzufügen.

Was Sie erhalten

Pageview-Tracking bei jedem Routenwechsel, einschließlich clientseitiger Navigation
Besucherzählungen, Referrer, Länder, Browser-Familien und Gerätetypen
Keine Cookies, kein Fingerprinting, keine DSGVO-Einwilligung erforderlich
Einzelnes asynchrones Skript-Tag — kein npm-Paket zu warten

Schritt 1: Ein Monoid-Konto erstellen

Registrieren Sie sich auf monoid.website und erstellen Sie eine neue Site. Sie erhalten eine site_id — eine kurze alphanumerische Kennung für Ihre Property.

Schritt 2: Den Tracker zu Ihrem Layout hinzufügen

Fügen Sie in Next.js 13+ mit dem App Router das Tracker-Skript zu Ihrem Root-layout.tsx hinzu:

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>
  )
}

Die Verwendung von strategy="afterInteractive" lädt das Skript, nachdem die Seite interaktiv wird, und hält Ihren Largest Contentful Paint Score unbeeinflusst.

Schritt 3: Clientseitige Navigation behandeln

Der eingebaute history.pushState-Hook des Trackers feuert automatisch bei jedem Navigationsereignis in sowohl dem Pages Router als auch dem App Router. Sie müssen nichts Zusätzliches hinzufügen.

Wenn Sie benutzerdefinierte Ereignisse senden möchten — zum Beispiel, wenn ein Nutzer einen Checkout abschließt oder einen bestimmten Button klickt — rufen Sie den globalen Helfer direkt auf:

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

Schritt 4: Im Dashboard verifizieren

Öffnen Sie Ihr Monoid-Dashboard und navigieren Sie zu einer Seite auf Ihrer Website. Sie sollten innerhalb weniger Sekunden einen Live-Besucher im Echtzeit-Feed erscheinen sehen. Wenn Sie eine Staging-Umgebung eingerichtet haben, stellen Sie sicher, dass sie eine separate site_id verwendet, damit Entwicklungs-Traffic Ihre Produktions-Metriken nicht verunreinigt.

Was nicht erforderlich ist

Sie müssen keinen Cookie-Einwilligungs-Manager installieren. Sie müssen Ihre Datenschutzerklärung nicht aktualisieren, um Analytics-Cookies zu erwähnen (weil es keine gibt). Und Sie benötigen kein npm-Paket — der Tracker ist eine einzige Vanilla-JavaScript-Datei, die aus einem globalen Edge-Netzwerk ausgeliefert wird.

Browser-Familie und Gerätetyp werden serverseitig aus dem gewöhnlichen User-Agent der Anfrage für aggregierte Berichte abgeleitet. Vollständige User-Agent-Strings, Browser-Versionen, Cookies, persistente Kennungen und Gerätefingerabdrücke werden niemals gespeichert.

Für die meisten Next.js-Projekte dauert das von der Anmeldung bis zu Live-Daten weniger als zwei Minuten.