Intégration Vue.js

Intégrez Zenovay analytics dans vos applications Vue.js ou Nuxt en utilisant la balise de script de suivi et la fonction globale window.zenovay.

Installation

Ajoutez le script de suivi Zenovay à votre index.html :

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

Aucun paquet npm n'est nécessaire. Le script effectue automatiquement le suivi des pages vues et fournit la fonction globale window.zenovay pour les événements personnalisés.

Configuration Vue 3

Composable d'encapsulation

Créez un composable pour encapsuler la fonction globale window.zenovay afin de l'utiliser dans vos composants Vue :

// composables/useZenovay.js
export function useZenovay() {
  const trackEvent = (name, properties) => {
    if (window.zenovay) {
      window.zenovay('track', name, properties);
    }
  };

  const trackGoal = (name, properties) => {
    if (window.zenovay) {
      window.zenovay('goal', name, properties);
    }
  };

  const trackPageview = () => {
    if (window.zenovay) {
      window.zenovay('page');
    }
  };

  const trackRevenue = (amount, currency, meta) => {
    if (window.zenovay) {
      window.zenovay('revenue', amount, currency, meta);
    }
  };

  const identify = (userId, properties) => {
    if (window.zenovay) {
      window.zenovay('identify', userId, properties);
    }
  };

  return { trackEvent, trackGoal, trackPageview, trackRevenue, identify };
}

Fonctions disponibles

const {
  trackEvent,    // Suivre les événements personnalisés
  trackGoal,     // Suivre les conversions d'objectifs
  trackPageview, // Affichage de page manuel
  trackRevenue,  // Suivre le revenu
  identify       // Identifier les utilisateurs
} = useZenovay();

Suivi des événements

Événements basiques

<script setup>
import { useZenovay } from '@/composables/useZenovay';

const { trackEvent } = useZenovay();

const handleSignup = () => {
  trackEvent('signup_click', {
    plan: 'pro',
    source: 'pricing'
  });
};
</script>

<template>
  <button @click="handleSignup">
    Commencer l'essai gratuit
  </button>
</template>

Événements de composant

<script setup>
import { useZenovay } from '@/composables/useZenovay';

const { trackEvent } = useZenovay();

const props = defineProps(['product']);

const addToCart = () => {
  trackEvent('add_to_cart', {
    product_id: props.product.id,
    product_name: props.product.name,
    price: props.product.price
  });

  // Continuer avec la logique du panier
  emit('add', props.product);
};
</script>

<template>
  <button @click="addToCart">Ajouter au panier</button>
</template>

Suivi des objectifs

<script setup>
import { useZenovay } from '@/composables/useZenovay';
import { onMounted } from 'vue';

const props = defineProps(['order']);
const { trackGoal } = useZenovay();

onMounted(() => {
  trackGoal('purchase', {
    value: props.order.total,
    order_id: props.order.id
  });
});
</script>

Identification des utilisateurs

<script setup>
import { useZenovay } from '@/composables/useZenovay';
import { watch } from 'vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const { identify } = useZenovay();

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

Suivi du revenu

<script setup>
import { useZenovay } from '@/composables/useZenovay';
import { onMounted } from 'vue';

const props = defineProps(['order']);
const { trackRevenue } = useZenovay();

onMounted(() => {
  trackRevenue(props.order.total, 'USD', {
    order_id: props.order.id,
    items: props.order.items.map(item => ({
      id: item.sku,
      name: item.name,
      price: item.price,
      quantity: item.quantity
    }))
  });
});
</script>

<template>
  <div>
    <h1>Commande confirmée !</h1>
    <p>Commande #{{ order.id }}</p>
  </div>
</template>

Intégration Nuxt 3

Ajouter le script dans nuxt.config.ts

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

Variables d'environnement

# .env
NUXT_PUBLIC_ZENOVAY_TRACKING_CODE=your-tracking-code

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://api.zenovay.com/z.js',
          defer: true,
          'data-tracking-code': process.env.NUXT_PUBLIC_ZENOVAY_TRACKING_CODE
        }
      ]
    }
  }
});

Composable Nuxt

<script setup>
// Utilisez le même composable d'en haut
import { useZenovay } from '@/composables/useZenovay';

const { trackEvent } = useZenovay();

const handleClick = () => {
  trackEvent('cta_click', { location: 'hero' });
};
</script>

Intégration Vue Router

Suivi automatique

Le script Zenovay effectue automatiquement le suivi des pages vues. Pour les changements de route dans une SPA, ajoutez un hook afterEach au routeur :

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [/* your routes */]
});

