Proxy Flowsery Analytics avec Vue.js

Faites transiter Flowsery Analytics via votre serveur de developpement Vue.js afin d'eviter les interferences des bloqueurs de publicites et de capturer des donnees visiteurs plus precises.

1. Configurer le proxy du serveur de dev Vue.js

Si vous utilisez Vue CLI, mettez a jour votre vue.config.js avec les regles proxy suivantes :

JavaScript

module.exports = {
  devServer: {
    proxy: {
      '/js/main.js': {
        target: 'https://analytics.flowsery.com',
        changeOrigin: true,
        pathRewrite: {
          '^/js/main.js': '/js/main.js',
        },
      },
      '/api/track': {
        target: 'https://analytics.flowsery.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api/track': '/analytics/events',
        },
      },
    },
  },
};

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

2. Configuration de production : configurer le serveur web

Nginx

location /js/main.js {
    proxy_pass https://cdn.flowsery.com/main.js;
    proxy_set_header Host analytics.flowsery.com;
    proxy_cache_valid 200 1y;
    add_header Cache-Control "public, max-age=31536000";
    expires 1y;
}
 
location /api/track {
    proxy_pass https://analytics.flowsery.com/analytics/events;
    proxy_set_header Host analytics.flowsery.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header x-forwarded-for $remote_addr;
    # CRITICAL: Flowsery reads this as the authoritative visitor IP. Without it, every visitor resolves to your server's region.
    proxy_set_header x-flowsery-real-ip $remote_addr;
 
    # Allow POST requests
    proxy_method POST;
    proxy_pass_request_body on;
}

Apache

APACHE

<Location "/js/main.js">
    ProxyPass https://cdn.flowsery.com/main.js
    ProxyPassReverse https://cdn.flowsery.com/main.js
    Header set Cache-Control "public, max-age=31536000"
</Location>
 
<Location "/api/track">
    ProxyPass https://analytics.flowsery.com/analytics/events
    ProxyPassReverse https://analytics.flowsery.com/analytics/events
    RequestHeader set x-forwarded-for %{REMOTE_ADDR}e
    # CRITICAL: Flowsery reads this as the authoritative visitor IP. Without it, every visitor resolves to your server's region.
    RequestHeader set x-flowsery-real-ip %{REMOTE_ADDR}e
</Location>

Important : si tous les visiteurs apparaissent au meme endroit dans votre tableau de bord, verifiez que l'en-tete 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.

3. Modifier la balise script

Remplacez le snippet Flowsery Analytics par la version proxifiee :

HTML

<script defer data-fl-website-id="flid_******" src="/js/main.js"></script>

4. Deployer

Apres le deploiement de vos changements, la configuration proxy s'active automatiquement.

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

En production, il est recommande d'utiliser un serveur web dedie (Nginx ou Apache) plutot que de s'appuyer sur le proxy du serveur de developpement.

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 inclut l'en-tete x-flowsery-real-ip contenant la vraie adresse IP du visiteur (et non celle du serveur) lors du transfert des requetes vers le endpoint /events de Flowsery Analytics
Si le serveur web est derriere un autre proxy (Cloudflare, Vercel, etc.), $remote_addr / %{REMOTE_ADDR}e sera l'IP du proxy amont : utilisez plutot $http_cf_connecting_ip / %{HTTP:CF-Connecting-IP} ou $http_x_real_ip