Features

React & Next.js

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

Intégration React & Next.js

Ce guide couvre l'intégration du Pixel Idlen avec les applications React, y compris Next.js (Pages Router et App Router).

Configuration de Base

Balise Script dans le HTML

L'approche la plus simple est d'ajouter le script du pixel à votre HTML :

<!-- public/index.html (Create React App) -->
<!-- ou app/layout.tsx (Next.js App Router) -->

<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>

Next.js App Router

Utilisation de next/script

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <head>
        <Script id="idlen-pixel" strategy="afterInteractive">
          {`
            !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', '${process.env.NEXT_PUBLIC_IDLEN_ADVERTISER_ID}');
            idlen('track', 'PageView');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Suivi des Changements de Route

Créez un provider pour suivre les changements de route :

// app/providers/IdlenProvider.tsx
'use client';

import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect, Suspense } from 'react';

declare global {
  interface Window {
    idlen: (...args: any[]) => void;
  }
}

function IdlenTracker() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (typeof window !== 'undefined' && window.idlen) {
      window.idlen('track', 'PageView');
    }
  }, [pathname, searchParams]);

  return null;
}

export function IdlenProvider({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Suspense fallback={null}>
        <IdlenTracker />
      </Suspense>
      {children}
    </>
  );
}

Next.js Pages Router

// pages/_app.tsx
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    idlen: (...args: any[]) => void;
  }
}

export default function App({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      if (window.idlen) {
        window.idlen('track', 'PageView');
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return (
    <>
      <Script id="idlen-pixel" strategy="afterInteractive">
        {`
          !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', '${process.env.NEXT_PUBLIC_IDLEN_ADVERTISER_ID}');
          idlen('track', 'PageView');
        `}
      </Script>
      <Component {...pageProps} />
    </>
  );
}

Hook React pour les Conversions

Créez un hook personnalisé pour suivre les conversions :

// hooks/useIdlen.ts
'use client';

import { useCallback } from 'react';

declare global {
  interface Window {
    idlen: (...args: any[]) => void;
  }
}

export function useIdlen() {
  const trackConversion = useCallback(
    (eventName: string, value?: number) => {
      if (typeof window !== 'undefined' && window.idlen) {
        window.idlen('track', 'Conversion', {
          eventName,
          value,
        });
      }
    },
    []
  );

  const trackEvent = useCallback(
    (eventType: string, data?: Record<string, any>) => {
      if (typeof window !== 'undefined' && window.idlen) {
        window.idlen('track', eventType, data);
      }
    },
    []
  );

  return { trackConversion, trackEvent };
}

Utilisation

// components/SignupForm.tsx
'use client';

import { useIdlen } from '@/hooks/useIdlen';

export function SignupForm() {
  const { trackConversion } = useIdlen();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    const result = await submitSignup(formData);
    
    if (result.success) {
      trackConversion('signup');
      // Rediriger ou afficher le succès
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Champs du formulaire */}
    </form>
  );
}

Variables d'Environnement

Stockez votre Advertiser ID dans les variables d'environnement :

# .env.local
NEXT_PUBLIC_IDLEN_ADVERTISER_ID=votre-advertiser-id

Sécurité : Le préfixe NEXT_PUBLIC_ rend la variable disponible dans le navigateur. C'est sûr puisque l'Advertiser ID est destiné à être public.

Types TypeScript

Ajoutez les définitions de types pour le pixel Idlen :

// types/idlen.d.ts
declare global {
  interface Window {
    idlen: {
      (command: 'init', advertiserId: string, options?: {
        debug?: boolean;
        autoTrack?: boolean;
      }): void;
      (command: 'track', eventType: 'PageView'): void;
      (command: 'track', eventType: 'Conversion', data?: {
        eventName?: string;
        value?: number;
      }): void;
      q?: any[];
    };
  }
}

export {};

Support SPA

Suivre les pages vues dans les Applications Single Page

Vue & Nuxt

Intégrer le Pixel Idlen avec les applications Vue.js et Nuxt