Skip to main content
Analytics tell you what people do in your app. In this repo, analytics are provider-agnostic, which means the app can send the same events to one provider or multiple providers without changing feature code.

What Analytics Mean Here

At a basic level, analytics answer questions like:
  • how many people visited the app
  • which pages they opened
  • which buttons they clicked
  • which flows they completed
In this repo, analytics are loaded once at the app root and then used through shared helper functions. That means your app code does not need to call PostHog, Plausible, or DataFast directly.
Meta Ads attribution is separate from this analytics layer. If you need Meta Pixel plus Conversions API checkout tracking, read the Meta Ads guide instead of adding Meta-specific code to the shared analytics helpers.

What The Repo Already Gives You

The analytics system includes:
  • an analytics provider at the app root
  • shared event helpers
  • shared pageview tracking
  • support for one provider or multiple providers
  • a clean disabled mode with none
The main shared helpers are:
  • trackAnalyticsEvent()
  • trackAnalyticsPageview()
  • identifyAnalyticsUser()

Choose Your Analytics Provider

One Provider

NEXT_PUBLIC_ANALYTICS_PROVIDER=posthog

Multiple Providers

NEXT_PUBLIC_ANALYTICS_PROVIDER=posthog,datafast

Disable Analytics

NEXT_PUBLIC_ANALYTICS_PROVIDER=none
If you are a beginner, start with one provider first. Get that working, then add a second provider later if you need it.

Which Provider Should You Pick?

PostHog

Good if you want:
  • full product analytics
  • more advanced tracking later
  • one strong default provider
Required env vars:
NEXT_PUBLIC_ANALYTICS_PROVIDER=posthog
NEXT_PUBLIC_POSTHOG_KEY=...
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Plausible

Good if you want:
  • simpler privacy-friendly analytics
  • lightweight pageview tracking
  • a smaller tool than PostHog
Required env vars:
NEXT_PUBLIC_ANALYTICS_PROVIDER=plausible
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC=https://plausible.io/js/script.js
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com
Optional Plausible settings supported by the repo:
NEXT_PUBLIC_PLAUSIBLE_HOST=https://plausible.io
NEXT_PUBLIC_PLAUSIBLE_ENDPOINT=https://plausible.io/api/event
NEXT_PUBLIC_PLAUSIBLE_CAPTURE_LOCALHOST=false
NEXT_PUBLIC_PLAUSIBLE_AUTO_CAPTURE_PAGEVIEWS=true
NEXT_PUBLIC_PLAUSIBLE_HASH_BASED_ROUTING=false
NEXT_PUBLIC_PLAUSIBLE_CUSTOM_PROPERTIES={"app":"anotherwrapper"}

DataFast

Good if you want:
  • basic pageviews and goals
  • a small setup surface
  • lightweight analytics
Required env vars:
NEXT_PUBLIC_ANALYTICS_PROVIDER=datafast
NEXT_PUBLIC_DATAFAST_WEBSITE_ID=...
Optional DataFast settings:
NEXT_PUBLIC_DATAFAST_HOST=https://app.datafa.st
NEXT_PUBLIC_DATAFAST_DOMAIN=yourdomain.com
NEXT_PUBLIC_DATAFAST_ALLOW_LOCALHOST=false

How To Set It Up

  1. Create an account with the analytics provider you want
  2. Create a site/project inside that provider
  3. Copy the provider keys or script settings
  4. Add the env vars to .env.local
  5. Restart the app
  6. Open the app and browse a few pages
  7. Confirm the events appear in the provider dashboard

How The Repo Is Wired

The main files are:
  • lib/analytics/provider.tsx
  • lib/analytics/client.ts
  • lib/analytics/providers/*
That is why the rest of the app can stay clean and keep using shared helpers.

Verification Checklist

Your analytics setup is working if:
  • the provider script loads
  • pageviews appear in the dashboard
  • custom events appear after you trigger tracked actions

Common Mistakes

  • typo in NEXT_PUBLIC_ANALYTICS_PROVIDER
  • forgetting to restart after editing env vars
  • wrong Plausible domain
  • missing DataFast website ID
  • trying multiple providers before one provider works

Meta Ads

Read the separate guide for optional Meta checkout attribution.