TheLazy.Dev
Portfolio GitHub

Blog

tutorial |javascript |nextjs |plausible

Add analytics to NextJS with Plausible.io

dimitarstbc

Dimitar Stoev

Posted on June 23, 2022

Add analytics to NextJS with Plausible.io

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.

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
dimitarstbc
Dimitar Stoev

Posted on June 23, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Add analytics to NextJS with Plausible.io
tutorial Add analytics to NextJS with Plausible.io

June 23, 2022