Features

Support SPA

Suivre les pages vues dans les Applications Single Page

Support des Applications Single Page

Les Applications Single Page (SPAs) ne déclenchent pas de chargements de page traditionnels lors de la navigation entre les routes. Le Pixel Idlen gère cela automatiquement pour la plupart des frameworks, mais vous pouvez aussi suivre manuellement les pages virtuelles.

Détection Automatique

Le Pixel Idlen détecte automatiquement les changements d'URL via l'API History. Quand votre SPA navigue vers une nouvelle route, un événement PageView est automatiquement suivi.

// Cela se fait automatiquement lors des changements d'URL
// Pas de code supplémentaire nécessaire pour la plupart des SPAs

Le suivi automatique fonctionne avec React Router, Vue Router, Next.js, Nuxt, et tout framework utilisant l'API History.

Suivi Manuel des Pages Vues

Pour un contrôle total sur quand les pages vues sont suivies, désactivez le suivi automatique et déclenchez les événements manuellement :

// Initialiser avec le suivi automatique désactivé
idlen('init', 'VOTRE_ADVERTISER_ID', {
  autoTrack: false
});

// Suivre manuellement les pages vues lors du changement de route
function onRouteChange() {
  idlen('track', 'PageView');
}

Exemples par Framework

React Router

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    // Suivre la page vue lors du changement de route
    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');
    }
  });
});

Routage basé sur le Hash

Pour les applications utilisant le routage basé sur le hash (/#/page), activez le suivi des hash :

idlen('init', 'VOTRE_ADVERTISER_ID', {
  trackHash: true
});

Cela suivra les pages vues quand le hash de l'URL change.

Exclure des Routes

Vous pouvez exclure certaines routes du suivi automatique :

idlen('init', 'VOTRE_ADVERTISER_ID', {
  excludeRoutes: ['/admin', '/internal/*']
});

Astuce : Utilisez les wildcards (*) pour exclure toutes les routes sous un chemin. /admin/* exclut /admin/users, /admin/settings, etc.

Déboguer le Suivi SPA

Activez le mode debug pour voir quand les pages vues sont suivies :

idlen('init', 'VOTRE_ADVERTISER_ID', { debug: true });

Ouvrez la console de votre navigateur pour voir :

[Idlen Pixel] PageView tracked: /dashboard
[Idlen Pixel] PageView tracked: /settings

Suivi des Conversions

Suivre les conversions et mesurer la performance des campagnes

React & Next.js

Intégrer le Pixel Idlen avec les applications React et Next.js