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 (typischerweise 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.