Suivi propriétaire avec Cloudflare Workers

Configurez un proxy propriétaire à l'aide de Cloudflare Workers. Ce guide s'adresse aux utilisateurs d'hébergement partagé (Hostinger, GoDaddy, Bluehost, etc.) qui ne peuvent pas configurer de proxys côté serveur.

Avant de commencer

Assurez-vous d'avoir :

• Un compte Cloudflare (le niveau gratuit fonctionne parfaitement) - Inscrivez-vous ici
• Votre domaine ajouté à Cloudflare (voir l'étape 2)
• Votre code de suivi Zenovay (trouvé sous Domains → your site → General)

Pourquoi Cloudflare Workers ?

Cloudflare Workers s'exécutent sur le réseau edge mondial de Cloudflare (plus de 300 centres de données). Cela signifie :

• Rapide : Temps de réponse inférieurs à 50 ms dans le monde entier
• Gratuit : 100 000 requêtes/jour sur le plan gratuit (plus que suffisant pour la plupart des sites)
• Simple : Aucun serveur à gérer
• Fiable : 99,99 % de disponibilité

Étape 1 : Créer un compte Cloudflare

Si vous avez déjà un compte Cloudflare, passez à l'étape 2.

1. Allez sur cloudflare.com
2. Cliquez sur Sign Up (coin supérieur droit)
3. Entrez votre adresse e-mail
4. Créez un mot de passe (au moins 8 caractères)
5. Cliquez sur Create Account
6. Vérifiez votre e-mail et cliquez sur le lien de vérification

Étape 2 : Ajouter votre domaine à Cloudflare

1. Connectez-vous à votre tableau de bord Cloudflare
2. Cliquez sur Add a Site (grand bouton bleu)
3. Entrez le nom de votre domaine (par exemple, yourdomain.com)
   • N'incluez pas www. ou https://
   • Juste le domaine : yourdomain.com
4. Cliquez sur Continue
5. Sélectionnez le plan Free et cliquez sur Continue
6. Cloudflare scannera vos enregistrements DNS existants - cliquez sur Continue
7. Cloudflare vous montre deux serveurs de noms comme :
   • bella.ns.cloudflare.com
   • troy.ns.cloudflare.com
8. Copiez ces serveurs de noms - vous en aurez besoin à l'étape suivante

Mettre à jour les serveurs de noms de votre domaine

Maintenant, vous devez pointer votre domaine vers Cloudflare :

1. Connectez-vous à votre registraire de domaine (où vous avez acheté votre domaine) :
   • GoDaddy : godaddy.com
   • Namecheap : namecheap.com
   • Google Domains : domains.google.com
   • Hostinger : hostinger.com
2. Trouvez les paramètres DNS ou serveurs de noms de votre domaine
3. Remplacez les serveurs de noms existants par les serveurs de noms Cloudflare
4. Enregistrez les modifications

Étape 3 : Créer le Worker

1. Dans la barre latérale du tableau de bord Cloudflare, cliquez sur Workers & Pages
2. Cliquez sur le bouton bleu Create
3. Cliquez sur Create Worker
4. Donnez un nom à votre worker : zenovay-proxy
   • Utilisez uniquement des lettres minuscules, des chiffres et des traits d'union
   • Les espaces ne sont pas autorisés
5. Cliquez sur Deploy

Vous verrez un message de succès. Maintenant, nous devons ajouter le code du proxy.

Étape 4 : Ajouter le code du proxy

1. Après le déploiement, cliquez sur Edit code (ou allez sur votre Worker et cliquez sur "Edit code")
2. Vous verrez un éditeur de code avec un code par défaut
3. Sélectionnez TOUT le code existant (Cmd+A sur Mac, Ctrl+A sur Windows)
4. Supprimez-le (appuyez sur Supprimer ou Retour arrière)
5. Copiez et collez le code suivant :

// Zenovay First-Party Proxy Worker
// This proxies tracking requests through your domain to bypass ad blockers

export default {
async fetch(request) {
  const url = new URL(request.url);

  // Get the real visitor IP address (for accurate geolocation)
  const clientIP = request.headers.get('CF-Connecting-IP') || '';

  // Determine the target URL based on the request path
  let targetUrl;
  if (url.pathname === '/script.js' || url.pathname === '/z.js') {
    // Script requests go to the regular endpoint
    targetUrl = `https://api.zenovay.com/z.js${url.search}`;
  } else {
    // All other requests (events, settings) go through first-party endpoint
    targetUrl = `https://api.zenovay.com/fp${url.pathname}${url.search}`;
  }

  // Copy the original request headers
  const headers = new Headers(request.headers);

  // IMPORTANT: Forward the real visitor IP for accurate geolocation
  headers.set('X-Zenovay-Real-IP', clientIP);

  // Remove the Host header (we're proxying to a different domain)
  headers.delete('Host');

  // Handle CORS preflight requests
  if (request.method === 'OPTIONS') {
    return new Response(null, {
      status: 204,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type',
      },
    });
  }

  try {
    // Forward the request to Zenovay API
    const response = await fetch(targetUrl, {
      method: request.method,
      headers: headers,
      body: request.body,
    });

    // Add CORS headers to the response
    const responseHeaders = new Headers(response.headers);
    responseHeaders.set('Access-Control-Allow-Origin', '*');

    // Return the response to the visitor's browser
    return new Response(response.body, {
      status: response.status,
      headers: responseHeaders,
    });
  } catch (error) {
    // If something goes wrong, return an error
    return new Response(JSON.stringify({ error: 'Proxy error' }), {
      status: 502,
      headers: { 'Content-Type': 'application/json' },
    });
  }
}
}

