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
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com
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 Plausible provider is pre-configured in app/(web)/layout.tsx. It reads NEXT_PUBLIC_PLAUSIBLE_DOMAIN and NEXT_PUBLIC_PLAUSIBLE_URL from your environment variables.

Proxy Configuration

The proxy is configured in next.config.ts via withPlausibleProxy() to avoid ad blockers.

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.

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 { getPlausibleVisitors, getPlausiblePageviews } from "~/lib/analytics"

// Get visitor count over time (returns Record<string, number> grouped by day)
const visitorsByDate = await getPlausibleVisitors("30d")

// Get pageviews for a specific page (returns number)
const pageviews = await getPlausiblePageviews("/pricing", "30d")

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