Add analytics to NextJS with Plausible.io
Over the past 2 years, I've worked with small companies, big ones and start-ups to successfully help them reach their full potential and attract new customers.
My focus is improving my clients businesses, through enjoyable and meaningful software. I specialize in responsive and automotive websites and applications.
๐๐๐ข๐จ๐ง I am a driven front-end developer with get-it-done, on-time and high-quality product spirit!
๐ง๐๐๐๐ก๐ข๐๐ข๐๐๐๐ฆ React and Angular are the tools, I am most comfortable with. I also work with Next.js Vue.js, plain JavaScript, HTML, CSS and express.js. My plan for the future is to continue with the front end development and expand into mobile development with Flutter and React Native.
๐๐ซ๐ฃ๐๐ฅ๐๐๐ก๐๐ I have worked and managed a lot of people with a diverse background. Thanks to that, my team working skills are in a good fit and I became a great problem solver.
My first code I wrote three years ago for my C# Unity game. I lunched it, made some other games, got a lot of downloads and learned enough to feel confident in front of the IDE. A year later I decited to step in the front end world and I am still developing till today.
๐๐ข๐ก๐ง๐๐๐ง Want to hear me? I'd love to chat!
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
Links
