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

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

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:

import { analytics } from '@kit/analytics';
void analytics.identify(userId, {
  email: user.email,
  plan: user.subscriptionPlan,
});

2. Track Events

Record specific user actions:

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:

void analytics.trackPageView('/dashboard');

Using Multiple Providers

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

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:

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:

Server-Side Analytics

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

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