Flowsery Analytics mit Astro proxyen

Leiten Sie Flowsery Analytics über Ihre Astro-Anwendung mithilfe von Middleware weiter, um Störungen durch Adblocker zu vermeiden und genauere Besucherdaten zu erfassen.

1. Middleware erstellen

Erstellen Sie eine Middleware-Datei unter src/middleware.js (oder src/middleware.ts für TypeScript-Projekte):

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. Server-Side Rendering in Astro aktivieren

Aktualisieren Sie Ihre astro.config.mjs, damit SSR unterstützt wird (für Middleware erforderlich):

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

Sie benötigen außerdem den Node.js-Adapter: npm install @astrojs/node

3. Alternative: Statische Website mit API-Routen

Wenn Ihre Website vollständig statisch bleiben soll, können Sie statt Middleware API-Routen erstellen:

Proxy-Route für das Skript

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

Proxy-Route für Events

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

Hinweis: Wenn Ihr Projekt bereits eine Route /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" Daten an /flowsery-events statt an /api/track.

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. Skript-Tag anpassen

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

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

Nach dem Deploy wird die Proxy-Konfiguration automatisch aktiv. Prüfen Sie, ob Ihr Hosting-Provider Folgendes unterstützt:

Server-Side Rendering (für den Middleware-Ansatz)
API-Routen (für den statischen Ansatz)

Zu Astro kompatible Hoster sind unter anderem Vercel, Netlify und Cloudflare Pages.

Prüfen, ob es funktioniert

So validieren Sie das Proxy-Setup:

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

Hinweis: Der Middleware-Ansatz erfordert Server-Side Rendering, während API-Routen sowohl mit statischen als auch mit servergerenderten Websites funktionieren.

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:

Stellen Sie sicher, dass Ihr Proxy x-flowsery-real-ip auf die tatsächliche Besucher-IP setzt und nicht auf die Server-IP, wenn Requests an den Flowsery-Analytics-Endpunkt /events weitergeleitet werden.
Wenn Ihr Astro-Deployment hinter einem weiteren Proxy läuft (Vercel, Cloudflare, Netlify), finden Sie die gewünschte IP normalerweise in cf-connecting-ip, x-vercel-forwarded-for oder x-real-ip - lesen Sie den Header, den Ihre Edge zuerst bereitstellt.