// Suivre les pages vues sur les changements de route
router.afterEach((to) => {
  if (window.zenovay) {
    window.zenovay('page');
  }
});

export default router;

Les pages vues sont suivies automatiquement sur :

Chargement initial
Changements de route
Changements de hash (optionnel)

Suivi manuel de route

<script setup>
import { useZenovay } from '@/composables/useZenovay';
import { useRouter } from 'vue-router';
import { watch } from 'vue';

const router = useRouter();
const { trackPageview } = useZenovay();

watch(
  () => router.currentRoute.value.path,
  (path) => {
    trackPageview(path);
  }
);
</script>

Directive

Directive v-track

<template>
  <!-- Suivre les clics -->
  <button v-track:click="{ event: 'signup_click', plan: 'pro' }">
    S'inscrire
  </button>

  <!-- Suivre la visibilité -->
  <div v-track:visible="{ event: 'section_viewed', section: 'pricing' }">
    Section Tarification
  </div>
</template>

Enregistrer la directive

// main.js
import { createApp } from 'vue';

const app = createApp(App);

// Directive v-track personnalisée utilisant window.zenovay
app.directive('track', {
  mounted(el, binding) {
    const { event, ...properties } = binding.value;
    const eventType = binding.arg || 'click';

    if (eventType === 'click') {
      el.addEventListener('click', () => {
        if (window.zenovay) {
          window.zenovay('track', event, properties);
        }
      });
    } else if (eventType === 'visible') {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            if (window.zenovay) {
              window.zenovay('track', event, properties);
            }
            observer.unobserve(el);
          }
        });
      });
      observer.observe(el);
    }
  }
});

Options API

Utilisation avec l'Options API

<script>
export default {
  methods: {
    handleClick() {
      if (window.zenovay) {
        window.zenovay('track', 'button_click', {
          button: 'signup'
        });
      }
    }
  }
};
</script>

Intégration Pinia

Store avec analytics

// stores/cart.js
import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),

  actions: {
    addItem(product) {
      this.items.push(product);

      // Suivi en utilisant l'objet global zenovay
      if (window.zenovay) {
        window.zenovay('track', 'add_to_cart', {
          product_id: product.id,
          price: product.price
        });
      }
    }
  }
});

Support TypeScript

Types

// types/zenovay.d.ts
interface ZenovayFunction {
  (command: 'track', name: string, properties?: Record<string, unknown>): void;
  (command: 'identify', userId: string, traits?: Record<string, unknown>): void;
  (command: 'goal', name: string, properties?: Record<string, unknown>): void;
  (command: 'page'): void;
  (command: 'revenue', amount: number, currency: string, meta?: Record<string, unknown>): void;
}

declare global {
  interface Window {
    zenovay: ZenovayFunction;
  }
}

export {};

Utilisation avec les types

<script setup lang="ts">
import { useZenovay } from '@/composables/useZenovay';

interface PurchaseEvent {
  product_id: string;
  price: number;
  quantity: number;
}

const { trackEvent } = useZenovay();

const handlePurchase = (data: PurchaseEvent) => {
  trackEvent('purchase', data);
};
</script>

Tests

Mock du composable

// tests/mocks/zenovay.js
import { vi } from 'vitest';

export const mockZenovay = {
  trackEvent: vi.fn(),
  trackGoal: vi.fn(),
  identify: vi.fn(),
  trackPageview: vi.fn()
};

vi.mock('@/composables/useZenovay', () => ({
  useZenovay: () => mockZenovay
}));

Exemple de test

import { mount } from '@vue/test-utils';
import { mockZenovay } from './mocks/zenovay';
import SignupButton from '@/components/SignupButton.vue';

test('tracks signup click', async () => {
  const wrapper = mount(SignupButton);

  await wrapper.find('button').trigger('click');

  expect(mockZenovay.trackEvent).toHaveBeenCalledWith(
    'signup_click',
    expect.any(Object)
  );
});

Dépannage

Les événements ne sont pas suivis

Vérifiez :

Que la balise de script se trouve dans votre index.html
Que le code de suivi est valide
Qu'il n'est pas bloqué par un bloqueur de publicités
La console pour les erreurs

Le suivi du routeur ne fonctionne pas

Assurez-vous que :

Le hook afterEach du routeur est configuré
window.zenovay est disponible lors des changements de route

Problèmes SSR

Pour Nuxt/SSR :

if (process.client) {
  if (window.zenovay) {
    window.zenovay('track', 'client_only');
  }
}