6 Min. Lesedauer

Zenovay Analytics zu SvelteKit hinzufügen

Zenovay Analytics lässt sich nahtlos mit SvelteKit integrieren und liefert Ihnen Echtzeit-Besuchereinblicke, ohne Ihrem Projekt eine einzige Abhängigkeit hinzuzufügen. SvelteKit-Anwendungen reichen von vollständig statischen Seiten bis hin zu server-gerenderten Apps mit komplexem Routing, und Zenovay verarbeitet all diese Modi sofort. Das Tracking-Skript lädt asynchron unter 1 KB, erkennt clientseitige Navigationen automatisch über die History API und respektiert den SSR-Lebenszyklus von SvelteKit, sodass es niemals auf dem Server ausgeführt wird, wo kein window-Objekt vorhanden ist. Diese Anleitung behandelt alles von der grundlegenden Installation bis zur benutzerdefinierten Ereignisverfolgung, Benutzeridentifikation und cookielosem Modus. Sie sind in etwa zwei Minuten einsatzbereit.

Schnellstart (2 Minuten)

Fügen Sie einen Script-Tag zu Ihrer SvelteKit-Root-HTML-Datei hinzu. Keine npm-Pakete, keine Vite-Plugins, keine Adapter-Änderungen.

Schritt 1: Ihren Tracking-Code abrufen

Melden Sie sich bei Ihrem Zenovay-Dashboard an und kopieren Sie Ihren Tracking-Code aus Settings → Tracking Code.

Schritt 2: Zu app.html hinzufügen

Öffnen Sie src/app.html, die Root-HTML-Vorlage für jede SvelteKit-Seite, und fügen Sie das Zenovay-Skript innerhalb von <head> hinzu:

src/app.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
  <script
    defer
    data-tracking-code="YOUR_TRACKING_CODE"
    src="https://api.zenovay.com/z.js"
  ></script>
  %sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
</body>
</html>

Das war's! Zenovay verfolgt automatisch Seitenaufrufe über alle Ihre SvelteKit-Routen, einschließlich clientseitiger Navigationen.

Schritt 3: Installation überprüfen

Besuchen Sie Ihre Seite und prüfen Sie das Zenovay-Dashboard. Innerhalb weniger Sekunden sollte ein Echtzeit-Besucher erscheinen.

Ersetzen Sie YOUR_TRACKING_CODE durch Ihren tatsächlichen Tracking-Code aus dem Zenovay-Dashboard.

SPA-Navigationsverfolgung

SvelteKit verwendet standardmäßig clientseitiges Routing. Zenovay erkennt Routenänderungen automatisch über die History API (pushState / popstate), sodass jede Navigation ohne zusätzliche Konfiguration einen neuen Seitenaufruf erfasst.

Dies funktioniert mit allen SvelteKit-Navigationsmethoden:

<a>-Tag-Links (SvelteKit fängt diese ab)
Programmatischer Navigation mit goto()
Browser-Vor- und Zurück-Schaltflächen
$app/navigation-Funktionen

Benutzerdefinierte Ereignisse

Verfolgen Sie Benutzerinteraktionen mit der globalen Funktion window.zenovay. Sichern Sie sie immer mit einer typeof window- oder browser-Prüfung ab, um SSR-Fehler zu vermeiden.

Verwendung des `browser`-Guards

SvelteKit stellt eine browser-Konstante bereit, die nur auf dem Client true ist:

src/lib/components/SignupButton.svelteSVELTE

<script lang="ts">
import { browser } from '$app/environment';

export let plan: string;

function handleClick() {
  if (browser && window.zenovay) {
    window.zenovay('track', 'signup_click', { plan });
  }
}
</script>

<button on:click={handleClick}>
Sign Up for {plan}
</button>

Wiederverwendbarer Tracking-Helfer

Erstellen Sie ein Hilfsmodul für saubere, wiederverwendbare Tracking-Aufrufe:

src/lib/analytics.tsTypeScript

import { browser } from '$app/environment';

export function track(event: string, data?: Record<string, any>) {
if (browser && window.zenovay) {
  window.zenovay('track', event, data);
}
}

export function identify(userId: string, traits?: Record<string, any>) {
if (browser && window.zenovay) {
  window.zenovay('identify', userId, traits);
}
}

export function trackGoal(goalName: string, data?: Record<string, any>) {
if (browser && window.zenovay) {
  window.zenovay('goal', goalName, data);
}
}

export function trackRevenue(amount: number, currency = 'USD') {
if (browser && window.zenovay) {
  window.zenovay('revenue', amount, currency);
}
}

Verwenden Sie es dann in jeder Komponente:

src/routes/pricing/+page.svelteSVELTE

<script lang="ts">
import { track } from '$lib/analytics';

function handleUpgrade(plan: string) {
  track('upgrade_clicked', { plan, location: 'pricing_page' });
}
</script>

