Aller au contenu principal
Zenovaydocs
7 min de lecture

Ajouter Zenovay Analytics à SvelteKit

Zenovay Analytics s'intègre parfaitement à SvelteKit, vous offrant des informations en temps réel sur vos visiteurs sans ajouter la moindre dépendance à votre projet. Les applications SvelteKit vont des sites entièrement statiques aux applications rendues côté serveur avec un routage complexe, et Zenovay gère tous ces modes dès le départ. Le script de suivi se charge de façon asynchrone en moins de 1 Ko, détecte automatiquement les navigations côté client via l'API History, et respecte le cycle de vie SSR de SvelteKit afin de ne jamais s'exécuter côté serveur là où il n'y a pas d'objet window. Que vous livriez un site marketing, un tableau de bord SaaS ou une boutique en ligne avec SvelteKit, ce guide couvre tout, de l'installation de base au suivi des événements personnalisés, à l'identification des utilisateurs, et au mode sans cookie conforme au RGPD. Vous serez opérationnel en environ deux minutes.

Démarrage rapide (2 minutes)

Ajoutez une balise script à votre fichier HTML racine SvelteKit. Aucun paquet npm, aucun plugin Vite, aucune modification d'adaptateur.

Étape 1 : Obtenez votre code de suivi

Connectez-vous à votre tableau de bord Zenovay et copiez votre code de suivi depuis Paramètres → Code de suivi.

Étape 2 : Ajouter à app.html

Ouvrez src/app.html, le template HTML racine pour chaque page SvelteKit, et ajoutez le script Zenovay dans <head> :

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>

C'est tout ! Zenovay suivra automatiquement les pages vues sur toutes vos routes SvelteKit, y compris les navigations côté client.

Étape 3 : Vérifier votre installation

Visitez votre site et consultez le tableau de bord Zenovay. Vous devriez voir un visiteur en temps réel apparaître en quelques secondes.

Remplacez YOUR_TRACKING_CODE par votre code de suivi réel depuis le Tableau de bord Zenovay.

Suivi des navigations SPA

SvelteKit utilise le routage côté client par défaut. Zenovay détecte automatiquement les changements de route via l'API History (pushState / popstate), de sorte que chaque navigation enregistre une nouvelle page vue sans aucune configuration supplémentaire.

Cela fonctionne avec toutes les méthodes de navigation SvelteKit :

  • Les liens avec balise <a> (SvelteKit les intercepte)
  • La navigation programmatique goto()
  • Les boutons retour/suivant du navigateur
  • Les fonctions de $app/navigation

Événements personnalisés

Suivez les interactions des utilisateurs avec la fonction globale window.zenovay. Protégez toujours avec un test typeof window ou browser pour éviter les erreurs SSR.

Utilisation de la protection browser

SvelteKit fournit une constante browser qui vaut true uniquement côté client :

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>

Utilitaire de suivi réutilisable

Créez un module utilitaire pour des appels de suivi propres et réutilisables :

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);
}
}

Utilisez-le ensuite dans n'importe quel composant :

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>

Suivi des pages vues dans le layout

Si vous souhaitez envoyer des métadonnées supplémentaires à chaque page vue, utilisez une instruction réactive dans votre layout racine :

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 />

Ce qui précède est optionnel. Zenovay suit déjà les pages vues automatiquement. Utilisez ce modèle uniquement si vous avez besoin d'associer des métadonnées supplémentaires à chaque navigation.

Considérations pour le rendu côté serveur

Le script Zenovay s'exécute entièrement côté client. Pendant le rendu SSR, window n'est pas disponible, donc :

  • Ne jamais appeler window.zenovay dans +page.server.ts, +layout.server.ts, ou les hooks serveur
  • Toujours protéger les appels côté client avec browser de $app/environment
  • La balise script dans app.html n'est exécutée que par le navigateur, elle est donc sûre là
Ne PAS faire ceci dans les fichiers serveurTypeScript
// +page.server.ts — this will throw!
// window.zenovay('track', 'page_load'); // ❌

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

Mode sans cookie

Pour un suivi respectueux de la vie privée sans cookies ni localStorage, ajoutez l'attribut data-cookieless :

Suivi sans cookie dans src/app.htmlHTML
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
data-cookieless="true"
src="https://api.zenovay.com/z.js"
></script>

En mode sans cookie, Zenovay utilise un hachage côté serveur du sous-réseau IP du visiteur, de son agent utilisateur et d'un sel à rotation quotidienne pour compter les visiteurs uniques sans rien stocker sur l'appareil client.

Identifier les utilisateurs

Associez les données analytiques aux utilisateurs authentifiés. Appelez généralement cette fonction après la connexion ou dans un layout qui charge les données utilisateur :

src/routes/+layout.svelte (authentifié)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 />

Suivre les objectifs et les revenus

src/lib/analytics.ts (objectifs et revenus)TypeScript
import { trackGoal, trackRevenue } from '$lib/analytics';

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

// Track a purchase
trackRevenue(49.99, 'USD');

Support TypeScript

Ajoutez des déclarations de types pour la fonction globale zenovay :

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 {};

Suivi des actions de formulaire

Suivez les actions de formulaire SvelteKit (amélioration progressive) :

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>

Prochaines étapes

Votre application SvelteKit suit maintenant vos données avec Zenovay ! Consultez vos analyses dans le tableau de bord.

Continuez à apprendre :

Cette page vous a-t-elle été utile ?