Add Splitbee Analytics to Your Next.js App
I talk about Splitbee — a new analytics tool; and how to add it to your Next.js app.
Introduction
Analytics, for the most of us, does not have to be as complicated as Google Analytics. Splitbee takes a fresh approach to analytics and you’ll find reasons to appreciate it in addition to these:
- It has a clean, responsive and user-friendly UI with features like live updates and journey view
- It does not need additional setup for SPA routing
- It has the simplest onboarding process
However, unlike Google Analytics, Splitbee isn’t free. Unless you don’t have any visitors on your app, sooner or later, you will run into this message and your custom event data will be redacted:
You can learn more about their pricing here.
A Note About Next.js Rewrites
Next.js supports Rewrites, which enable you to remap URLs on-the-fly. By routing Splitbee communication through your own domain, you get to:
- Reduce DNS lookups
- Circumvent ad-blockers that prevent loading content from external domains
- Clean-up CSP header — from
connect-src https://hive.splitbee.io; script-src https://cdn.splitbee.io;toconnect-src 'self'; script-src 'self';
We will be configuring Rewrites in each of the two approaches below.
“Just Add Water” Approach
Add the script directly from Splitbee:
// ./pages/_document.tsx...<Head>
<script async src="https://cdn.splitbee.io/sb.js"></script>
</Head>...
You can now track events like so:
// Anywhereif ((window as any).splitbee) { const action: string = 'action';
const data: any = {}; (window as any).splitbee.track(action, data);}
You can set data against a user like so:
// Anywhereif ((window as any).splitbee) { const data: any = {}; (window as any).splitbee.user.set(data);}
A disadvantage of this approach is that it is possible the library is not loaded when track() or user.set() is invoked; thereby needing the if() wrap.
Configure Next.js Rewrite by pointing the script tag to relative paths instead:
// ./pages/_document.tsx...<Head>
<script async data-api="/sb-api" src="/sb.js"></script>
</Head>...
Then, add the Rewrite for those relative paths:
// ./next.config.jsconst rewrites = async () => [
{
destination: 'https://cdn.splitbee.io/sb.js',
source: '/sb.js'
},
{
destination: 'https://hive.splitbee.io/:slug',
source: '/sb-api/:slug'
}
];module.exports = {
rewrites
};
NPM Package Approach
Using the Splitbee NPM package is beneficial in several ways:
- It automatically makes the library available to the client
- It makes writing synchronous logic possible
- It provides typings to be used with TypeScript
Install the package from NPM:
// Commandnpm i @splitbee/web
Initialize Splitbee:
// ./pages/_app.tsximport splitbee from '@splitbee/web';
import type { AppProps } from 'next/app';
import { useEffect } from 'react';const MyApp: (props: AppProps) => JSX.Element = ({ Component, pageProps }: AppProps): JSX.Element => { useEffect((): void => { splitbee.init(); }, []); return <Component {...pageProps} />}
You can now track events like so:
// Anywhereimport splitbee from '@splitbee/web';const action: string = 'action';
const data: any = {};splitbee.track(action, data);
You can set data against a user like so:
// Anywhereimport splitbee from '@splitbee/web';const data: any = {};splitbee.user.set(data);
Configure Next.js Rewrite by first passing a configuration object of relative paths to init():
// ./pages/_app.tsximport splitbee from '@splitbee/web';
import type { AppProps } from 'next/app';
import { useEffect } from 'react';const MyApp: (props: AppProps) => JSX.Element = ({ Component, pageProps }: AppProps): JSX.Element => { useEffect((): void => { splitbee.init({
apiUrl: '/sb-api',
scriptUrl: '/sb.js'
}); }, []); return <Component {...pageProps} />}
Then, add the Rewrite for those relative paths:
// ./next.config.jsconst rewrites = async () => [
{
destination: 'https://cdn.splitbee.io/sb.js',
source: '/sb.js'
},
{
destination: 'https://hive.splitbee.io/:slug',
source: '/sb-api/:slug'
}
];module.exports = {
rewrites
};
Cheers!
