Proxy de Flowsery Analytics con Vue.js

Enruta Flowsery Analytics a través de tu servidor de desarrollo de Vue.js para evitar la interferencia de los adblockers y capturar datos de visitantes más precisos.

1. Configura el proxy del servidor de desarrollo de Vue.js

Si usas Vue CLI, actualiza tu vue.config.js con las siguientes reglas de proxy:

JavaScript

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

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

2. Configuración de producción: servidor web

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

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>

Importante: Si todos los visitantes aparecen en la misma ubicación en tu panel, confirma que 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.

3. Modifica la etiqueta del script

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

HTML

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

4. Despliega

Después de desplegar tus cambios, la configuración del proxy se activa automáticamente.

Confirmar que funciona

Para validar que el proxy funciona correctamente:

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

Para producción, se recomienda usar un servidor web dedicado, como Nginx o Apache, en lugar de depender del proxy del servidor de desarrollo.

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:

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.
Si el servidor web está detrás de otro proxy, como Cloudflare o Vercel, $remote_addr o %{REMOTE_ADDR}e serán la IP del proxy ascendente. Usa directamente $http_cf_connecting_ip, %{HTTP:CF-Connecting-IP} o $http_x_real_ip.