party-popper

Trackflow is in Beta. Take advantage of our pre-launch pricing!

Trackflow

Proxy Through Next.js

Proxying analytics through your own domain helps avoid ad blockers and gives you more control over your data. This guide explains how to proxy Trackflow through your Next.js application.

Why Proxy Through Next.js?

Ad blockers often block third-party analytics scripts, including Trackflow. By proxying the tracking script through your own domain, you can avoid ad blockers and ensure accurate analytics data.

Method 1: Using Next.js Rewrites

Next.js provides a built-in feature called rewrites that allows you to proxy requests to another server. This is the easiest method and doesn't require a custom server.

Step 1: Configure next.config.js

Add the following configuration to your next.config.js file:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/analytics/track.js',
        destination: 'https://www.trackflow.dev/track.js'
      },
      {
        source: '/api/analytics',
        destination: 'https://www.trackflow.dev/api/analytics'
      }
    ]
  }
}

Step 2: Update your tracking script

Replace your current tracking script with the proxied version:

<script
  defer
  data-website-id="your-website-id"
  src="/analytics/track.js"
></script>

Notice that the src attribute now points to your own domain instead of directly to Trackflow.

Testing Your Proxy

To verify that your proxy is working correctly:

  1. Deploy your site with the proxied script
  2. Visit your website and perform some actions
  3. Check your Trackflow dashboard to see if events are being recorded
  4. Use browser developer tools to ensure requests to the analytics endpoints are going through your domain

If everything is set up correctly, you should see analytics data showing up in your Trackflow dashboard, even if ad blockers are enabled.

Need more help?

Can't find what you're looking for in our documentation? Our support team is here to help you.