Ajouter Zenovay Analytics à Nuxt

Zenovay Analytics s'intègre naturellement à Nuxt, offrant aux développeurs Vue un moyen rapide et respectueux de la vie privée de suivre les visiteurs dans les applications Nuxt rendues côté serveur, générées statiquement ou hybrides. L'intégration prend environ deux minutes : ajoutez le script de suivi via nuxt.config.ts ou en tant que plugin côté client, et Zenovay commence immédiatement à enregistrer les pages vues, les référents, les données de navigateur et les informations géographiques en temps réel. Le tracker pèse moins de 1 Ko, se charge de façon asynchrone pour préserver vos Core Web Vitals, et détecte automatiquement les changements de route côté client via Vue Router. Ce guide couvre à la fois l'approche basée sur la configuration et l'approche par plugin, ainsi que le suivi des événements personnalisés avec des composables, l'identification des utilisateurs, le mode sans cookie conforme au RGPD, et les considérations spécifiques au rendu côté serveur de Nuxt 3.

Démarrage rapide (2 minutes)

Il existe deux façons d'ajouter Zenovay à Nuxt. Choisissez celle qui convient le mieux à votre projet.

É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.

Option A : nuxt.config.ts (recommandé)

L'approche la plus simple. Ajoutez le script à app.head dans votre configuration Nuxt :

export default defineNuxtConfig({
app: {
  head: {
    script: [
      {
        defer: true,
        'data-tracking-code': 'YOUR_TRACKING_CODE',
        src: 'https://api.zenovay.com/z.js',
      },
    ],
  },
},
})

Option B : Plugin côté client

Si vous préférez plus de contrôle, créez un plugin Nuxt qui charge le script côté client :

export default defineNuxtPlugin(() => {
if (typeof document === 'undefined') return;

const script = document.createElement('script');
script.defer = true;
script.dataset.trackingCode = 'YOUR_TRACKING_CODE';
script.src = 'https://api.zenovay.com/z.js';
document.head.appendChild(script);
})

Étape 2 : Vérifier votre installation

Démarrez votre serveur de développement avec npx nuxi dev, visitez une page, et consultez le tableau de bord Zenovay. Vous devriez voir un visiteur en temps réel en quelques secondes.

Suivi des navigations SPA

Nuxt utilise Vue Router pour le routage côté client. 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.

Cela fonctionne avec :

• Les composants <NuxtLink>
• La navigation programmatique navigateTo()
• Les appels useRouter().push()
• Les boutons retour/suivant du navigateur

Événements personnalisés avec les composables

Créez un composable réutilisable pour des appels analytiques propres dans toute votre application :

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

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

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

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

return { track, identify, trackGoal, trackRevenue };
}

Nuxt importe automatiquement les composables du répertoire composables/, vous pouvez donc les utiliser n'importe où sans instruction d'import :

<script setup lang="ts">
const { track } = useZenovay();

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

<template>
<div>
  <h1>Pricing</h1>
  <button @click="handleUpgrade('pro')">Upgrade to Pro</button>
  <button @click="handleUpgrade('scale')">Upgrade to Scale</button>
</div>
</template>

Suivi des événements dans les composants

<script setup lang="ts">
const { track } = useZenovay();

const form = reactive({ name: '', email: '', message: '' });

async function handleSubmit() {
track('form_submitted', {
  form: 'contact',
  has_message: form.message.length > 0,
});

await $fetch('/api/contact', { method: 'POST', body: form });
}
</script>

<template>
<form @submit.prevent="handleSubmit">
  <input v-model="form.name" placeholder="Name" required />
  <input v-model="form.email" type="email" placeholder="Email" required />
  <textarea v-model="form.message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>
</template>

Considérations pour le rendu côté serveur

Nuxt 3 effectue le rendu des pages côté serveur par défaut. Le script Zenovay s'exécute entièrement côté client, alors gardez ces règles à l'esprit :

• Ne jamais appeler window.zenovay dans les middlewares serveur, les routes API, ou les fichiers server/
• Toujours protéger les appels côté client avec import.meta.client ou process.client
• Le script head dans nuxt.config.ts est sûr car le navigateur gère le chargement du script
• Utilisez le suffixe .client.ts pour les plugins qui ont besoin de l'objet window

// ✅ Safe: guarded with import.meta.client
if (import.meta.client && window.zenovay) {
window.zenovay('track', 'page_view');
}

// ✅ Safe: inside onMounted (client-only lifecycle hook)
onMounted(() => {
if (window.zenovay) {
  window.zenovay('track', 'component_visible');
}
});

// ❌ Unsafe: runs during SSR — will throw!
// window.zenovay('track', 'page_view');

Suivi via middleware de route

Suivez des transitions de routes spécifiques avec le middleware de route Nuxt :

export default defineNuxtRouteMiddleware((to, from) => {
// Only runs on client-side navigations
if (import.meta.client && window.zenovay) {
  window.zenovay('track', 'route_change', {
    from: from.fullPath,
    to: to.fullPath,
  });
}
})

Mode sans cookie

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

export default defineNuxtConfig({
app: {
  head: {
    script: [
      {
        defer: true,
        'data-tracking-code': 'YOUR_TRACKING_CODE',
        'data-cookieless': 'true',
        src: 'https://api.zenovay.com/z.js',
      },
    ],
  },
},
})

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. Un bon endroit est dans votre plugin d'authentification ou votre layout :

<script setup lang="ts">
const { identify } = useZenovay();
const { data: user } = await useFetch('/api/auth/user');

watch(user, (u) => {
if (u) {
  identify(u.id, {
    email: u.email,
    plan: u.plan,
  });
}
}, { immediate: true });
</script>

<template>
<div>
  <NuxtPage />
</div>
</template>

Suivre les objectifs et les revenus

const { trackGoal, trackRevenue } = useZenovay();

// 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. Nuxt inclut automatiquement les fichiers *.d.ts depuis la racine du projet :

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

export {};

Configuration basée sur l'environnement

Utilisez la configuration d'exécution pour permuter les codes de suivi entre les environnements :

export default defineNuxtConfig({
runtimeConfig: {
  public: {
    zenovayTrackingCode: 'YOUR_TRACKING_CODE',
  },
},
})

export default defineNuxtPlugin(() => {
const config = useRuntimeConfig();
const trackingCode = config.public.zenovayTrackingCode;

if (!trackingCode || typeof document === 'undefined') return;

const script = document.createElement('script');
script.defer = true;
script.dataset.trackingCode = trackingCode;
script.src = 'https://api.zenovay.com/z.js';
document.head.appendChild(script);
})

Définissez ensuite NUXT_PUBLIC_ZENOVAY_TRACKING_CODE dans votre environnement pour remplacer la valeur par défaut.

Prochaines étapes

Continuez à apprendre :

• Événements personnalisés - Modèles de suivi d'événements avancés
• Objectifs - Configurer des objectifs de conversion
• Conformité à la vie privée - Configuration RGPD et CCPA
• Frameworks personnalisés - Guide d'intégration générique