Aller au contenu principal
Zenovaydocs
8 min de lecture

Suivi First-Party avec Netlify

Configurez un proxy first-party sur Netlify à l'aide de simples règles de redirection. Fonctionne avec n'importe quel site statique ou framework.

Difficulté : Facile - Il suffit d'ajouter quelques lignes dans un fichier de configuration.

Pourquoi Cela Fonctionne (Same-Origin)

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

  • Le navigateur voit : yourdomain.com/api/_z/script.js → Même origine ✅
  • Netlify redirige la demande vers le serveur Zenovay côté serveur (le navigateur ne voit jamais cela)
  • Toutes les protections de suivi sont contournées car la demande est first-party

Avant de Commencer

Assurez-vous que vous avez :

  • Un projet déployé sur Netlify
  • Votre code de suivi Zenovay (trouvé sous Domaines → votre site → Général, dans la carte de script de suivi)
  • L'accès à la configuration de build de votre projet

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

Page des paramètres généraux du domaine montrant la carte de script de suivi avec l'extrait de script et l'onglet First-Party
Trouvez votre code de suivi et l'onglet First-Party sous Domaines → votre site → Général.

Option 1 : Utiliser le Fichier _redirects (Plus Simple)

Le moyen le plus facile de configurer le proxy est d'utiliser le fichier _redirects de Netlify.

Étape 1 : Créer le Fichier de Redirections

Créez un fichier _redirects dans votre dossier public/ (ou partout où vont vos assets statiques) :

