Analytics Overview

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

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

import { analytics } from '@kit/analytics';
void analytics.trackEvent('button_clicked', {
  buttonName: 'signup',
});

Identify a User

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:

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:

Maps selected app events such as user.signedIn, user.signedUp, and checkout.started to analytics calls
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:

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

See Custom Analytics Provider for the pattern.