Flowsery Analytics mit Firebase Hosting proxyen

Leiten Sie Flowsery Analytics über Firebase Hosting mithilfe von Cloud Functions weiter, um Störungen durch Adblocker zu vermeiden und genauere Besucherdaten zu erfassen.

Hinweis: Firebase Hosting unterstützt keine nativen Reverse-Proxy-Rewrites auf externe Ziele. Diese Anleitung nutzt Firebase Cloud Functions als Alternative.

1. Firebase Functions initialisieren (falls noch nicht eingerichtet)

Wenn Ihr Projekt noch keine Firebase Functions enthält, führen Sie aus:

firebase init functions

Folgen Sie den Einrichtungsdialogen für Ihre Umgebung. Danach befindet sich ein Verzeichnis /functions in Ihrem Projekt.

2. Abhängigkeiten installieren

Wechseln Sie in das Verzeichnis functions/ und installieren Sie die benötigten Pakete:

cd functions/
npm i -s express express-http-proxy

3. Die Reverse-Proxy-Funktion bauen

Erstellen oder aktualisieren Sie functions/index.js mit folgendem Inhalt:

const { onRequest } = require('firebase-functions/v2/https');
const express = require('express');
const proxy = require('express-http-proxy');
 
const app = express();
 
app.set('trust proxy', true);
 
// Proxy the Flowsery Analytics tracking script
app.use(
  '/js/main.js',
  proxy('https://analytics.flowsery.com', {
    proxyReqPathResolver: () => '/js/main.js',
  })
);
 
// Proxy the event collection endpoint
app.use(
  '/api/track',
  proxy('https://analytics.flowsery.com', {
    proxyReqPathResolver: () => '/analytics/events',
    proxyReqOptDecorator: (proxyReqOpts, srcReq) => {
      // Forward the real visitor IP for accurate geolocation
      const clientIp =
        srcReq.headers['cf-connecting-ip'] || srcReq.headers['x-real-ip'] || srcReq.headers['x-forwarded-for']?.split(',')[0]?.trim() || srcReq.ip;
      proxyReqOpts.headers['x-forwarded-for'] = clientIp;
      if (clientIp) {
        // CRITICAL: Flowsery reads this as the authoritative visitor IP. Without it, every visitor resolves to your server's region.
        proxyReqOpts.headers['x-flowsery-real-ip'] = clientIp;
      }
      return proxyReqOpts;
    },
  })
);
 
exports.reverseProxy = onRequest(app);

Hinweis: Wenn Ihr Projekt bereits einen Pfad /api/track verwendet, fügen Sie dem Flowsery-Analytics-Skript data-api hinzu, um Events an einen anderen Pfad zu senden. Zum Beispiel sendet data-api="/flowsery-events" die Daten stattdessen an /flowsery-events.

Wichtig: Wenn im Dashboard jeder Besucher aus demselben Ort zu kommen scheint, prüfen Sie, ob 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.

4. Firebase-Hosting-Rewrites konfigurieren

Aktualisieren Sie firebase.json, damit passende Pfade an die Funktion reverseProxy weitergeleitet werden:

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/js/main.js",
        "function": "reverseProxy"
      },
      {
        "source": "/api/track",
        "function": "reverseProxy"
      }
    ]
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": ["node_modules", ".git", "firebase-debug.log", "firebase-debug.*.log", "*.local"]
    }
  ]
}

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

6. Hosting und Functions deployen

Deployen Sie Hosting und Functions gemeinsam:

firebase deploy --only hosting,functions

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.

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 die Cloud Function hinter einem weiteren Proxy läuft (Cloudflare, Vercel usw.), ist srcReq.ip die IP dieses Upstream-Proxys - verwenden Sie stattdessen direkt cf-connecting-ip oder x-real-ip.