Add Splitbee Analytics To Next.js

Tracking analytics has never been easier.

Most websites use Google Analytics to track users and events. This is a great way to get an idea of how your website is performing. However, there are some downsides to using Google Analytics.

  1. They sell your data
  2. It slows down your website speed slightly
  3. There is a significant learning curve

In this snippet, we will explore an alternative analytics solution called Splitbee Analytics.



Navigate to https://splitbee.io/ and sign up for a free account (no credit card required).


Add The Tracking Tag

Add the folling tag to the head of your website. In Next.js this is inside of _document.js.

<script async src="https://cdn.splitbee.io/sb.js"></script>
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends NextDocument {
    render() {
        return (
            <Html lang="en">
                    {/* Splitbee Analytics */}
                    <script async src="https://cdn.splitbee.io/sb.js"></script>
                    <Main />
                    <NextScript />

Go To Your Site

Navigate to your site and you should see analytics flow through your dashboard!


Advanced Usage

To get the most out of Splitbee, the Splitbee team recommends looking into event tracking and storing user properties. They allow you to do things like:

  • Track conversion events
  • Capture form data and attach it to a user
  • Assign data to a user, like their email address

Happy tracking!

Published on July 20, 2021 in


Written By Benjamin Carlson

Founder Coffeeclass

More Articles By Benjamin Carlson




Privacy Policy

© Copyright 2021, Carlson Technologies LLC. All Rights Reserved.

Powered by

Vercel Logo