Aller au contenu principal

Intégration React / Next.js

Guide d'intégration pour les applications React et Next.js.

Next.js (App Router - Recommandé)​

Méthode 1 : Script dans layout.tsx​

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="fr">
      <body>
        {children}
        
        {/* Ad Sentinelle SDK */}
        <Script
          src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Méthode 2 : Composant dédié​

Créez un composant réutilisable :

// components/Ad Sentinelle.tsx
'use client'

import { useEffect } from 'react'

interface Ad SentinelleProps {
  siteId: string
  debug?: boolean
}

export function Ad Sentinelle({ siteId, debug = false }: Ad SentinelleProps) {
  useEffect(() => {
    // Configuration optionnelle
    if (debug) {
      (window as any).ADWALL_CONFIG = { debug: true }
    }

    // Charger le script
    const script = document.createElement('script')
    script.src = `https://adwall-backend-xxxxx.run.app/v1/loader/${siteId}.js`
    script.async = true
    document.body.appendChild(script)

    // Cleanup
    return () => {
      script.remove()
    }
  }, [siteId, debug])

  return null
}

Utilisation :

// app/layout.tsx
import { Ad Sentinelle } from '@/components/Ad Sentinelle'

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <Ad Sentinelle siteId="VOTRE_SITE_ID" />
      </body>
    </html>
  )
}

Next.js (Pages Router)​

// pages/_app.tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      
      {/* Ad Sentinelle SDK */}
      <Script
        src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js"
        strategy="afterInteractive"
      />
    </>
  )
}

React (Create React App / Vite)​

Méthode 1 : Dans index.html​

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Mon App React</title>
</head>
<body>
  <div id="root"></div>
  
  <!-- Ad Sentinelle SDK -->
  <script src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js" async></script>
</body>
</html>

Méthode 2 : Hook personnalisé​

// hooks/useAd Sentinelle.ts
import { useEffect } from 'react'

interface UseAd SentinelleOptions {
  siteId: string
  debug?: boolean
  onConverted?: () => void
  onDetected?: () => void
}

export function useAd Sentinelle({ 
  siteId, 
  debug = false,
  onConverted,
  onDetected 
}: UseAd SentinelleOptions) {
  useEffect(() => {
    // Configuration
    if (debug) {
      (window as any).ADWALL_CONFIG = { debug: true }
    }

    // Event listeners
    const handleConverted = () => onConverted?.()
    const handleDetected = () => onDetected?.()

    window.addEventListener('adwall:converted', handleConverted)
    window.addEventListener('adwall:detected', handleDetected)

    // Charger le script
    const script = document.createElement('script')
    script.src = `https://adwall-backend-xxxxx.run.app/v1/loader/${siteId}.js`
    script.async = true
    document.body.appendChild(script)

    // Cleanup
    return () => {
      script.remove()
      window.removeEventListener('adwall:converted', handleConverted)
      window.removeEventListener('adwall:detected', handleDetected)
    }
  }, [siteId, debug, onConverted, onDetected])
}

Utilisation :

// App.tsx
import { useAd Sentinelle } from './hooks/useAd Sentinelle'

function App() {
  useAd Sentinelle({
    siteId: 'VOTRE_SITE_ID',
    debug: process.env.NODE_ENV === 'development',
    onConverted: () => {
      console.log('Utilisateur converti !')
      // Analytics, etc.
    },
    onDetected: () => {
      console.log('Adblock détecté')
    }
  })

  return (
    <div className="App">
      {/* Votre application */}
    </div>
  )
}

Types TypeScript​

Pour une meilleure intégration TypeScript, ajoutez ces types :

// types/adwall.d.ts
interface Ad SentinelleConfig {
  debug?: boolean
  delay?: number
  cookieDomain?: string | null
}

interface Ad SentinelleEventDetail {
  sessionId: string
  variant: string
  timestamp: number
}

declare global {
  interface Window {
    ADWALL_CONFIG?: Ad SentinelleConfig
    Ad Sentinelle?: {
      check: () => void
      getSessionId: () => string
    }
  }

  interface WindowEventMap {
    'adwall:init': CustomEvent<Ad SentinelleEventDetail>
    'adwall:detected': CustomEvent<Ad SentinelleEventDetail>
    'adwall:displayed': CustomEvent<Ad SentinelleEventDetail>
    'adwall:converted': CustomEvent<Ad SentinelleEventDetail>
    'adwall:closed': CustomEvent<Ad SentinelleEventDetail>
    'adwall:error': CustomEvent<{ error: string }>
  }
}

export {}

Variables d'environnement​

Utilisez des variables d'environnement pour gérer le Site ID :

# .env.local
NEXT_PUBLIC_ADWALL_SITE_ID=677c2846-fed7-4461-b69c-7717bc3be9b4
// components/Ad Sentinelle.tsx
const siteId = process.env.NEXT_PUBLIC_ADWALL_SITE_ID

<Script
  src={`https://adwall-backend-xxxxx.run.app/v1/loader/${siteId}.js`}
  strategy="afterInteractive"
/>

Désactiver en développement​

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

export default function RootLayout({ children }) {
  const isProduction = process.env.NODE_ENV === 'production'

  return (
    <html lang="fr">
      <body>
        {children}
        
        {/* Ad Sentinelle uniquement en production */}
        {isProduction && (
          <Script
            src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js"
            strategy="afterInteractive"
          />
        )}
      </body>
    </html>
  )
}
Conseil

En développement, activez le mode debug: true pour voir les logs du SDK dans la console.