Features
SPA Support
Track page views in Single Page Applications
Single Page Application Support
Single Page Applications (SPAs) don't trigger traditional page loads when navigating between routes. The Idlen Pixel automatically handles this for most frameworks, but you can also manually track virtual page views.
Automatic Detection
The Idlen Pixel automatically detects URL changes using the History API. When your SPA navigates to a new route, a PageView event is automatically tracked.
// This happens automatically when URL changes
// No additional code needed for most SPAs
Automatic tracking works with React Router, Vue Router, Next.js, Nuxt, and any framework using the History API.
Manual Page View Tracking
For full control over when page views are tracked, disable automatic tracking and fire events manually:
// Initialize with auto tracking disabled
idlen('init', 'YOUR_ADVERTISER_ID', {
autoTrack: false
});
// Manually track page views on route change
function onRouteChange() {
idlen('track', 'PageView');
}
Framework-Specific Examples
React Router
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function App() {
const location = useLocation();
useEffect(() => {
// Track page view on route change
if (window.idlen) {
idlen('track', 'PageView');
}
}, [location.pathname]);
return <Routes>{/* ... */}</Routes>;
}
Vue Router
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [/* ... */]
});
router.afterEach((to, from) => {
if (window.idlen) {
idlen('track', 'PageView');
}
});
export default router;
Next.js App Router
// app/providers.tsx
'use client';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';
export function IdlenProvider({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
useEffect(() => {
if (window.idlen) {
idlen('track', 'PageView');
}
}, [pathname]);
return <>{children}</>;
}
Nuxt 3
// plugins/idlen.client.ts
export default defineNuxtPlugin(() => {
const router = useRouter();
router.afterEach(() => {
if (window.idlen) {
idlen('track', 'PageView');
}
});
});
Hash-Based Routing
For applications using hash-based routing (/#/page), enable hash tracking:
idlen('init', 'YOUR_ADVERTISER_ID', {
trackHash: true
});
This will track page views when the URL hash changes.
Excluding Routes
You can exclude certain routes from automatic tracking:
idlen('init', 'YOUR_ADVERTISER_ID', {
excludeRoutes: ['/admin', '/internal/*']
});
Tip: Use wildcards (
*) to exclude all routes under a path. /admin/* excludes /admin/users, /admin/settings, etc.Debugging SPA Tracking
Enable debug mode to see when page views are tracked:
idlen('init', 'YOUR_ADVERTISER_ID', { debug: true });
Open your browser console to see:
[Idlen Pixel] PageView tracked: /dashboard
[Idlen Pixel] PageView tracked: /settings