Features
Vue & Nuxt
Integrate Idlen Pixel with Vue.js and Nuxt applications
Vue & Nuxt Integration
This guide covers integrating the Idlen Pixel with Vue.js applications, including Nuxt 3.
Basic Setup
Script Tag in HTML
Add the pixel script to your HTML file:
<!-- 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', 'YOUR_ADVERTISER_ID');
idlen('track', 'PageView');
</script>
</head>
Vue 3 Plugin
Create a Vue plugin for cleaner integration:
// 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) {
// Initialize pixel
if (typeof window !== 'undefined' && window.idlen) {
window.idlen('init', options.advertiserId, {
debug: options.debug,
autoTrack: options.autoTrack,
});
}
// Provide global methods
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 });
}
},
};
// Also provide via inject
app.provide('idlen', app.config.globalProperties.$idlen);
},
};
Register the 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');
Vue Composable
Create a composable for reactive tracking:
// 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 if plugin not installed
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;
}
Usage in Components
<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">
<!-- Form fields -->
<button type="submit">Sign Up</button>
</form>
</template>
Vue Router Integration
Track page views on route changes:
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [/* ... */],
});
router.afterEach((to, from) => {
// Skip on initial load (handled by pixel init)
if (!from.name) return;
if (typeof window !== 'undefined' && window.idlen) {
window.idlen('track', 'PageView');
}
});
export default router;
Nuxt 3 Integration
Plugin Setup
// plugins/idlen.client.ts
export default defineNuxtPlugin(() => {
const config = useRuntimeConfig();
const router = useRouter();
// Wait for pixel to load, then initialize
const initPixel = () => {
if (window.idlen) {
window.idlen('init', config.public.idlenAdvertiserId, {
debug: process.dev,
});
window.idlen('track', 'PageView');
}
};
// Check if already loaded
if (window.idlen) {
initPixel();
} else {
// Wait for script to load
const checkInterval = setInterval(() => {
if (window.idlen) {
clearInterval(checkInterval);
initPixel();
}
}, 100);
}
// Track route changes
router.afterEach((to, from) => {
if (!from.name) return;
if (window.idlen) {
window.idlen('track', 'PageView');
}
});
// Provide 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 });
}
},
},
},
};
});
Nuxt Config
// 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);
`,
},
],
},
},
});
Nuxt Composable
// 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);
},
};
}
Usage in Nuxt Pages
<script setup lang="ts">
const { trackConversion } = useIdlen();
async function handlePurchase() {
const order = await processOrder();
if (order.success) {
trackConversion('purchase', order.total);
await navigateTo('/thank-you');
}
}
</script>
<template>
<button @click="handlePurchase">
Complete Purchase
</button>
</template>
Environment Variables
# .env (Vue/Vite)
VITE_IDLEN_ADVERTISER_ID=your-advertiser-id
# .env (Nuxt)
NUXT_PUBLIC_IDLEN_ADVERTISER_ID=your-advertiser-id
Note: Environment variables prefixed with
VITE_ (Vue) or NUXT_PUBLIC_ (Nuxt) are exposed to the client-side bundle.