6. Cliquez sur Save and Deploy (coin supérieur droit)
7. Attendez le message "Worker deployed successfully"

Étape 5 : Ajouter votre domaine personnalisé

Maintenant, relions votre Worker à votre domaine :

1. Allez sur votre Worker dans le tableau de bord Cloudflare
2. Cliquez sur l'onglet Settings (pas "Triggers" - il a été déplacé vers Settings)
3. Faites défiler vers le bas pour trouver la section Domains & Routes
4. Cliquez sur Add → Custom Domain
5. Entrez votre sous-domaine : z.yourdomain.com
   • Remplacez yourdomain.com par votre domaine réel
   • Gardez le préfixe z. exactement comme indiqué
6. Cliquez sur Add Custom Domain
7. Cloudflare fera automatiquement :
   • Créer un enregistrement DNS pour z.yourdomain.com
   • Provisionner un certificat SSL (HTTPS)
   • Cela prend 1-2 minutes

Étape 6 : Tester votre Worker

Avant d'ajouter le script de suivi, assurez-vous que le Worker fonctionne :

1. Ouvrez un nouvel onglet de navigateur
2. Allez à : https://z.yourdomain.com/script.js
   • Remplacez yourdomain.com par votre domaine réel
3. Vous devriez voir du code JavaScript (un tas de code minifié)

Étape 7 : Ajouter le script de suivi à votre site Web

Ajoutez ce code à la section <head> de votre site Web. Vous pouvez trouver votre code de suivi sous Domains → your site → General dans l'application Zenovay.

<script data-cfasync="false">
window.ZENOVAY_TRACKER_CONFIG = {
trackingCode: 'YOUR_TRACKING_CODE',
apiUrl: 'https://z.yourdomain.com',
settingsEndpoint: '/settings'
};
var script = document.createElement('script');
script.src = 'https://z.yourdomain.com/script.js';
script.defer = true;
document.head.appendChild(script);
</script>

Ce qu'il faut remplacer :

Exemple avec des valeurs réelles :

<script data-cfasync="false">
window.ZENOVAY_TRACKER_CONFIG = {
trackingCode: 'ZV_Q8U0GYD70WR',
apiUrl: 'https://z.mywebsite.com',
settingsEndpoint: '/settings'
};
var script = document.createElement('script');
script.src = 'https://z.mywebsite.com/script.js';
script.defer = true;
document.head.appendChild(script);
</script>

Où ajouter ce code :

• WordPress : Utilisez un plugin comme "Insert Headers and Footers" ou ajoutez à votre header.php du thème
• Wix : Settings → Custom Code → Head Code
• Squarespace : Settings → Advanced → Code Injection → Header
• Shopify : Online Store → Themes → Edit Code → theme.liquid (dans la section <head>)
• Fichiers HTML : Entre les balises <head> et </head>
• N'importe quel CMS : Recherchez "Custom Code" ou "Header Scripts" dans vos paramètres

Étape 8 : Vérifier que cela fonctionne

