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 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
Top comments (0)