Add Splitbee Analytics To Next.js

Add Splitbee Analytics To Next.js

2 min read · 247 words · Shared July 20, 2021 by

Article Summary: Tracking analytics has never been easier.

Introduction

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 (July 20, 2021)

Related Tags

    #splitbee

Related Posts

Next.js Progressive Web App · 20 days ago
useState() Hook in Next.JS - React Hooks · 24 days ago
Add Algolia's InstantSearch to Next.js - A Quickstart · December 17, 2021
Next/Image Doesn't Fill Parent Div! · November 1, 2021
Generate A Dynamic Sitemap In Next.js Website · September 27, 2021

Email Newsletter

On This Page

Introduction

Register

Add The Tracking Tag

Go To Your Site

Advanced Usage

View Related Posts

20 days ago

nextjs-light.png

Next.js Progressive Web App

24 days ago

react.png

useState() Hook in Next.JS - React Hooks

December 17, 2021

algolia.png

Add Algolia's InstantSearch to Next.js - A Quickstart

November 1, 2021

nextjs-light.png

Next/Image Doesn't Fill Parent Div!

September 27, 2021

nextjs-light.png

Generate A Dynamic Sitemap In Next.js Website

September 26, 2021

firebase.png
Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

August 9, 2021

react.png

useEffect() Hook in Next.JS - React Hooks

July 10, 2021

nextjs-light.png

Next.js Crash Course

May 10, 2021

nextjs-light.png

Next.js + MDX Pages Quickstart

April 29, 2021

google-analytics.png

Add Google Analytics To Next.js Website

April 15, 2021

firebase.png

Connect Firebase To Next.js


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


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