Analytics

Privacy-friendly product analytics with Plausible.

Overview

Your app includes built-in support for Plausible Analytics, a lightweight, privacy-friendly alternative to Google Analytics. Plausible is:

Cookie-free: no consent banners needed
No cross-site tracking: visitors aren't followed from your app to anywhere else
Lightweight: under 1KB script, no impact on page speed
Open source: self-host or use their cloud service

Setup

Option 1: Plausible Cloud

Sign up at plausible.io
Add your domain in the Plausible dashboard
Set the environment variables:

VITE_PLAUSIBLE_DOMAIN="yourdomain.com"
VITE_PLAUSIBLE_SCRIPT_URL="https://plausible.io/js/script.js"

Option 2: Self-Hosted Plausible

Follow the Plausible self-hosting guide
Deploy Plausible alongside your app (or on a separate server)
Set the environment variables:

VITE_PLAUSIBLE_DOMAIN="yourdomain.com"
VITE_PLAUSIBLE_SCRIPT_URL="https://analytics.yourdomain.com/js/script.js"

How It Works

The analytics script is conditionally injected into the HTML <head> at build time. When VITE_PLAUSIBLE_DOMAIN is empty (the default), no script is loaded and no data is collected.

The script tag uses Plausible's defer attribute and data-domain configuration, so no additional client-side code is needed.

What Gets Tracked

By default, Plausible tracks:

Page views: which pages are visited
Referral sources: where visitors come from
Browser & OS: what devices are used
Country: geographic distribution (city-level detail is not collected)

Plausible does not track:

Individual users or sessions
Personal data or IP addresses
Cross-site browsing behavior

Custom Events (Optional)

To track custom events (button clicks, signups, etc.), use the Plausible JavaScript API:

// Track a custom event
window.plausible?.('Signup', { props: { plan: 'pro' } });

// Track a goal conversion
window.plausible?.('Purchase', { revenue: { currency: 'USD', amount: '19.00' } });

Add the TypeScript declaration to avoid type errors:

// src/client/types/plausible.d.ts
declare global {
  interface Window {
    plausible?: (event: string, options?: { props?: Record<string, string>; revenue?: { currency: string; amount: string } }) => void;
  }
}
export {};

Dashboard

Access your analytics dashboard at:

Cloud: https://plausible.io/yourdomain.com
Self-hosted: https://analytics.yourdomain.com/yourdomain.com