Proxy de Flowsery Analytics con Firebase Hosting

Enruta Flowsery Analytics a través de Firebase Hosting usando Cloud Functions para evitar la interferencia de los adblockers y capturar datos de visitantes más precisos.

Nota: Firebase Hosting no soporta de forma nativa rewrites de proxy reverso hacia destinos externos. Esta guía usa Firebase Cloud Functions como alternativa.

1. Inicializa Firebase Functions, si aún no está configurado

Si tu proyecto todavía no incluye Firebase Functions, ejecuta:

firebase init functions

Sigue el asistente de configuración para tu entorno. Al terminar, verás un directorio /functions en tu proyecto.

2. Instala las dependencias

Ve al directorio functions/ e instala los paquetes necesarios:

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

3. Crea la función de proxy reverso

Crea o actualiza functions/index.js con lo siguiente:

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

Nota: Si tu proyecto ya usa una ruta /api/track, agrega data-api a la etiqueta del script de Flowsery Analytics para redirigir los eventos a otra ruta. Por ejemplo, data-api="/flowsery-events" enviará los datos a /flowsery-events.

Importante: Si todos los visitantes aparecen en la misma ubicación en tu panel, confirma que el encabezado x-flowsery-real-ip se esté estableciendo con la IP real del visitante, no con la del servidor proxy, al reenviar solicitudes al endpoint /events de Flowsery Analytics.

4. Configura los rewrites de Firebase Hosting

Actualiza firebase.json para enrutar las rutas correspondientes a la función reverseProxy:

{
  "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. Modifica la etiqueta del script

Reemplaza el snippet original de Flowsery Analytics por la versión con proxy:

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

6. Despliega Hosting y Functions

Despliega tanto hosting como functions en un solo comando:

firebase deploy --only hosting,functions

Confirmar que funciona

Para validar que el proxy funciona correctamente:

1. Navega a tu sitio web.
2. Abre las herramientas de desarrollo del navegador y ve a la pestaña Network.
3. Verifica que las solicitudes de analítica se sirvan desde tu dominio y no desde analytics.flowsery.com.

Solución de problemas

Todos los visitantes aparecen desde la misma ubicación

Cuando todos los visitantes muestran una única ubicación geográfica, normalmente la región de tu servidor, el proxy no está reenviando correctamente las IP reales.

Resolución:

1. Asegúrate de que tu proxy incluya el encabezado x-flowsery-real-ip con la IP real del visitante, no con la IP del servidor, al reenviar solicitudes al endpoint /events de Flowsery Analytics.
2. Si la Cloud Function está detrás de otro proxy, como Cloudflare o Vercel, srcReq.ip será la IP del proxy ascendente, así que usa directamente cf-connecting-ip o x-real-ip.