Getting Started with Plausible
Plausible is a privacy-focused analytics service that prioritizes compliance with regulations like GDPR.
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-plausibleNext, 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:
<head>
<PlausibleProvider
domain="<Your Domain>"
/>
</head>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!
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.
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.
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() {
plausible('<EventName>');
}
<button onClick={handleClick}>Sign Up</button>Once set up, custom events and goal conversions appear in the Plausible dashboard for easy analysis.
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.