Privacy-Focused Google Analytics Alternative with Plausible and Next.js

Adding basic analytics to your website or app is essential to gauge performance and detect usability issues throughout your app’s lifespan. If you’re an existing Google Analytics user, you may be facing the challenging migration process to Google Analytics 4 (GA4). The good news is that there are many alternatives for tracking your site’s metrics. In this blog post, we’ll explore how to integrate Plausible with a Next.js 13 app using the App Router.

Table of Contents

YouTube Preview
View on YouTube

Getting Started with Plausible

Plausible is a privacy-focused analytics service that prioritizes compliance with regulations like GDPR.

Plausible Analytics website

To get started, sign up for an account and begin their free trial. Their base plan starts at $9/month and includes up to 50 websites, making it ideal for managing multiple sites.

After signing up, click “Add Website” and add your desired domain. Once added, Plausible provides a JavaScript snippet for integration, but we’ll use a different solution for setting Plausible up with our app.

Integrating Plausible with Next.js

While Plausible doesn’t have an official integration with Next.js, the community provides a package named next-plausible to streamline the integration process. To begin, install the package:

npm install next-plausible

Next, you can follow the package’s instructions for adding Plausible tracking to your app, either through the App Router or using a layout.

Setting up Plausible with Next.js App Router

First, Import PlausibleProvider from next-plausible inside of app/layout.tsx:

import PlausibleProvider from 'next-plausible'

Then, add the PlausibleProvider inside of a <head> tag in the layout:

    domain="<Your Domain>"

By default, the integration only tracks in production mode to avoid sending false data during local development. However, you can temporarily enable tracking on localhost by setting the trackLocalhost and enabled properties to true. Ensure these are turned off before deploying to production!

Data trickling in to analytics dashboard

Now that the script is integrated, any page visits will be tracked automatically. For most users, this is all that’s needed to monitor visitor metrics, such as visit duration, referral sources, and pages visited.

Goals and Custom Events

Plausible offers more advanced features like goal conversion tracking and custom events.

Goal conversions can be set up by clicking “Set up goals” and choosing either a custom event or a page view.

Adding Pageview goal

For example, setting the About page as a goal will track every visit to the /about route in the conversion dashboard. This is especially useful for tracking signup funnels or user-specific actions within your app.

Goal conversion for pageview showing up in dashboard

To track custom events, add a goal and choose “Custom event.” Then, create a unique event name to associate with the custom event.

Triggering these events can be accomplished using either CSS class names or custom JavaScript.

For example, you could add a CSS class to a button element to trigger an event on click:

<button className="plausible-event-name=<EventName>">Sign Up</button>

Alternatively, you could use a custom JavaScript function to send events using the usePlausible hook:

import { usePlausible } from 'next-plausible';

const plausible = usePlausible();

function handleClick() {

<button onClick={handleClick}>Sign Up</button>

Once set up, custom events and goal conversions appear in the Plausible dashboard for easy analysis.

Custom Events showing up in Goal Conversions under dashboard

Google Analytics Alternatives

Migrating away from Google Analytics may seem daunting, but there is a variety of feature-rich alternatives to provide similar functionality, including Plausible, Fathom, and Beam. Plausible’s privacy focus and straightforward integration with Next.js makes it an excellent choice for many developers.

Remember to remove the localhost and enabled properties when finished setting up to avoid sending data to Plausible while working in development mode.

To take your custom events further, consider more advanced event tracking, such as outbound link tracking and custom property values, to further enhance your analytics capabilities.