# Analytics in MakerKit: Track User Behavior in Your Next.js SaaS

> Set up analytics in your MakerKit application to track page views, user events, and product usage with Google Analytics, PostHog, Umami, or custom providers.

*Canonical: https://makerkit.dev/docs/tanstack-supabase/analytics*

---

MakerKit provides a provider-agnostic analytics system that integrates with the App Events architecture.

You can track page views, identify users, and record custom events using any analytics service. Out of the box, MakerKit supports Google Analytics, PostHog, and Umami.

## Quick Start

To add analytics to your MakerKit application:

1. **Install a provider** using the MakerKit CLI
2. **Configure environment variables** for your chosen service
3. **Register the provider** in the analytics package

The analytics system automatically tracks page views and integrates with the App Events system for centralized event handling.

## Choosing an Analytics Provider

| Provider | Best For | Privacy | Server-Side | Self-Hosted |
|----------|----------|---------|-------------|-------------|
| **Google Analytics** | Marketing teams, conversion tracking | Third-party cookies | No | No |
| **PostHog** | Product analytics, feature flags, session replay | Configurable | Yes | Yes |
| **Umami** | Privacy-focused, simple metrics | No cookies | No | Yes |

**Recommendation**: Use PostHog if you need product analytics with feature flags. Use Umami for GDPR-compliant, privacy-first analytics. Use Google Analytics if your marketing team requires it.

## Architecture Overview

The analytics system consists of three layers:

```
┌─────────────────────────────────────────────────────┐
│                  Your Components                     │
│            emit({ type: 'user.signedUp' })          │
└─────────────────────┬───────────────────────────────┘
                      │
┌─────────────────────▼───────────────────────────────┐
│               App Events System                      │
│         Centralized event bus (client-side)         │
└─────────────────────┬───────────────────────────────┘
                      │
┌─────────────────────▼───────────────────────────────┐
│             Analytics Manager                        │
│   Routes events to all registered providers          │
└───────┬─────────────┬─────────────────┬─────────────┘
        │             │                 │
   ┌────▼────┐   ┌────▼────┐      ┌────▼────┐
   │ PostHog │   │   GA4   │      │  Umami  │
   └─────────┘   └─────────┘      └─────────┘
```

**Key insight**: Emit events once through App Events, and all configured providers receive them automatically.

## Core Concepts

### 1. Identify Users

Associate a user ID with all subsequent events:

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

void analytics.identify(userId, {
  email: user.email,
  plan: user.subscriptionPlan,
});
```

### 2. Track Events

Record specific user actions:

```typescript
void analytics.trackEvent('Feature Used', {
  featureName: 'AI Assistant',
  credits: '5',
});
```

### 3. Track Page Views

Page views are tracked automatically when routes change. For manual tracking:

```typescript
void analytics.trackPageView('/dashboard');
```

## Using Multiple Providers

MakerKit supports running multiple analytics providers simultaneously. Events dispatch to all registered providers:

```typescript {% title="packages/analytics/src/index.ts" %}
import { createPostHogAnalyticsService } from '@kit/posthog/client';
import { createGoogleAnalyticsService } from '@kit/google-analytics';

import { createAnalyticsManager } from './analytics-manager';

export const analytics = createAnalyticsManager({
  providers: {
    posthog: createPostHogAnalyticsService,
    'google-analytics': createGoogleAnalyticsService,
  },
});
```

This pattern is useful when your marketing team needs Google Analytics while your product team uses PostHog.

## Integration with App Events

The recommended approach is to emit events through the App Events system rather than calling `analytics.trackEvent()` directly. This centralizes your event logic:

```typescript
import { useAppEvents } from '@kit/shared/events';

function CheckoutButton() {
  const { emit } = useAppEvents();

  const handleClick = () => {
    emit({ type: 'checkout.started', payload: { planId: 'pro' } });
  };

  return <button onClick={handleClick}>Upgrade</button>;
}
```

The `AnalyticsProvider` component automatically maps App Events to analytics calls.

## Default Events

MakerKit tracks these events automatically:

| Event | Trigger | Data |
|-------|---------|------|
| `user.signedIn` | User logs in | `userId` |
| `user.signedUp` | User registers | `method` |
| `checkout.started` | Billing checkout | `planId`, `account` |
| `user.updated` | Profile update | - |
| Page view | Route change | URL path |

## Server-Side Analytics

For server-side tracking (API routes, Server Actions), use the server export:

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

export async function myServerAction() {
  await analytics.trackEvent('server.action', { action: 'createProject' });
}
```

**Note**: Only PostHog supports server-side analytics out of the box.

## Next Steps

{% sequence %}

[Understand Analytics and App Events](analytics/analytics-and-events)

[Set up Google Analytics](analytics/google-analytics-provider)

[Set up PostHog](/docs/next-supabase-turbo/analytics/posthog-analytics-provider)

[Set up Umami](analytics/umami-analytics-provider)

[Create a Custom Provider](analytics/custom-analytics-provider)

{% /sequence %}