splitbee.png

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.

1

Register

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

2

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>
_document.js
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'

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

Go To Your Site

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

4

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 (4 months ago) in

#splitbee

View Related Posts

4 months ago

splitbee.png

Add Splitbee Analytics To Next.js

6 months ago

google-analytics.png

Add Google Analytics To Next.js Website

1 month ago

nextjs-light.png

Generate A Dynamic Sitemap In Next.js Website

3 days ago

nextjs-light.png

Next/Image Doesn't Fill Parent Div!

6 months ago

nextjs-light.png

Next.js + MDX Pages Quickstart

3 months ago

react.png

useEffect() Hook in Next.JS - React Hooks

Was this snippet helpful?


Written By Benjamin Carlson

Founder coffeeclass.io

More Articles By Benjamin Carlson


Legal

Terms

Disclaimer

Privacy Policy

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

Powered by

Vercel Logo