> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anotherwrapper.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Analytics

> Product analytics with PostHog, Plausible, and DataFast

<Info>
  Analytics tell you what people actually do in your app. In this repo, analytics are provider-agnostic -- the app sends the same events to one or multiple providers without changing any feature code.
</Info>

## What You Get Out of the Box

The analytics system is already wired up with:

* An analytics provider loaded at the app root
* Shared event helpers: `trackAnalyticsEvent()`, `trackAnalyticsPageview()`, `identifyAnalyticsUser()`
* Support for one provider, multiple providers, or none at all
* A clean disabled mode with `none`

Your app code never calls PostHog, Plausible, or DataFast directly. It uses the shared helpers and the right provider gets the data.

<Warning>
  Meta Ads attribution is separate from this analytics layer. If you need Meta Pixel + Conversions API checkout tracking, read the [Meta Ads guide](/services/meta-ads) instead.
</Warning>

## Pick Your Provider

<Tabs>
  <Tab title="PostHog">
    **Best for:** Full product analytics, event tracking, and advanced features like session replay and feature flags.

    ```env theme={null}
    NEXT_PUBLIC_ANALYTICS_PROVIDER=posthog
    NEXT_PUBLIC_POSTHOG_KEY=your-posthog-key
    NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
    ```

    PostHog is the most full-featured option. If you only want one analytics tool and you want it to grow with you, pick this.
  </Tab>

  <Tab title="Plausible">
    **Best for:** Privacy-friendly, lightweight pageview tracking without the complexity.

    <CodeGroup>
      ```env Required theme={null}
      NEXT_PUBLIC_ANALYTICS_PROVIDER=plausible
      # Configure one of these:
      NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC=https://plausible.io/js/script.js
      # or NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com
      ```

      ```env Optional theme={null}
      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"}
      ```
    </CodeGroup>

    Plausible is great if you want something simpler and more privacy-conscious than PostHog.
  </Tab>

  <Tab title="DataFast">
    **Best for:** Basic pageviews and goals with minimal setup.

    <CodeGroup>
      ```env Required theme={null}
      NEXT_PUBLIC_ANALYTICS_PROVIDER=datafast
      NEXT_PUBLIC_DATAFAST_WEBSITE_ID=your-website-id
      NEXT_PUBLIC_DATAFAST_DOMAIN=yourdomain.com
      ```

      ```env Optional theme={null}
      NEXT_PUBLIC_DATAFAST_HOST=https://datafa.st
      NEXT_PUBLIC_DATAFAST_ALLOW_LOCALHOST=false
      ```
    </CodeGroup>

    <Tip>
      If your app lives on a subdomain like `app.yourdomain.com` but you want all traffic to roll up into the main website, keep the same website ID and set `NEXT_PUBLIC_DATAFAST_DOMAIN=yourdomain.com`.
    </Tip>
  </Tab>
</Tabs>

## Using Multiple Providers

Want more than one? Just comma-separate them:

```env theme={null}
NEXT_PUBLIC_ANALYTICS_PROVIDER=posthog,datafast
```

Want none? Set it to:

```env theme={null}
NEXT_PUBLIC_ANALYTICS_PROVIDER=none
```

<Tip>
  If you're just getting started, pick one provider first. Get it working, then add a second one later if you need it.
</Tip>

## Setup

<Steps>
  <Step title="Create a provider account">
    Sign up with PostHog, Plausible, or DataFast and create a project/site.
  </Step>

  <Step title="Copy your credentials">
    Grab the API keys, script URLs, or website IDs from your provider dashboard.
  </Step>

  <Step title="Add env vars">
    Add the provider-specific env vars to `.env.local` (see the tabs above for exact values).
  </Step>

  <Step title="Restart and browse">
    Restart your dev server, open the app, and browse a few pages.
  </Step>

  <Step title="Check the dashboard">
    Confirm that pageviews and events appear in your provider's dashboard.
  </Step>
</Steps>

## Key Files

* `lib/analytics/head-scripts.tsx` -- script injection
* `lib/analytics/provider.tsx` -- the root analytics provider
* `lib/analytics/client.ts` -- shared event helpers
* `lib/analytics/providers/*` -- provider-specific implementations

## Verify It Works

<Check>
  Your analytics setup is working if:

  * The provider script loads in the browser
  * Pageviews appear in the dashboard
  * Custom events appear after you trigger tracked actions
</Check>

<AccordionGroup>
  <Accordion title="Typo in provider name">
    Make sure `NEXT_PUBLIC_ANALYTICS_PROVIDER` is exactly `posthog`, `plausible`, `datafast`, or `none`. Any typo silently disables analytics.
  </Accordion>

  <Accordion title="Forgot to restart">
    Next.js doesn't pick up new env vars until you restart the dev server.
  </Accordion>

  <Accordion title="Wrong Plausible domain">
    Your `NEXT_PUBLIC_PLAUSIBLE_DOMAIN` must match the site you created in Plausible exactly.
  </Accordion>

  <Accordion title="Missing DataFast website ID">
    Without `NEXT_PUBLIC_DATAFAST_WEBSITE_ID`, DataFast won't know which site to track.
  </Accordion>
</AccordionGroup>

<Card title="Meta Ads" icon="bullhorn" href="/services/meta-ads">
  Need checkout attribution for Meta campaigns? That's a separate system -- read the Meta Ads guide.
</Card>