Proxy do Flowsery Analytics com Vue.js

Encaminhe o Flowsery Analytics através do seu servidor de desenvolvimento Vue.js para evitar interferência de bloqueadores de anúncios e capturar dados de visitantes mais precisos.

1. Configurar o proxy no servidor de desenvolvimento Vue.js

Se estiver a usar Vue CLI, atualize o seu vue.config.js com as seguintes regras de proxy:

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: Se o seu projeto já tiver uma rota /api/track, adicione data-api à tag de script do Flowsery Analytics para encaminhar os dados dos eventos para outro caminho. Por exemplo, data-api="/flowsery-events" encaminha os dados para /flowsery-events.

2. Configuração de produção: 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

<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: Se todos os visitantes aparecerem na mesma localização no seu painel, confirme que o cabeçalho x-flowsery-real-ip está definido com o IP real do visitante (e não com o IP do servidor proxy) ao encaminhar pedidos para o endpoint /events do Flowsery Analytics.

3. Modificar a tag de script

Substitua o snippet original do Flowsery Analytics pela versão com proxy:

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

4. Fazer deploy

Depois de fazer deploy das suas alterações, a configuração do proxy é ativada automaticamente.

Confirmar que funciona

Para validar que o proxy está a funcionar corretamente:

1. Navegue até ao seu site
2. Abra as ferramentas de desenvolvedor do navegador e mude para o separador Network
3. Verifique que os pedidos de analytics são servidos a partir do seu domínio em vez de analytics.flowsery.com

Para produção, usar um servidor web dedicado (Nginx ou Apache) é recomendado em vez de depender do proxy do servidor de desenvolvimento.

Resolução de problemas

Todos os visitantes aparecem da mesma localização

Quando todos os visitantes mostram uma única localização geográfica (normalmente a região do seu servidor), o proxy não está a encaminhar corretamente os IPs reais dos visitantes.

Resolução:

1. Garanta que o seu proxy inclui o cabeçalho x-flowsery-real-ip com o endereço IP real do visitante (e não o IP do servidor) ao encaminhar pedidos para o endpoint /events do Flowsery Analytics.
2. Se o servidor web estiver atrás de outro proxy (Cloudflare, Vercel, etc.), $remote_addr / %{REMOTE_ADDR}e será o proxy a montante. Use diretamente $http_cf_connecting_ip / %{HTTP:CF-Connecting-IP} ou $http_x_real_ip.