Cookielose Webanalyse für React

Warum Noralytic mit React

Single-Page-Apps sind schwer zu messen, weil die Seite nie neu lädt. Noralytic hängt sich in den Browserverlauf ein und zählt React-Router-Navigation ohne zusätzlichen Code.

Sie sparen sich Analyse-Bibliotheken und halten Ihr Bundle klein, da das Skript außerhalb Ihres JavaScript-Bundles liegt.

• 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 React-Projekt mit Vite, Create React App oder Ähnlichem, in dem Sie die index.html bearbeiten können.

So binden Sie Noralytic in React ein

Der Tracking-Code besteht aus einer Zeile. Die Schritte unten zeigen, wohin er gehört.

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

1. 1
   index.html öffnen
   In einem Vite-Projekt liegt sie im Projektstamm, in Create React App in public/.
2. 2
   Tracking-Code einfügen
   Fügen Sie das Snippet im <head>-Tag hinzu.
3. 3
   Bauen und deployen
   Deployen Sie Ihre App und prüfen Sie die Echtzeit-Ansicht beim Navigieren.

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 React messen

Rufen Sie den Tracker aus einem beliebigen Event-Handler auf. Nutzen Sie Optional Chaining, damit Ihr Code nicht fehlschlägt, wenn das Skript blockiert wird.

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

• Dieselbe Domain in Noralytic: Tragen Sie die exakte Domain ein, auf der Ihre App läuft.
• Hash-Routing: Routen nach einem # sind keine eigenen Seiten. Bevorzugen Sie Browser-History-Routing für saubere Seitenberichte.
• 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.