Aller au contenu principal
Zenovaydocs
8 min de lecture

Suivi de première partie avec Next.js

Configurez un proxy de première partie dans votre application Next.js pour contourner les bloqueurs de publicités et les protections de suivi du navigateur.

Difficulté : Facile - C'est l'option la plus simple pour les projets Next.js. Il suffit d'ajouter quelques lignes à votre fichier de configuration.

Pourquoi cela fonctionne (même origine)

Cette approche utilise /api/_z/script.js qui est sur la même origine que votre site web. Firefox ETP et les autres protections de suivi ne bloquent que les demandes inter-origines.

  • Le navigateur voit : yourdomain.com/api/_z/script.js — même origine (première partie)
  • Next.js réécrit la demande à côté serveur vers le serveur Zenovay (le navigateur ne le voit jamais)
  • Toute protection de suivi est contournée car la demande est de première partie

Avant de commencer

Assurez-vous que vous avez :

  • Un projet Next.js 12+ (App Router ou Pages Router)
  • Votre code de suivi Zenovay (trouvé sous Domaines → votre site → Général → Script de suivi, dans l'onglet Première partie)
  • Accès à votre fichier next.config.js ou next.config.ts

Format de votre code de suivi

Votre code de suivi ressemble à : ZV_XXXXXXXXXX

  • Commence par ZV_
  • Suivi de 10 caractères (lettres et chiffres)
  • SENSIBLE À LA CASSE - copiez-le exactement

Exemple : ZV_Q8U0GYD70WR

Carte de script de suivi montrant l'extrait de script avec les onglets HTML, React, Next.js et Première partie
Trouvez votre code de suivi et l'extrait Next.js prêt à l'emploi sous Domaines → votre site → Général → Script de suivi.

Comment cela fonctionne

Les réécritures Next.js agissent comme un proxy côté serveur. Lorsqu'un navigateur demande /api/_z/script.js, Next.js le récupère depuis api.zenovay.com/fp/script.js et le retourne. Le navigateur ne voit que votre domaine.

Navigateur → yourdomain.com/api/_z/script.js  (Première partie)
               ↓
         Réécriture Next.js
               ↓
         api.zenovay.com/fp/script.js (Serveur à serveur)

Étape 1 : Configurer les réécritures

Ajoutez la configuration de réécriture à votre fichier de configuration Next.js.

Quel fichier de configuration ?

  • next.config.js - Si votre projet utilise JavaScript
  • next.config.mjs - Si votre projet utilise les modules ES
  • next.config.ts - Si votre projet utilise TypeScript (Next.js 15+)

Pour next.config.js (JavaScript)

next.config.jsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
// Ajoutez cette configuration de réécritures
async rewrites() {
  return [
    {
      // Proxy toutes les demandes vers /api/_z/* vers le point de terminaison de première partie de Zenovay
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

Pour next.config.mjs (Modules ES)

next.config.mjsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

export default nextConfig

Pour next.config.ts (TypeScript - Next.js 15+)

next.config.tsTypeScript
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

export default nextConfig

Si vous avez déjà des réécritures

Si votre configuration a déjà une fonction rewrites(), ajoutez la réécriture Zenovay au tableau existant :

next.config.js (avec réécritures existantes)JavaScript
const nextConfig = {
async rewrites() {
  return [
    // Vos réécritures existantes...
    {
      source: '/old-page',
      destination: '/new-page',
    },
    // Ajoutez la réécriture Zenovay
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

Étape 2 : Ajouter le script de suivi

Ajoutez maintenant le script de suivi à votre application.

App Router (Next.js 13+)

Ajoutez le script à votre mise en page racine :

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

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
  <html lang="en">
    <head>
      <Script
        src="/api/_z/script.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
)
}

Pages Router

Ajoutez le script à votre _app.tsx personnalisé :

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

export default function App({ Component, pageProps }: AppProps) {
return (
  <>
    <Script
      src="/api/_z/script.js"
      data-tracking-code="YOUR_TRACKING_CODE"
      strategy="afterInteractive"
    />
    <Component {...pageProps} />
  </>
)
}

Remplacez YOUR_TRACKING_CODE par votre code de suivi réel depuis le tableau de bord Zenovay (par exemple, ZV_Q8U0GYD70WR).

Étape 3 : Redémarrer votre serveur de développement

Important ! Next.js met en cache le fichier de configuration. Vous DEVEZ redémarrer votre serveur de développement après avoir modifié next.config.js.

TerminalBash
# Arrêtez votre serveur de développement actuel (Ctrl+C)
# Puis redémarrez-le
npm run dev

Étape 4 : Déployer vos modifications

TerminalBash
# Pour Vercel (déploiement automatique)
git add .
git commit -m "Add Zenovay first-party tracking"
git push

# Ou déploiement manuel sur Vercel
vercel deploy

# Pour d'autres plateformes
npm run build && npm run start

Étape 5 : Vérifier que cela fonctionne

Vérification 1 : Développement local

  1. Ouvrez votre site à http://localhost:3000
  2. Appuyez sur F12 pour ouvrir DevTools
  3. Cliquez sur l'onglet Réseau
  4. Actualisez la page
  5. Filtrez par script.js
  6. Vous devriez voir une demande vers /api/_z/script.js avec le statut 200

Vérification 2 : Mode strict de Firefox (le plus important !)

Firefox a la protection de suivi la plus stricte. Si cela fonctionne dans Firefox, cela fonctionne partout.

  1. Ouvrez le navigateur Firefox
  2. Cliquez sur le bouton de menu (trois lignes, en haut à droite) → Paramètres
  3. Cliquez sur Confidentialité et sécurité dans la barre latérale gauche
  4. Sous « Protection renforcée contre le suivi », sélectionnez Strict
  5. Visitez votre site web
  6. Ouvrez DevTools (F12) → onglet Réseau
  7. Actualisez et vérifiez que /api/_z/script.js se charge avec le statut 200

Vérification 3 : Tableau de bord Zenovay

  1. Allez à app.zenovay.com et connectez-vous
  2. Cliquez sur votre site web
  3. Visitez votre site dans un autre onglet
  4. Dans 1 à 2 minutes, vous devriez voir la visite apparaître dans votre tableau de bord

Liste de contrôle finale

Avant de terminer, vérifiez TOUS les points suivants :

  • next.config.js contient la règle de réécriture pour /api/_z/:path*
  • Le serveur de développement a été redémarré après le changement de configuration
  • La balise de script utilise /api/_z/script.js (pas l'URL Zenovay directe)
  • L'attribut data-tracking-code contient votre code de suivi correct
  • Testé dans Firefox avec la protection renforcée contre le suivi définie sur Strict
  • Les visites apparaissent dans le tableau de bord Zenovay

Dépannage

Le script retourne 404

Cause : La réécriture n'est pas configurée correctement ou le serveur n'a pas été redémarré.

Solution :

  1. Redémarrez votre serveur de développement - C'est la solution la plus courante
  2. Vérifiez que le fichier next.config.js est enregistré
  3. Vérifiez que le chemin correspond exactement : /api/_z/:path*
  4. Assurez-vous que vous utilisez source et destination (pas from et to)

Le script se charge mais aucune donnée n'apparaît

Cause : Le code de suivi peut être incorrect.

Solution :

  1. Trouvez votre code de suivi sous Domaines → votre site → Général → Script de suivi
  2. Assurez-vous que data-tracking-code correspond exactement (sensible à la casse)
  3. Vérifiez la console du navigateur (F12 → onglet Console) pour les erreurs

Les réécritures fonctionnent localement mais pas en production

Cause : Certaines plateformes d'hébergement gèrent différemment les réécritures.

Solution :

  • Vercel : Les réécritures fonctionnent automatiquement
  • Netlify : Ajoutez aussi la réécriture à netlify.toml
  • Auto-hébergé : Assurez-vous que votre serveur supporte les réécritures Next.js

La géolocalisation est incorrecte

Cause : L'adresse IP réelle du visiteur n'est pas transmise.

Solution : Pour Vercel, cela fonctionne automatiquement. Pour d'autres plateformes, vous pourriez avoir besoin d'un middleware :

middleware.tsTypeScript
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
if (request.nextUrl.pathname.startsWith('/api/_z/')) {
  const response = NextResponse.rewrite(
    new URL(`https://api.zenovay.com/fp/${request.nextUrl.pathname.replace('/api/_z/', '')}${request.nextUrl.search}`)
  )

  // Transférez l'adresse IP du client réel
  const clientIP = request.headers.get('x-forwarded-for')?.split(',')[0]
                || request.headers.get('x-real-ip')
                || ''

  response.headers.set('X-Zenovay-Real-IP', clientIP)

  return response
}
}

export const config = {
matcher: '/api/_z/:path*',
}

Exemple complet

Voici un exemple complet de next.config.js :

next.config.jsJavaScript
/** @type {import('next').NextConfig} */
const nextConfig = {
// Vos options de configuration existantes...
reactStrictMode: true,

// Réécriture du proxy de première partie Zenovay
async rewrites() {
  return [
    {
      source: '/api/_z/:path*',
      destination: 'https://api.zenovay.com/fp/:path*',
    },
  ]
},
}

module.exports = nextConfig

Et un app/layout.tsx complet :

app/layout.tsxTSX
import Script from 'next/script'
import './globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
  <html lang="en">
    <head>
      {/* Zenovay Analytics - Suivi de première partie */}
      <Script
        src="/api/_z/script.js"
        data-tracking-code="ZV_Q8U0GYD70WR"  // Remplacez par votre code de suivi
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
)
}

Prochaines étapes

Cette page vous a-t-elle été utile ?