Add analytics to NextJS with Plausible.io
Tags: tutorial, javascript, nextjs, plausible
Published: 2022-06-23 20:36:34



## 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>
```
[Custom `Document`](https://nextjs.org/docs/advanced-features/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](https://github.com/4lejandrito/next-plausible) 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`](https://nextjs.org/docs/advanced-features/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](https://plausible.io/docs/troubleshoot-integration)

**Links**
https://github.com/plausible/analytics