Next.js Proxy

You can use Next.js (version 9.5+) to route all analytics traffic through your own server and domain. This will reduce DNS lookups, as well as prevent Adblockers from blocking requests.

1. Add rewrites to next.config.js

Add following rewrite rules into the file:

module.exports = {
  async rewrites() {
    return [
	    {
	      source: "/bee.js",
	      destination: "https://cdn.splitbee.io/sb.js",
	    },
	    {
	      source: "/_hive/:slug",
	      destination: "https://hive.splitbee.io/:slug",
	    },
	  ];
  },
}

Find the Next.js documentation here

2. Adapt the Splitbee script tag

You will need to adapt the script tag to reflect the changes and use your own proxy.

<script async data-api="/_hive" src="/bee.js"></script>

data-api sets the endpoint for all tracking calls. We are using /_hive in this example.

src needs to point to the Splitbee JS file that is proxied through your servers. We are using /bee.js in this example. Feel free to adapt those paths & filenames.

Using the JavaScript Library

When using the @splitbee/web library, you can provide the custom endpoint and the URL to the proxied script in the init function.

useEffect(() => {
  splitbee.init({
    scriptUrl: "/bee.js",
    apiUrl: "/_hive",
  })
}, [])

All set. You can check the network tab inside DevTools to verify that all traffic indeed passes through your domain.