Features
Vue & Nuxt
Intégrer le Pixel Idlen avec les applications Vue.js et Nuxt
Intégration Vue & Nuxt
Ce guide couvre l'intégration du Pixel Idlen avec les applications Vue.js, y compris Nuxt 3.
Configuration de Base
Balise Script dans le HTML
Ajoutez le script du pixel à votre fichier HTML :
<!-- index.html (Vite/Vue CLI) -->
<head>
<script>
!function(i,d,l,e,n){i.idlen=i.idlen||function(){
(i.idlen.q=i.idlen.q||[]).push([].slice.call(arguments))};
var s=d.createElement('script');s.async=1;
s.src='https://pixel.idlen.io/v1/pixel.js';
d.head.appendChild(s)}(window,document);
idlen('init', 'VOTRE_ADVERTISER_ID');
idlen('track', 'PageView');
</script>
</head>
Plugin Vue 3
Créez un plugin Vue pour une intégration plus propre :
// plugins/idlen.ts
import type { App } from 'vue';
declare global {
interface Window {
idlen: (...args: any[]) => void;
}
}
export interface IdlenOptions {
advertiserId: string;
debug?: boolean;
autoTrack?: boolean;
}
export const idlenPlugin = {
install(app: App, options: IdlenOptions) {
// Initialiser le pixel
if (typeof window !== 'undefined' && window.idlen) {
window.idlen('init', options.advertiserId, {
debug: options.debug,
autoTrack: options.autoTrack,
});
}
// Fournir des méthodes globales
app.config.globalProperties.$idlen = {
track: (eventType: string, data?: Record<string, any>) => {
if (window.idlen) {
window.idlen('track', eventType, data);
}
},
trackConversion: (eventName: string, value?: number) => {
if (window.idlen) {
window.idlen('track', 'Conversion', { eventName, value });
}
},
};
// Fournir aussi via inject
app.provide('idlen', app.config.globalProperties.$idlen);
},
};
Enregistrer le Plugin
// main.ts
import { createApp } from 'vue';
import { idlenPlugin } from './plugins/idlen';
import App from './App.vue';
const app = createApp(App);
app.use(idlenPlugin, {
advertiserId: import.meta.env.VITE_IDLEN_ADVERTISER_ID,
debug: import.meta.env.DEV,
});
app.mount('#app');
Composable Vue
Créez un composable pour le suivi réactif :
// composables/useIdlen.ts
import { inject } from 'vue';
interface IdlenInstance {
track: (eventType: string, data?: Record<string, any>) => void;
trackConversion: (eventName: string, value?: number) => void;
}
export function useIdlen(): IdlenInstance {
const idlen = inject<IdlenInstance>('idlen');
if (!idlen) {
// Fallback si le plugin n'est pas installé
return {
track: (eventType: string, data?: Record<string, any>) => {
if (typeof window !== 'undefined' && window.idlen) {
window.idlen('track', eventType, data);
}
},
trackConversion: (eventName: string, value?: number) => {
if (typeof window !== 'undefined' && window.idlen) {
window.idlen('track', 'Conversion', { eventName, value });
}
},
};
}
return idlen;
}
Utilisation dans les Composants
<script setup lang="ts">
import { useIdlen } from '@/composables/useIdlen';
const { trackConversion } = useIdlen();
async function handleSignup() {
const result = await submitForm();
if (result.success) {
trackConversion('signup');
}
}
</script>
<template>
<form @submit.prevent="handleSignup">
<!-- Champs du formulaire -->
<button type="submit">S'inscrire</button>
</form>
</template>
Intégration Vue Router
Suivez les pages vues lors des changements de route :
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [/* ... */],
});
router.afterEach((to, from) => {
// Ignorer au chargement initial (géré par l'init du pixel)
if (!from.name) return;
if (typeof window !== 'undefined' && window.idlen) {
window.idlen('track', 'PageView');
}
});
export default router;
Intégration Nuxt 3
Configuration du Plugin
// plugins/idlen.client.ts
export default defineNuxtPlugin(() => {
const config = useRuntimeConfig();
const router = useRouter();
// Attendre le chargement du pixel, puis initialiser
const initPixel = () => {
if (window.idlen) {
window.idlen('init', config.public.idlenAdvertiserId, {
debug: process.dev,
});
window.idlen('track', 'PageView');
}
};
// Vérifier si déjà chargé
if (window.idlen) {
initPixel();
} else {
// Attendre le chargement du script
const checkInterval = setInterval(() => {
if (window.idlen) {
clearInterval(checkInterval);
initPixel();
}
}, 100);
}
// Suivre les changements de route
router.afterEach((to, from) => {
if (!from.name) return;
if (window.idlen) {
window.idlen('track', 'PageView');
}
});
// Fournir le composable
return {
provide: {
idlen: {
track: (eventType: string, data?: Record<string, any>) => {
if (window.idlen) {
window.idlen('track', eventType, data);
}
},
trackConversion: (eventName: string, value?: number) => {
if (window.idlen) {
window.idlen('track', 'Conversion', { eventName, value });
}
},
},
},
};
});
Configuration Nuxt
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
public: {
idlenAdvertiserId: process.env.NUXT_PUBLIC_IDLEN_ADVERTISER_ID,
},
},
app: {
head: {
script: [
{
children: `
!function(i,d,l,e,n){i.idlen=i.idlen||function(){
(i.idlen.q=i.idlen.q||[]).push([].slice.call(arguments))};
var s=d.createElement('script');s.async=1;
s.src='https://pixel.idlen.io/v1/pixel.js';
d.head.appendChild(s)}(window,document);
`,
},
],
},
},
});
Composable Nuxt
// composables/useIdlen.ts
export function useIdlen() {
const { $idlen } = useNuxtApp();
return {
track: (eventType: string, data?: Record<string, any>) => {
$idlen?.track(eventType, data);
},
trackConversion: (eventName: string, value?: number) => {
$idlen?.trackConversion(eventName, value);
},
};
}
Utilisation dans les Pages Nuxt
<script setup lang="ts">
const { trackConversion } = useIdlen();
async function handlePurchase() {
const order = await processOrder();
if (order.success) {
trackConversion('purchase', order.total);
await navigateTo('/merci');
}
}
</script>
<template>
<button @click="handlePurchase">
Finaliser l'Achat
</button>
</template>
Variables d'Environnement
# .env (Vue/Vite)
VITE_IDLEN_ADVERTISER_ID=votre-advertiser-id
# .env (Nuxt)
NUXT_PUBLIC_IDLEN_ADVERTISER_ID=votre-advertiser-id
Note : Les variables d'environnement préfixées avec
VITE_ (Vue) ou NUXT_PUBLIC_ (Nuxt) sont exposées au bundle côté client.