Add splitbee for analytics

splitbee is a powerful and easy-to-use analytics platform. You can use it to track the activity and get insights on how your users are interacting with your app. You can start for free and they have really affordable plans if you want to go further.

Adding splitbee to your supastarter app is easily done in a few steps:

Sign in to splitbee and create a new project on splitbee. To do so, simply enter a name and the url of your site.

In your projects root run the following command to install the splitbee npm package:

npm i -S @splitbee/web

Then open the /pages/_app.tsx file and add the following code to the App function:

useEffect(() => {
  if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
    splitbee.init({
      scriptUrl: '/bee.js',
      apiUrl: '/_hive',
      disableCookie: true, // disable cookies for privacy reasons (set this to false if you want to track with cookies)
    });
  }
}, []); // eslint-disable-line react-hooks/exhaustive-deps

Lastly you need to add the following lines to the redirects config in your /next.config.js file:

const nextConfig = {
  // ...
  async redirects() {
    return [
      // ...
      {
        source: '/bee.js',
        destination: 'https://cdn.splitbee.io/sb.js',
        permanent: true,
      },
      {
        source: '/_hive/:slug',
        destination: 'https://hive.splitbee.io/:slug',
        permanent: true,
      },
    ];
  },
};

Now deploy the changes and visit your site. After that you should see the the first data in your splitbee analytics dashboard.

splitbee offers a lot more features like tracking custom user events and automations. To learn more check out the offical splitbee documentation.