Zum Hauptinhalt springen
Zenovaydocs
6 Min. Lesedauer

Zenovay Analytics zu SvelteKit hinzufügen

Diese Anleitung behandelt das Hinzufügen von Zenovay Analytics zu einer SvelteKit-App. Das Tracking-Skript lädt asynchron unter 1 KB, erkennt automatisch clientseitige Navigationen über die History API und respektiert SvelteKits SSR-Lebenszyklus, sodass es niemals auf dem Server ausgeführt wird, wo kein window-Objekt vorhanden ist. Behandelte Themen: grundlegende Installation, benutzerdefinierte Ereignisverfolgung, Benutzeridentifikation und cookieloser Modus.

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, öffnen Sie Domains, klicken Sie auf Ihre Website und kopieren Sie das Snippet aus der Tracking script-Karte auf der General-Einstellungsseite.

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 ist alles! Zenovay verfolgt automatisch Seitenaufrufe über alle Ihre SvelteKit-Routen, einschließlich clientseitiger Navigationen.

Die Tracking script-Karte mit dem Skript-Snippet mit Registerkarten für HTML, React, Next.js und First-Party sowie eine Schaltfläche zur Verifizierung der Installation
Kopieren Sie Ihren Tracking-Code von Domains → Ihre Website → General → Tracking script.

Schritt 3: Installation überprüfen

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

Ersetzen Sie YOUR_TRACKING_CODE durch Ihren tatsächlichen Tracking-Code. Finden Sie ihn unter Domains → Ihre Website → General → Tracking script.

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)
  • goto()-Programmnavigation
  • 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 auto-tracks page views, but you can add custom data
  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ädt 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 — this will throw!
// window.zenovay('track', 'page_load'); // DO NOT do this

// Instead, track on the client side in +page.svelte
// import { browser } from '$app/environment';
// if (browser && window.zenovay) { ... } // correct

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';

// Track a conversion goal
trackGoal('newsletter_signup', { source: 'footer' });

// Track a purchase
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:

War diese Seite hilfreich?