Mixpanel — intégration & plugin client
title: Mixpanel — intégration & plugin client icon: lucide:zap subtitle: Documentation d’installation, initialisation, variables d’environnement, comportement client-only et recommandations RGPD / opt‑in
icon: lucide:info
title: Contexte
Nous avons ajouté un plugin client (plugins/mixpanel.client.ts), un wrapper (lib/mixpanel.ts) et des composables pour remplacer un utilitaire précédemment utilisé. De nombreux composants/pages ont été mis à jour pour déclencher des événements via le nouveau composant de tracking.
icon: lucide:alert-triangle title: Quel token mettre côté client ? Le token de projet Mixpanel (project token) est conçu pour être utilisé côté client. N’exposez jamais d’API secret/clé serveur dans le client. Si vous envoyez des événements côté serveur, utilisez les clés secrètes côté serveur uniquement.
- title: Opt‑out / suppression
body: |
- Implémentez une méthode
optOutqui appelle le wrapper pour désactiver le tracking et effacer les identifiants locaux. - Fournissez une interface utilisateur pour gérer le consentement. :::
- Implémentez une méthode
icon: lucide:check-square
title: Intégration avec le code existant
body: |
Les modifications apportées (pages, composants, app.vue, plugins/checkRoute.js, etc.) déplacent l’appel au nouveau composable/trackEvent. Si vous adaptez des composants existants, remplacez les anciens appels par :
import { trackEvent } from ‘~/composables/trackEvent’
trackEvent(‘event_name’, { … })
et vérifiez que trackEvent respecte la préférence opt‑in avant d’envoyer.
title: Besoin d’aide pour migrer ?
description: Si vous voulez, je peux générer un exemple concret du plugin plugins/mixpanel.client.ts et du wrapper lib/mixpanel.ts adapté à votre projet (Nuxt 2 ou Nuxt 3) — dites-moi la version de Nuxt utilisée et si vous utilisez runtimeConfig.