Features

React & Next.js

Integrate Idlen Pixel with React and Next.js applications

React & Next.js Integration

This guide covers integrating the Idlen Pixel with React applications, including Next.js (Pages Router and App Router).

Basic Setup

Script Tag in HTML

The simplest approach is adding the pixel script to your HTML:

<!-- public/index.html (Create React App) -->
<!-- or 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', 'YOUR_ADVERTISER_ID');
idlen('track', 'PageView');
</script>

Next.js App Router

Using next/script

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <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>
  );
}

Route Change Tracking

Create a provider to track route changes:

// 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}
    </>
  );
}

// app/layout.tsx
import { IdlenProvider } from './providers/IdlenProvider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <IdlenProvider>{children}</IdlenProvider>
      </body>
    </html>
  );
}

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} />
    </>
  );
}

React Hook for Conversions

Create a custom hook to track 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 };
}

Usage

// 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');
      // Redirect or show success
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  );
}

Environment Variables

Store your Advertiser ID in environment variables:

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

Security: The NEXT_PUBLIC_ prefix makes the variable available in the browser. This is safe since the Advertiser ID is meant to be public.

TypeScript Types

Add type definitions for the Idlen pixel:

// 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 {};

SPA Support

Track page views in Single Page Applications

Vue & Nuxt

Integrate Idlen Pixel with Vue.js and Nuxt applications