Proxying Flowsery Analytics with Vue.js

Route Flowsery Analytics through your Vue.js development server to prevent adblocker interference and capture more accurate visitor data.

1. Set Up the Vue.js Dev Server Proxy

If you are using Vue CLI, update your vue.config.js with the following proxy rules:

module.exports = {
  devServer: {
    proxy: {
      '/js/script.js': {
        target: 'https://analytics.flowsery.com',
        changeOrigin: true,
        pathRewrite: {
          '^/js/script.js': '/js/script.js',
        },
      },
      '/api/events': {
        target: 'https://analytics.flowsery.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api/events': '/events',
        },
      },
    },
  },
};

Note: If your project already has an /api/events route, add data-api to the Flowsery Analytics script tag to redirect event data elsewhere. For example, data-api="/flowsery-events" routes data to /flowsery-events instead.

2. Production Configuration: Web Server Setup

Nginx

location /js/script.js {
    proxy_pass https://analytics.flowsery.com/js/script.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/events {
    proxy_pass https://analytics.flowsery.com/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-flowsery-ip $remote_addr;

    # Allow POST requests
    proxy_method POST;
    proxy_pass_request_body on;
}

Apache

<Location "/js/script.js">
    ProxyPass https://analytics.flowsery.com/js/script.js
    ProxyPassReverse https://analytics.flowsery.com/js/script.js
    Header set Cache-Control "public, max-age=31536000"
</Location>

<Location "/api/events">
    ProxyPass https://analytics.flowsery.com/events
    ProxyPassReverse https://analytics.flowsery.com/events
    RequestHeader set x-flowsery-ip %{REMOTE_ADDR}e
</Location>

Important: If every visitor appears to be in the same location in your dashboard, confirm that the x-flowsery-ip header is set to the real visitor IP (not the proxy server IP) when forwarding requests to the Flowsery Analytics /events endpoint.

3. Modify the Script Tag

Replace the original Flowsery Analytics snippet with the proxied version:

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

4. Deploy

After deploying your changes, the proxy configuration activates automatically.

Confirming It Works

To validate that the proxy is functioning correctly:

1. Navigate to your website
2. Open your browser's developer tools and switch to the Network tab
3. Verify that analytics requests are served from your domain rather than analytics.flowsery.com

For production, using a dedicated web server (Nginx or Apache) is recommended over relying on the development server proxy.

Troubleshooting

Every visitor appears from the same location

When all visitors show a single geographic location (typically your server's region), the proxy is not forwarding real visitor IPs correctly.

Resolution:

1. Ensure your proxy includes the x-flowsery-ip header containing the actual visitor IP address (not the server IP) when forwarding requests to the Flowsery Analytics /events endpoint