Dirstarter uses Plausible for privacy-friendly analytics tracking. Plausible provides both automatic pageview tracking and custom event tracking, all while being GDPR-compliant and requiring no cookie consent.

Why Plausible?

Plausible is a lightweight, privacy-focused analytics tool that provides:

• Privacy-friendly: No cookies, no personal data collection
• GDPR compliant: By default, no consent banners needed
• Lightweight script: Under 1KB, doesn't slow down your site
• Ad blocker bypass: Built-in proxy support
• Self-hosted support: Use your own Plausible instance
• Custom events: Track user interactions and conversions
• Server-side API: Query analytics data programmatically

Setup

1. Create a Plausible Account

1. Sign up at plausible.io
2. Add your website to the dashboard
3. Get your API key from Settings (optional, only needed for admin dashboard)

2. Environment Variables

Add the following environment variables to your .env file:

NEXT_PUBLIC_PLAUSIBLE_URL=https://plausible.io
PLAUSIBLE_API_KEY=your_api_key  # for admin dashboard analytics

3. Installation

The boilerplate comes with next-plausible already installed. No additional installation is needed - just configure your environment variables.

Configuration

Plausible is automatically configured in the boilerplate:

Provider Setup

The PlausibleProvider wraps your web application:

import PlausibleProvider from "next-plausible"

export default function ({ children }) {
  return (
    <PlausibleProvider
      domain={siteConfig.domain}
      customDomain={env.NEXT_PUBLIC_PLAUSIBLE_URL}
    >
      {children}
    </PlausibleProvider>
  )
}

Proxy Configuration

The proxy helps bypass ad blockers and supports self-hosted instances:

import { withPlausibleProxy } from "next-plausible"

const withPlausible = withPlausibleProxy({
  customDomain: process.env.NEXT_PUBLIC_PLAUSIBLE_URL
})

Usage

Automatic Pageview Tracking

The PlausibleProvider automatically tracks pageviews on all route changes. No additional code is needed - it works out of the box.

Custom Event Tracking

Use the useTrackEvent hook to track custom events:

import { useTrackEvent } from "~/hooks/use-track-event"

const MyComponent = () => {
  const trackEvent = useTrackEvent()

  const handleClick = () => {
    trackEvent("button_click", {
      buttonName: "signup",
      page: "homepage"
    })
  }

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

Built-in Events

The boilerplate automatically tracks the following events:

• Newsletter subscriptions (subscribe_newsletter)
• Tool submissions (submit_tool)
• External link clicks (dynamic event names)

Development Mode

In development, events are logged to the console instead of being sent to Plausible. This prevents polluting your analytics with development data:

// In development
trackEvent("button_click", { page: "home" })
// Console output: "Tracking event: button_click { page: "home" }"

Admin Dashboard Integration

If you set the PLAUSIBLE_API_KEY environment variable, your admin dashboard will display visitor metrics:

• 30-day visitor trends
• Total visitors and daily averages
• Visual charts with Next.js caching for performance

API Functions

The boilerplate includes server-side functions to query Plausible:

import { getTotalVisitors, getPageAnalytics } from "~/lib/analytics"

// Get visitor count over time
const { results, totalVisitors, averageVisitors } = await getTotalVisitors()

// Get metrics for a specific page
const { visitors, pageviews } = await getPageAnalytics("/pricing")

These functions use the Plausible API to fetch real-time analytics data.