Cookielose Webanalyse für Next.js

Warum Noralytic mit Next.js

Next.js-Apps legen Wert auf Performance und SEO. Noralytic ist kleiner als 1 KB, lädt, sobald die Seite interaktiv ist, und braucht für die Analyse kein Consent-Management-Tool.

Da das Skript dem Browserverlauf folgt, wird die Navigation mit dem Next.js-Router ohne zusätzlichen Code als Seitenaufruf gezählt.

• Keine Cookies, kein lokaler Speicher und keine gespeicherten IP-Adressen, daher braucht die Analyse allein kein Einwilligungsbanner.
• Ein Tracking-Skript unter 1 KB, das Ihre Seiten nicht verlangsamt.
• Echtzeit-Statistiken, Top-Seiten, Quellen, Länder, Geräte, Kampagnen und Ereignisse in einem einfachen Dashboard.
• Navigation innerhalb von Single-Page-Anwendungen wird automatisch erfasst, weil das Skript dem Browserverlauf folgt.

Was Sie brauchen

• Ein kostenloses Noralytic-Konto mit Ihrer Website unter ihrer genauen Domain.
• Ein Next.js-Projekt (App Router oder Pages Router).

So binden Sie Noralytic in Next.js ein

Nutzen Sie die Script-Komponente aus next/script und setzen Sie dieselben Attribute wie im einfachen Tracking-Code.

<script data-host="https://noralytic.com" src="https://noralytic.com/js/script.js" id="ZwSg9rf6GA" async defer></script>

1. 1
   Root-Layout öffnen
   Öffnen Sie für den App Router app/layout.tsx. Beim Pages Router nutzen Sie pages/_app.tsx.
2. 2
   Script-Komponente hinzufügen
   Importieren Sie Script aus next/script und fügen Sie sie mit den unten gezeigten Attributen hinzu.
3. 3
   Deployen und testen
   Öffnen Sie Ihre Seite und prüfen Sie die Echtzeit-Ansicht in Noralytic.

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="de">
      <body>
        {children}
        <Script
          src="https://noralytic.com/js/script.js"
          data-host="https://noralytic.com"
          id="ZwSg9rf6GA"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Prüfen, ob das Tracking funktioniert

1. 1
   Website öffnen
   Nutzen Sie ein privates Browserfenster, damit Erweiterungen und Ihr Login nicht stören.
2. 2
   Noralytic-Echtzeit-Ansicht öffnen
   Öffnen Sie in Ihrem Noralytic-Dashboard Ihre Website und wechseln Sie zu Echtzeit.
3. 3
   Ihren Besuch suchen
   Ihr Seitenaufruf sollte innerhalb weniger Sekunden erscheinen. Klicken Sie ein paar Seiten durch, um zu sehen, dass jede gezählt wird.

Eigene Ereignisse in Next.js messen

Rufen Sie <code>window.pa.track</code> aus einer beliebigen Client-Komponente auf. Deklarieren Sie den Typ für TypeScript einmal.

declare global {
  interface Window {
    pa?: { track: (event?: { name: string; value?: number; unit?: string }) => void };
  }
}

export function SignupButton() {
  return <button onClick={() => window.pa?.track({ name: 'signup' })}>Anmelden</button>;
}

Ereignisse erscheinen in Ihrem Ereignisbericht. Wert und Einheit sind optional, zum Beispiel pa.track({ name: 'purchase', value: 49.9, unit: 'EUR' }).

Eigene Besuche und Bots ausschließen

Damit Ihre Zahlen sauber bleiben, öffnen Sie die Website-Einstellungen in Noralytic und tragen Ihre eigene IP-Adresse unter den ausgeschlossenen IP-Adressen ein. Stellen Sie sicher, dass der Bot-Filter aktiviert ist, damit bekannte Crawler ignoriert werden.

Fehlerbehebung

• Id beibehalten: Das Skript sucht sein eigenes Element über die Id, behalten Sie daher id="ZwSg9rf6GA" an der Script-Komponente.
• Entwicklungsmodus: Die Domain muss passen. Tragen Sie localhost nur dann in Noralytic ein, wenn Sie lokal testen möchten.
• Nach einigen Minuten keine Daten? Prüfen Sie, ob die Domain in Noralytic genau zu Ihrer Website passt und das Skript im Seitenquelltext erscheint.
• Werbeblocker: Manche Blocker verstecken Analyse-Skripte. Testen Sie in einem privaten Fenster ohne Erweiterungen.
• Content Security Policy: Nutzen Sie eine, erlauben Sie noralytic.com als Skript- und Verbindungsquelle.