<button on:click={() => handleUpgrade('pro')}>
Upgrade to Pro
</button>

Seitenaufrufe im Layout verfolgen

Wenn Sie zusätzliche Metadaten mit jedem Seitenaufruf auslösen möchten, verwenden Sie eine reaktive Anweisung in Ihrem Root-Layout:

src/routes/+layout.svelteSVELTE

<script lang="ts">
import { page } from '$app/stores';
import { browser } from '$app/environment';

$: if (browser && $page.url) {
  // Zenovay verfolgt Seitenaufrufe automatisch, aber Sie können benutzerdefinierte Daten hinzufügen
  if (window.zenovay) {
    window.zenovay('track', 'page_metadata', {
      path: $page.url.pathname,
      route_id: $page.route.id,
    });
  }
}
</script>

<slot />

Das Obige ist optional. Zenovay verfolgt Seitenaufrufe bereits automatisch. Verwenden Sie dieses Muster nur, wenn Sie zusätzliche Metadaten an jede Navigation anhängen müssen.

Überlegungen zum serverseitigen Rendering

Das Zenovay-Skript läuft ausschließlich auf dem Client. Während des SSR ist window nicht verfügbar, daher gilt:

Rufen Sie window.zenovay niemals in +page.server.ts, +layout.server.ts oder Server-Hooks auf
Sichern Sie clientseitige Aufrufe immer mit browser aus $app/environment ab
Der Script-Tag in app.html wird nur vom Browser ausgeführt, ist also dort sicher

Tun Sie dies NICHT in Server-DateienTypeScript

// +page.server.ts — dies wird einen Fehler auslösen!
// window.zenovay('track', 'page_load'); // ❌

// Verfolgen Sie stattdessen auf der Clientseite in +page.svelte
// import { browser } from '$app/environment';
// if (browser && window.zenovay) { ... } // ✅

Cookieless-Modus

Für datenschutzfreundliches Tracking ohne Cookies oder localStorage fügen Sie das Attribut data-cookieless hinzu:

Cookieless-Tracking in src/app.htmlHTML

<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
data-cookieless="true"
src="https://api.zenovay.com/z.js"
></script>

Im Cookieless-Modus verwendet Zenovay einen serverseitigen Hash des IP-Subnetzes, des User-Agents und eines täglich rotierenden Salts des Besuchers, um eindeutige Besucher zu zählen, ohne etwas auf dem Clientgerät zu speichern.

Benutzer identifizieren

Verknüpfen Sie Analytics-Daten mit authentifizierten Benutzern. Rufen Sie dies typischerweise nach dem Login oder in einem Layout auf, das Benutzerdaten lädt:

src/routes/+layout.svelte (authentifiziert)SVELTE

<script lang="ts">
import { browser } from '$app/environment';
import type { LayoutData } from './$types';

export let data: LayoutData;

$: if (browser && data.user && window.zenovay) {
  window.zenovay('identify', data.user.id, {
    email: data.user.email,
    plan: data.user.plan,
  });
}
</script>

<slot />

Ziele und Umsatz verfolgen

src/lib/analytics.ts (Ziele und Umsatz)TypeScript

import { trackGoal, trackRevenue } from '$lib/analytics';

// Konversionsziel verfolgen
trackGoal('newsletter_signup', { source: 'footer' });

// Kauf verfolgen
trackRevenue(49.99, 'USD');

TypeScript-Unterstützung

Fügen Sie Typdeklarationen für die globale zenovay-Funktion hinzu:

src/app.d.tsTypeScript

// See https://kit.svelte.dev/docs/types#app
declare global {
namespace App {
  // interface Error {}
  // interface Locals {}
  // interface PageData {}
  // interface Platform {}
}

interface Window {
  zenovay?: (...args: any[]) => void;
}
}

export {};

Verfolgung von Formular-Actions

Verfolgen Sie SvelteKit-Formular-Actions (progressive Enhancement):

src/routes/contact/+page.svelteSVELTE

<script lang="ts">
import { enhance } from '$app/forms';
import { track } from '$lib/analytics';
</script>

<form
method="POST"
use:enhance={() => {
  track('form_submitted', { form: 'contact' });
  return async ({ result }) => {
    if (result.type === 'success') {
      track('form_success', { form: 'contact' });
    }
  };
}}
>
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>

Nächste Schritte

Ihre SvelteKit-App verfolgt nun mit Zenovay! Sehen Sie Ihre Analytics im Dashboard ein.

Vertiefen Sie Ihr Wissen:

Benutzerdefinierte Ereignisse - Erweiterte Ereignisverfolgungsmuster
Ziele - Konversionsziele einrichten
Datenschutz-Compliance - GDPR- und CCPA-Konfiguration
Benutzerdefinierte Frameworks - Allgemeine Integrationsanleitung