Proxy Flowsery Analytics avec Astro

Faites transiter Flowsery Analytics via votre application Astro avec du middleware afin d'eviter les interferences des bloqueurs de publicites et de capturer des donnees visiteurs plus precises.

1. Creer le middleware

Creez un fichier middleware dans src/middleware.js (ou src/middleware.ts pour les projets TypeScript) :

JavaScript

// src/middleware.js
export async function onRequest(context, next) {
  const { request } = context;
  const url = new URL(request.url);
 
  // Proxy the Flowsery Analytics tracking script
  if (url.pathname === '/js/main.js') {
    const response = await fetch('https://cdn.flowsery.com/main.js');
    const script = await response.text();
 
    return new Response(script, {
      headers: {
        'Content-Type': 'application/javascript',
        'Cache-Control': 'public, max-age=31536000',
      },
    });
  }
 
  // Proxy the event collection endpoint
  if (url.pathname === '/api/track' && request.method === 'POST') {
    const body = await request.text();
 
    // Resolve the real visitor IP for accurate geolocation
    const clientIp =
      request.headers.get('cf-connecting-ip') || request.headers.get('x-real-ip') || request.headers.get('x-forwarded-for')?.split(',')[0] || '';
 
    const response = await fetch('https://analytics.flowsery.com/analytics/events', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'User-Agent': request.headers.get('User-Agent') || '',
        Origin: request.headers.get('Origin') || url.origin,
        // Flowsery reads `x-flowsery-real-ip` as the authoritative visitor IP.
        // Without it, every visitor resolves to your server's region because
        // Cloudflare rewrites `cf-connecting-ip` on the proxy hop.
        ...(clientIp && { 'x-flowsery-real-ip': clientIp }),
      },
      body: body,
    });
 
    const responseText = await response.text();
 
    return new Response(responseText, {
      status: response.status,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }
 
  return next();
}

2. Activer le rendu cote serveur dans Astro

Mettez a jour astro.config.mjs pour activer le SSR (necessaire pour le middleware) :

JavaScript

// astro.config.mjs
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
 
export default defineConfig({
  output: 'server', // or 'hybrid'
  adapter: node({
    mode: 'standalone',
  }),
});

Vous aurez aussi besoin de l'adapter Node.js : npm install @astrojs/node

3. Alternative : site statique avec routes API

Si vous preferez garder votre site entierement statique, creez des routes API plutot qu'un middleware :

Route proxy pour le script

Creez src/pages/js/main.js.js :

JavaScript

// src/pages/js/main.js.js
export async function GET() {
  const response = await fetch('https://cdn.flowsery.com/main.js');
  const script = await response.text();
 
  return new Response(script, {
    headers: {
      'Content-Type': 'application/javascript',
      'Cache-Control': 'public, max-age=31536000',
    },
  });
}

Route proxy pour les evenements

Creez src/pages/api/track.js :

JavaScript

// src/pages/api/track.js
export async function POST({ request }) {
  const body = await request.text();
  const url = new URL(request.url);
 
  // Resolve the real visitor IP for accurate geolocation
  const clientIp =
    request.headers.get('x-real-ip') || request.headers.get('x-forwarded-for')?.split(',')[0] || request.headers.get('cf-connecting-ip') || '';
 
  const response = await fetch('https://analytics.flowsery.com/analytics/events', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'User-Agent': request.headers.get('User-Agent') || '',
      Origin: request.headers.get('Origin') || url.origin,
      'x-forwarded-for': clientIp,
    },
    body: body,
  });
 
  const responseText = await response.text();
 
  return new Response(responseText, {
    status: response.status,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

Remarque : si votre projet utilise deja une route /api/track, ajoutez data-api a la balise script Flowsery Analytics pour rediriger les evenements ailleurs. Par exemple, data-api="/flowsery-events" envoie les donnees vers /flowsery-events.

Important : si tous les visiteurs apparaissent au meme endroit dans votre tableau de bord, verifiez que x-flowsery-real-ip est bien defini sur la vraie IP du visiteur (et non celle du serveur proxy) lors du transfert des requetes vers le endpoint /events de Flowsery Analytics.

4. Modifier la balise script

Remplacez le snippet Flowsery Analytics dans votre layout par la version proxifiee :

ASTRO

---
// src/layouts/Layout.astro
const { title } = Astro.props;
---
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <script
      defer
      data-fl-website-id="flid_******"
      src="/js/main.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

5. Deployer

Apres deploiement, la configuration proxy prend effet automatiquement. Verifiez simplement que votre hebergeur prend en charge :

le rendu cote serveur (pour l'approche middleware)
les routes API (pour l'approche site statique)

Parmi les hebergeurs compatibles Astro, on trouve notamment Vercel, Netlify et Cloudflare Pages.

Verifier que cela fonctionne

Pour valider le bon fonctionnement du proxy :

Ouvrez votre site web
Ouvrez les outils de developpement de votre navigateur et passez a l'onglet Reseau
Verifiez que les requetes analytics sont servies depuis votre domaine plutot que depuis analytics.flowsery.com

Remarque : l'approche middleware necessite le rendu cote serveur, alors que les routes API fonctionnent aussi bien avec des sites statiques qu'avec des sites rendus cote serveur.

Depannage

Tous les visiteurs apparaissent au meme endroit

Lorsque tous les visiteurs affichent une seule localisation geographique (generalement la region de votre serveur), le proxy ne transmet pas correctement les vraies IP des visiteurs.

Resolution :

Assurez-vous que votre proxy definit x-flowsery-real-ip sur la vraie IP du visiteur (et non l'IP du serveur) lors du transfert des requetes vers le endpoint /events de Flowsery Analytics.
Si votre deploiement Astro est derriere un autre proxy (Vercel, Cloudflare, Netlify), l'IP utile se trouve en general dans cf-connecting-ip, x-vercel-forwarded-for ou x-real-ip : lisez d'abord celui que votre edge fournit.