Flowsery Analytics mit Vue.js proxyen

Leiten Sie Flowsery Analytics über Ihren Vue.js-Entwicklungsserver weiter, um Störungen durch Adblocker zu vermeiden und genauere Besucherdaten zu erfassen.

1. Vue.js-Dev-Server-Proxy einrichten

Wenn Sie Vue CLI verwenden, aktualisieren Sie Ihre vue.config.js mit den folgenden Proxy-Regeln:

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',
        },
      },
    },
  },
};

Hinweis: Wenn Ihr Projekt bereits eine Route /api/track hat, fügen Sie dem Flowsery-Analytics-Skript data-api hinzu, um Event-Daten an einen anderen Pfad zu senden. Zum Beispiel leitet data-api="/flowsery-events" Daten an /flowsery-events statt an /api/track.

2. Produktionskonfiguration: Webserver-Setup

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

<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>

Wichtig: Wenn im Dashboard jeder Besucher aus demselben Ort zu kommen scheint, prüfen Sie, ob der Header x-flowsery-real-ip beim Weiterleiten an den Flowsery-Analytics-Endpunkt /events auf die echte Besucher-IP gesetzt wird und nicht auf die IP des Proxy-Servers.

3. Skript-Tag anpassen

Ersetzen Sie das ursprüngliche Flowsery-Analytics-Snippet durch die geproxyte Variante:

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

4. Deploy

Nach dem Deploy Ihrer Änderungen wird die Proxy-Konfiguration automatisch aktiv.

Prüfen, ob es funktioniert

So validieren Sie das Proxy-Setup:

1. Öffnen Sie Ihre Website.
2. Öffnen Sie die Entwicklerwerkzeuge Ihres Browsers und wechseln Sie zum Tab "Network".
3. Prüfen Sie, ob Analytics-Requests über Ihre Domain statt über analytics.flowsery.com ausgeliefert werden.

Für Produktionsumgebungen ist ein dedizierter Webserver (Nginx oder Apache) empfehlenswerter als der Dev-Server-Proxy.

Fehlerbehebung

Jeder Besucher scheint aus demselben Ort zu kommen

Wenn alle Besucher aus einer einzigen geografischen Region erscheinen (zum Beispiel aus der Region Ihres Servers), leitet der Proxy die echte Besucher-IP nicht korrekt weiter.

Lösung:

1. Stellen Sie sicher, dass Ihr Proxy den Header x-flowsery-real-ip mit der tatsächlichen Besucher-IP enthält und nicht mit der Server-IP, wenn Requests an den Flowsery-Analytics-Endpunkt /events weitergeleitet werden.
2. Wenn der Webserver hinter einem weiteren Proxy läuft (Cloudflare, Vercel usw.), sind $remote_addr bzw. %{REMOTE_ADDR}e die Werte dieses Upstream-Proxys - verwenden Sie stattdessen direkt $http_cf_connecting_ip bzw. %{HTTP:CF-Connecting-IP} oder $http_x_real_ip.