Add analytics to NextJS with Plausible.io

technologytutorial

Dimitar Stoev

What is Plausible ?

Plausible market itself as lightweight and open source web analytics. The authors can say it best

“We are dedicated to making web analytics more privacy-friendly. Our mission is to reduce corporate surveillance by providing an alternative web analytics tool which doesn’t come from the AdTech world. The full-time team consists of Uku Taht and Marko Saric. We are completely independent, self-funded and bootstrapped.“

by Plausible

Plausible is an incredible Google Analytics alternative that doesn’t collect personal information.

Installation with Plausible

The way to install Plausible to your Next.js is pretty straightforward and easy. The developers have made it simply perfect.

There are two options to get your Plausible Analytics running.

Next/Head of Document file.

Going on with the registration you will receive this script

<script async defer data-domain="<your-domain.com>" src="https://plausible.io/js/plausible.js"></script>

Custom `Document` file is needed to continue. The moment you have it running, add it to the Head

import Document, {Html, Head, Main, NextScript} from 'next/document'
 
class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <base href="/"></base>
                    <script async defer data-domain="<your-domain.com>" src="https://plausible.io/js/plausible.js"></script>
 
                </Head>
                <body>
                <Main/>
                <NextScript/>
                </body>
            </Html>
        )
    }
}
 
export default MyDocument

That’s all you have to do to set it up.

NextJS library

4lejandrito has made a great tool to connect your Plausible analytics to NextJS.

yarn add next-plausible

npm install next-plausible

Important: If you're using a version of NextJS bellow 11.1.0 use

next-plausible@2

Custom `App` has to be created and set up to use the method for all your pages.

import PlausibleProvider from "next-plausible";
 
function MyApp({ Component, pageProps }) {
  return 
  	<PlausibleProvider domain="<Your domain>">
  		<Component {...pageProps} />
  	</PlausibleProvider>
}
 
export default MyApp

Custom Events

Plausible allows us to track any kind of information. It could be likes of a post, counts, and any data you think it’s important

We can use the hook, they provide like that

import {usePlausible} from 'next-plausible'

export default PlausibleButton() {
    const plausible = usePlausible()
    return (
        <button onClick={() => plausible('customEventName')}>
            Send
        </button>
    )
}

Troubleshooting

Keep in mind, that as every tracking script, if a user has a tracking blocking extension - you won’t get any results.

I am pointing it out, because I spend whole 10 minutes, before I figured out why on Chrome it wasn’t working, but only in Firefox ( where, I didn’t have any privacy extensions installed )

Additional information could be found in the official docs here

Links

https://github.com/plausible/analytics