What is Plausible?
Plausible considers itself a privacy-friendly alternative to Google Analytics.
While Google Analytics’ recent GA4 claims to be privacy-friendly, people still aren’t quite sure how accurate it is with full compliance of regulations like GDPR.
But beyond the comparison, Plausible at its most basic gives you just what you need, while being able to add more customization of what you track including custom events and goals.
It’s all wrapped up in a simple and pretty easy to use UI avoiding the complexity of other analytics tools.
What about Google Analytics?
Aside from the privacy issues, the release of GA4 somewhat left a bad taste in the community’s mouth given the UX seemed to fall short of what the original Universal Analytics provided.
I personally used to enjoy spending time digging through analytics reports, finding interesting insights, and tracking usability concerns, but the GA4 UI is just complicated and half-baked.
While this is a bit subjective, it’s worth exploring other options that allow you to be more productive rather than fighting with the tools you use.
What are we going to build?
We’ll see how we can easily integrate Plausible into a Next.js app by using the Plausible-recommended Next Plausible community integration.
Once set up, we’ll add some custom events and a goal to customize what insights we’re gaining from our traffic.
Note: For this tutorial, we’ll assume you have set up a new Plausible account, which while paid, comes with a 30-day trial.
Step 1: Installing & Configuring Plausible in Next.js
To get started, we’ll first install Next Plausible by running:
npm install next-plausibleOnce the package is configured, we can import the PlausibleProvider which helps us easily wire up Plausible into our application.
The way that this will work is the PlausibleProvider will wrap the entire application, allowing for the ability to keep track of page changes, as well as give us the ability to fire events throughout the application using the API.
Inside of your root layout file at app/layout.tsx, import the following:
import PlausibleProvider from 'next-plausible'Then you’ll either need to create a new <head> tag, or if you have an existing one use that, then add:
<head>
<PlausibleProvider domain="<Your Website Domain>" />
</head>Now if you notice, the prop domain needs to be configured to your websites domain. This will be the same domain of the website that you configure inside of Plausible, which we’ll do next.
Step 2: Setting up a website in Plausible
With our app set up and ready to track, we need to now add our site inside of Plausible itself.
For this part, we’ll assume that you’ve already signed up for Plausible (not free, but they have a free trial).
But once logged in, if this is your first time using Plausible, you’ll be asked to add your website details (or if not the first time, click Add website).
Here we’ll want to add our domain and just the domain (or subdomain), then click Add snippet.
Plausible will then offer a JavaScript snippet to add to your site. Because we already set up the integration in the last step, we can skip this! So go ahead and click Start collecting data.
Where now, we’ll see a page that says it’s waiting for data to come in.
And this point, you can load up your website on your deployed website, refresh a few times, and if you look in your Network tab, you should see Plausible requests.
As soon as Plausible detects those requests, you should be redirected to your new dashboard!
Now, if you haven’t deployed yet, you have the option of enabling local traffic to be collected, which is off by default.
<PlausibleProvider trackLocalhost enabled />It’s turned off by default to prevent you and your coworkers from sending data to Plausible while you’re working on building the project, but it’s handy to enable for testing purposes. Just be sure to turn this off when you’re done.
You might also notice that, if you’re using an ad blocker, it hasn’t worked yet. I personally use uBlock and I needed to turn it off before the data would be sent.
The nice thing is you can proxy your analytics requests to make sure they’re getting through.
Step 3: Proxying Analytics Requests to Avoid Adblockers
Ad blockers know about Plausible so they block the requests they find being made, but fortunately the Next.js integration comes with an easy way to create a proxy.
Now before you set this up, you should be aware that you’ll now be using your own endpoint to make the additional request to Plausible, meaning you’ll get charged for the invocations of the serverless function.
But with that said, let’s set it up.
Inside of next.config.js we can wrap our config with withPlausibleProxy:
import { withPlausibleProxy } from 'next-plausible';
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default withPlausibleProxy()(nextConfig);Here we’re wrapping our config with withPlausibleProxy.
Now, if we try to test this locally, it won’t work. Apparently the rewriting that occurs just doesn’t happen in the dev lifecycle.
But if we deploy that change, simple as that, we should now see the event endpoint coming from our deployed project!
Step 4: Sending Custom Events with Plausible
As a last feature that we’ll look at, we can also send custom events.
This is handy if we want to track mouse clicks or special interactions that wouldn’t be picked up by simple page views.
To do this, we can use the usePlausible hook, which gives us function that we can fire for our tracking.
Now the caveat with this is because it’s a hook, we’re going to need to track this clientside. There are different approaches for how we can handle this, but for simplicity sake for this tutorail, I’m going to just opt the page into a client component with:
"use client";But in your application, you’d likely want to abstract the component, create some sort of wrapper that tracks the clicks, or generally just something that avoids you having to opt your whole application into a client component.
After updating my page to a client component, if I set up a new simple button to test this out with, for instance:
<p>
<button>Track me!</button>
</p>I can first import the hook:
import { usePlausible } from 'next-plausible'Create a new instance of the hook:
const plausible = usePlausible()Then simply fire my event whenever someone clicks the button:
<button onClick={() => plausible('myEvent')}>
Track me!
</button>And if I try to test this out, as soon as I click it on my deployed app, I can see the event fire.
Now this won’t just simply show up right away in the dashboard, we need to create an Event Goal to listen for this.
Inside of Plausible, under Goal Conversions, click Set up goals.
Next click Add goal.
Then add the custom event name you passed in to the plausible function and click Add goal.
The nice thing is, Plausible was already tracking that event, so if we go back to the bottom of our dashboard, we should now see our goal!
What can we do next?
Add more custom events
Custom events are important for tracking the meaningful interactions of your website or application, so be sure to intentionally figure out what interactions you want to track and add custom events upon those interactions.