Vérification 1 : Onglet Network (N'importe quel navigateur)

1. Ouvrez votre site Web dans Chrome, Firefox ou Edge
2. Appuyez sur F12 (ou Cmd+Option+I sur Mac) pour ouvrir DevTools
3. Cliquez sur l'onglet Network
4. Actualisez votre site Web (Cmd+R ou Ctrl+R)
5. Dans la boîte filtre/recherche, tapez script.js
6. Recherchez une requête à z.yourdomain.com/script.js

Ce que vous devriez voir :

• Status : 200 (OK)
• Domain : z.yourdomain.com (votre domaine, pas api.zenovay.com)

Vérification 2 : Mode Firefox Strict (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 menu (☰) → Settings
3. Cliquez sur Privacy & Security dans la barre latérale gauche
4. Sous "Enhanced Tracking Protection", sélectionnez Strict
5. Fermez les paramètres et visitez votre site Web
6. Ouvrez DevTools (F12) → onglet Network
7. Actualisez la page
8. Recherchez script.js - il devrait se charger 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 Web 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 d'avoir terminé, vérifiez TOUS ces éléments :

• Worker déployé sur z.yourdomain.com (répondant avec du code JavaScript)
• Le domaine personnalisé utilise le préfixe z. (PAS analytics., metrics., etc.)
• La balise script inclut l'attribut data-cfasync="false"
• window.ZENOVAY_TRACKER_CONFIG est défini avec le bon trackingCode
• Les deux URLs du script utilisent votre domaine personnalisé z.yourdomain.com
• Testé dans Firefox avec Enhanced Tracking Protection défini sur Strict
• Les visites apparaissent dans le tableau de bord Zenovay

Dépannage

Worker retourne l'erreur 522 ou 524

Cause : Délai d'expiration lors de la connexion à l'API Zenovay.

Solution :

1. Vérifiez que api.zenovay.com est accessible (visitez-le dans votre navigateur)
2. Vérifiez qu'il n'y a pas de fautes de frappe dans le code du proxy
3. Essayez de redéployer le worker (Edit code → Save and Deploy)

Le domaine personnalisé affiche une erreur SSL

Cause : Certificat SSL non encore provisionné.

Solution : Attendez 1-5 minutes. Cloudflare provisionne automatiquement les certificats SSL. Si cela prend plus de 10 minutes, vérifiez que les serveurs de noms de votre domaine pointent correctement vers Cloudflare.

Le script se charge mais pas de données dans le tableau de bord

Cause : Généralement une incohérence du code de suivi.

Solution :

1. Ouvrez la console DevTools de votre navigateur (F12 → onglet Console)
2. Recherchez les messages d'erreur rouges
3. Vérifiez que votre trackingCode correspond exactement à celui de votre tableau de bord Zenovay (sensible à la casse !)
4. Assurez-vous que le domaine du site Web est enregistré dans Zenovay

"Le script s'exécute" mais rien ne se passe

Cause : L'apiUrl dans votre config est incorrect.

Solution : Assurez-vous que votre window.ZENOVAY_TRACKER_CONFIG a le bon apiUrl:

apiUrl: 'https://z.yourdomain.com',  // Votre domaine personnalisé réel

La géolocalisation affiche un mauvais emplacement

Cause : L'IP réelle du visiteur n'est pas transférée à Zenovay.

Solution : Assurez-vous que votre code worker inclut cette ligne :

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

Firefox/Edge bloque toujours

Cause : Vous utilisez un sous-domaine bloqué comme analytics.* ou metrics.*.

Solution : Changez votre domaine personnalisé en z.yourdomain.com. Vous devrez :

1. Allez sur Workers & Pages → Votre Worker → Settings
2. Supprimez l'ancien domaine personnalisé
3. Ajoutez un nouveau domaine personnalisé : z.yourdomain.com
4. Mettre à jour les deux URLs dans votre script de suivi

Avancé : Plusieurs sites Web

Si vous avez plusieurs sites Web, vous pouvez utiliser un worker pour tous :

1. Ajoutez plusieurs domaines personnalisés au même worker :

   • z.website1.com
   • z.website2.com
   • z.website3.com

2. Chaque site Web utilise son propre code de suivi :

<script data-cfasync="false">
window.ZENOVAY_TRACKER_CONFIG = {
  trackingCode: 'ZV_SITE1CODE',
  apiUrl: 'https://z.website1.com',
  settingsEndpoint: '/settings'
};
var s = document.createElement('script');
s.src = 'https://z.website1.com/script.js';
s.defer = true;
document.head.appendChild(s);
</script>

<script data-cfasync="false">
window.ZENOVAY_TRACKER_CONFIG = {
  trackingCode: 'ZV_SITE2CODE',
  apiUrl: 'https://z.website2.com',
  settingsEndpoint: '/settings'
};
var s = document.createElement('script');
s.src = 'https://z.website2.com/script.js';
s.defer = true;
document.head.appendChild(s);
</script>

Prochaines étapes

• Custom Events - Suivez les clics sur les boutons et les envois de formulaires
• Visitor Identification - Connectez analytics aux comptes d'utilisateurs
• Troubleshooting - Plus d'aide sur les problèmes courants

Besoin d'aide ?

Si vous êtes bloqué :

1. Vérifiez à nouveau chaque étape ci-dessus
2. Assurez-vous d'utiliser z.yourdomain.com (pas analytics.* ou metrics.*)
3. Testez en mode Firefox Strict
4. Vérifiez la console du navigateur pour les erreurs (F12 → onglet Console)

Toujours bloqué ? Contactez le support à [email protected] avec :

• Votre nom de domaine
• Capture d'écran de l'onglet Network
• Tous les messages d'erreur de l'onglet Console