Proxying Flowsery Analytics with Next.js

Route Flowsery Analytics through your own domain in a Next.js application to prevent adblocker interference and capture more accurate visitor data.

1. Configure Rewrites

Add or update your next.config.js at the project root with the following rewrite rules:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/js/script.js',
        destination: 'https://analytics.flowsery.com/js/script.js',
      },
      {
        source: '/api/events',
        destination: 'https://analytics.flowsery.com/events',
      },
    ];
  },
};

Next.js handles proxying the script and the event collection endpoint automatically, including proper IP forwarding.

If your project already uses an /api/events route, you can specify a different path by adding data-api to the Flowsery Analytics script tag. For instance, data-api="/flowsery-events" will direct event data to /flowsery-events rather than /api/events.

2. Modify the Script Tag

Swap out the original Flowsery Analytics snippet for the proxied version:

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

3. Deploy

Once deployed, the rewrite rules take effect 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

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