public/_redirectsTEXT
# Proxy de suivi first-party Zenovay
/api/_z/*  https://api.zenovay.com/fp/:splat  200

Comment cela fonctionne : Le code de statut 200 transforme cela en une réécriture (proxy) au lieu d'une redirection. Le navigateur voit votre domaine, mais Netlify récupère depuis l'API Zenovay en arrière-plan.

Étape 2 : Ajouter le Script de Suivi

Votre HTMLHTML
<script defer
data-tracking-code="VOTRE_CODE_DE_SUIVI"
src="/api/_z/script.js">
</script>

Étape 3 : Déployer

TerminalBash
netlify deploy --prod

Ou poussez vers votre dépôt Git si vous avez le déploiement continu configuré.

Option 2 : Utiliser netlify.toml (Plus Explicite)

Pour des configurations plus complexes, utilisez netlify.toml :

Étape 1 : Créer ou Mettre à Jour netlify.toml

Ajoutez la règle de redirection à votre netlify.toml à la racine de votre projet :

netlify.tomlTOML
# Proxy de suivi first-party Zenovay
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

Si vous avez déjà un netlify.toml, ajoutez la redirection à votre fichier existant :

netlify.toml (avec configuration existante)TOML
[build]
command = "npm run build"
publish = "dist"

# Proxy de suivi first-party Zenovay
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

# Vos autres redirections...
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

L'ordre compte ! Mettez la redirection Zenovay AVANT les redirections catch-all (comme les fallbacks SPA). Netlify traite les redirections dans l'ordre.

Étape 2 : Ajouter le Script de Suivi

Votre HTMLHTML
<script defer
data-tracking-code="VOTRE_CODE_DE_SUIVI"
src="/api/_z/script.js">
</script>

Étape 3 : Déployer

TerminalBash
netlify deploy --prod

Exemples Spécifiques au Framework

React (Create React App)

public/_redirectsTEXT
/api/_z/*  https://api.zenovay.com/fp/:splat  200
public/index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <script defer data-tracking-code="VOTRE_CODE_DE_SUIVI" src="/api/_z/script.js"></script>
  <!-- other head elements -->
</head>
<body>
  <div id="root"></div>
</body>
</html>

Vue.js (Vite)

public/_redirectsTEXT
/api/_z/*  https://api.zenovay.com/fp/:splat  200
index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <script defer data-tracking-code="VOTRE_CODE_DE_SUIVI" src="/api/_z/script.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Gatsby

netlify.tomlTOML
[build]
command = "gatsby build"
publish = "public"

[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true
gatsby-ssr.jsJSX
import React from 'react'

export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
  <script
    key="zenovay"
    defer
    data-tracking-code="VOTRE_CODE_DE_SUIVI"
    src="/api/_z/script.js"
  />
])
}

Hugo

static/_redirectsTEXT
/api/_z/*  https://api.zenovay.com/fp/:splat  200
layouts/partials/head.htmlHTML
<script defer data-tracking-code="VOTRE_CODE_DE_SUIVI" src="/api/_z/script.js"></script>

11ty (Eleventy)

src/_redirectsTEXT
/api/_z/*  https://api.zenovay.com/fp/:splat  200

Assurez-vous que _redirects est copié vers la sortie en ajoutant à votre .eleventy.js :

.eleventy.jsJavaScript
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("src/_redirects");
// ... rest of config
}

Vérifier que Cela Fonctionne

Vérifier dans le Tableau de Bord Netlify

  1. Allez à votre site dans le Tableau de Bord Netlify
  2. Cliquez sur Configuration du site → Redirections
  3. Vous devriez voir votre redirection /api/_z/* listée

Vérifier l'Onglet Réseau

  1. Visitez votre site déployé
  2. Ouvrez DevTools (F12)
  3. Allez à l'onglet Réseau
  4. Rechargez la page
  5. Recherchez /api/_z/script.js

Vous devriez voir :

  • Statut : 200
  • Domaine : Votre domaine Netlify
  • Réponse : Code JavaScript

Tester en Mode Strict de Firefox

  1. Ouvrez Firefox
  2. Paramètres → Confidentialité et Sécurité → Protection Renforcée Contre le Suivi : Stricte
  3. Visitez votre site
  4. Vérifiez que le script se charge correctement

Dépannage

La Redirection Retourne 404

Cause : Le fichier _redirects n'est pas publié ou se trouve au mauvais endroit.

Solution :

  1. Assurez-vous que _redirects se trouve dans votre répertoire de publication (généralement public/ ou dist/)
  2. Pour les outils de build, assurez-vous que le fichier est copié pendant le build
  3. Vérifiez le Tableau de Bord Netlify → Redirections pour voir s'il est reconnu

La Redirection Cause une Boucle

Cause : Une autre redirection interfère.

Solution :

  1. Utilisez force = true dans netlify.toml pour remplacer d'autres règles
  2. Assurez-vous que la redirection Zenovay vient AVANT les règles catch-all
  3. Vérifiez les règles conflictuelles dans _redirects et netlify.toml

Le Script Se Charge Mais Retourne du HTML

Cause : Une redirection catch-all SPA intercepte la demande.

Solution : Mettez la redirection Zenovay AVANT votre fallback SPA :

netlify.tomlTOML
# Cela DOIT venir en premier
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

# Le fallback SPA vient après
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

La Géolocalisation Affiche Mauvais Emplacement

Cause : Le proxy de Netlify ne transfère pas automatiquement l'IP du client.

Solution : Malheureusement, les redirections simples de Netlify ne supportent pas les en-têtes personnalisés. La géolocalisation sera basée sur la localisation du serveur de bord de Netlify. Pour une géolocalisation précise, considérez :

  1. Utiliser les Netlify Functions (Edge Functions) - configuration plus complexe
  2. Utiliser Cloudflare Workers devant Netlify

Avancé : Utiliser les Netlify Edge Functions

Pour plus de contrôle (y compris le transfert d'IP), vous pouvez utiliser les Netlify Edge Functions :

netlify/edge-functions/zenovay-proxy.tsTypeScript
import type { Context } from '@netlify/edge-functions'

export default async (request: Request, context: Context) => {
const url = new URL(request.url)
const path = url.pathname.replace('/api/_z/', '')
const targetUrl = `https://api.zenovay.com/fp/${path}${url.search}`

// Récupérer l'IP du client
const clientIP = context.ip || ''

const headers = new Headers(request.headers)
headers.set('X-Zenovay-Real-IP', clientIP)
headers.delete('Host')

const response = await fetch(targetUrl, {
  method: request.method,
  headers: headers,
  body: request.body,
})

const responseHeaders = new Headers(response.headers)
responseHeaders.set('Access-Control-Allow-Origin', '*')

return new Response(response.body, {
  status: response.status,
  headers: responseHeaders,
})
}

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

Exemple Complet

Structure du ProjetTEXT
my-netlify-site/
├── netlify.toml
├── public/
│   ├── _redirects
│   └── index.html
├── src/
│   └── ...
└── package.json
netlify.tomlTOML
[build]
command = "npm run build"
publish = "dist"

[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true
public/index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <script defer data-tracking-code="VOTRE_CODE_DE_SUIVI" src="/api/_z/script.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Liste de Contrôle Finale

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

  • _redirects ou netlify.toml a la règle de redirection Zenovay
  • La règle de redirection vient AVANT les règles catch-all SPA
  • 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
  • Le projet est déployé (pas juste en cours d'exécution localement)
  • Testé dans Firefox avec la Protection Renforcée Contre le Suivi définie sur Stricte
  • Les visites apparaissent dans le tableau de bord Zenovay

Prochaines Étapes

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