# Analytics Overview

> Current analytics behavior in the Next.js Drizzle SaaS Kit and how to extend it.

*Canonical: https://makerkit.dev/docs/nextjs-drizzle/analytics/analytics-and-events*

---

The kit ships with a small analytics abstraction in `@kit/analytics`.

Current repo state:

- Client and server exports are available via `@kit/analytics` and `@kit/analytics/server`
- The default manager currently registers only the `null` provider
- `AnalyticsProvider` still emits page views and app events, but with the default setup they resolve to a no-op service
- You can extend the package by registering your own providers in `packages/analytics/src/index.ts` and `packages/analytics/src/server.ts`

## Quick Start

### Track a Custom Event

```typescript
import { analytics } from '@kit/analytics';

void analytics.trackEvent('button_clicked', {
  buttonName: 'signup',
});
```

### Identify a User

```typescript
import { analytics } from '@kit/analytics';

void analytics.identify('user_123', {
  email: 'user@example.com',
});
```

## Current Implementation

The analytics package uses an `AnalyticsManager` that can fan out to multiple providers, but the checked-in repo currently registers only `null`:

```typescript {% title="packages/analytics/src/index.ts" %}
import { createAnalyticsManager } from './analytics-manager';
import { NullAnalyticsService } from './null-analytics-service';

export const analytics = createAnalyticsManager({
  providers: {
    null: () => NullAnalyticsService,
  },
});
```

The same pattern exists for the server export in `packages/analytics/src/server.ts`.

## Automatic Tracking

The app mounts `AnalyticsProvider` from `apps/web/components/analytics-provider.tsx`.

It currently does two things:

1. Maps selected app events such as `user.signedIn`, `user.signedUp`, and `checkout.started` to analytics calls
2. Tracks page views when the pathname changes

Note: the current implementation reports page views on pathname changes only. Query-string-only navigations are not emitted as separate page-view events.

## Extending the Package

If you want real analytics in this repo, add a provider implementation and register it in both entrypoints:

1. Create a provider that implements `AnalyticsService`
2. Register it in `packages/analytics/src/index.ts`
3. Register the server-side equivalent in `packages/analytics/src/server.ts` if needed

See [Custom Analytics Provider](./custom-analytics-provider) for the pattern.

## Topics

1. [Custom Analytics Provider](./custom-analytics-provider)
2. [Google Analytics](./google-analytics-provider)
3. [PostHog](./posthog-analytics-provider)
4. [Umami](./umami-analytics-provider)