Privacy-First Analytics zu einer SvelteKit-App hinzufügen
SvelteKit 2 behandelt clientseitige Navigation anders als andere Frameworks. Hier ist das richtige Muster zum Tracken von Routenwechseln ohne Cookies oder Cookie-Banner.
SvelteKit 2 bricht Analytics-Integrationen, die ihre Messung am Seitenlebenszyklus aufhängen. Ein einfaches <script>-Tag feuert genau einmal, beim ersten Laden des Dokuments, und danach nie wieder — jede clientseitige Navigation danach bleibt unsichtbar. Der Monoid Tracker umgeht das, indem er die History API beobachtet statt des Seitenlebenszyklus.
Warum ein einfaches Script-Tag nicht genügt
Ein <script>-Tag in <svelte:head> wird einmal pro Dokumentladevorgang ausgeführt. Der Router von SvelteKit 2 tauscht den Inhalt an Ort und Stelle aus, ohne das Dokument zu entladen — nichts führt das Tag also erneut aus. Jeder Tracker, dessen einziger Auslöser DOMContentLoaded oder load ist, meldet die Einstiegsroute und verstummt danach.
Das ist die eigentliche Ursache des weitverbreiteten Problems, bei dem Google Analytics GA4 in SvelteKit-2-Anwendungen beim ersten Laden nur den initialen Pageview aufzeichnet.
Die Antwort ist, die Navigation selbst zu erkennen — und das erfordert keine SvelteKit-spezifische Integration. Der clientseitige Router von SvelteKit aktualisiert die URL über einen Aufruf von history.pushState, sodass ein Tracker, der history.pushState patcht, jeden clientseitigen Routenwechsel beobachtet, ohne $app/navigation oder irgendeinen Framework-Hook zu abonnieren.
Der richtige Ansatz
Fügen Sie das Monoid-Tracker-Skript einmalig in Ihr Root-+layout.svelte über <svelte:head> ein:
<svelte:head>
<script
async
src="https://api.monoid.website/tracker.min.js"
data-site-id="IHRE_SITE_ID"
></script>
</svelte:head>
Der DOMContentLoaded-Listener des Trackers deckt das initiale Seitenladen ab. Für nachfolgende clientseitige Navigationen läuft sein history.pushState-Patch unmittelbar, nachdem SvelteKit die URL aktualisiert hat, liest also den neuen location.pathname und sendet einen Pageview pro Routenwechsel.
Eine wichtige Einschränkung: Der Patch deckt pushState ab, nicht popstate. Die Zurück- und Vorwärts-Schaltflächen ändern die Route, ohne pushState aufzurufen, und erzeugen derzeit daher keinen neuen Pageview.
Zur Überprüfung öffnen Sie den Netzwerk-Tab in den DevTools und beobachten POST-Anfragen an /collect. Sie sollten eine pro Routenwechsel sehen.
Staging-Traffic trennen
SvelteKit-Projekte laufen während der Entwicklung typischerweise auf localhost. Registrieren Sie eine separate Site und binden Sie deren site_id an eine Umgebungsvariable, damit Entwicklungs-Traffic niemals die Produktionsmetriken verunreinigt:
<script>
const siteId = import.meta.env.VITE_MONOID_SITE_ID
</script>
<svelte:head>
{#if siteId}
<script
async
src="https://api.monoid.website/tracker.min.js"
data-site-id={siteId}
></script>
{/if}
</svelte:head>
Setzen Sie VITE_MONOID_SITE_ID in .env.local für die Entwicklung (oder lassen Sie es leer, um Tracking zu unterdrücken) und in Ihrer Produktionsumgebung. Der {#if siteId}-Block stellt sicher, dass das Tracker-Skript nie eingefügt wird, wenn die Variable nicht gesetzt ist.
Was Sie nicht brauchen
Kein Cookie-Consent-Banner. Keine Aktualisierung der Cookie-Richtlinie. Keine navigator.cookieEnabled-Prüfung. Der Erfassungsendpunkt leitet einen täglichen Besucher-Hash aus IP-Adresse, User-Agent, einem serverseitigen Geheimnis und dem aktuellen Datum ab:
visitor_hash = SHA-256(IP + UA + SALT_SECRET + YYYY-MM-DD)
Der Hash wird alle 24 Stunden zurückgesetzt und kann nicht rückgängig gemacht werden, um IP oder User-Agent wiederherzustellen. Auf dem Gerät des Besuchers wird nichts gespeichert. Damit löst die Integration keine ePrivacy- oder TTDSG-Einwilligungspflichten aus — es gibt schlicht nichts, dem man zustimmen müsste.
Überprüfung im Dashboard
Nach dem Deployment öffnen Sie Ihr Analytics-Dashboard und navigieren zwischen mehreren Routen auf Ihrer Live-Site. Jede Navigation sollte einen neuen Pageview-Eintrag mit dem korrekten Pfad erzeugen. Wenn Sie unabhängig von der Navigation nur einen Eintrag sehen, prüfen Sie, ob das Skript im Root-Layout geladen wird und ob VITE_MONOID_SITE_ID in der Produktionsumgebung gesetzt ist.
Der SvelteKit-Adapter, den Sie verwenden (Cloudflare, Vercel, Node, statisch), hat keinen Einfluss auf die Analytics-Erfassung, da das Tracking vollständig im Browser nach der Hydration stattfindet.
Comments
Loading comments…