Analytics

SaaSInMinutes uses Mixpanel for analytics. This guide shows you how to track events in your app.

Setup

1. Create a Mixpanel account at mixpanel.com

2. Get your project token from Settings → Project Settings

3. Add it to your .env.local file:

.env.local
1MIXPANEL_TOKEN=your-project-token

Track events

libs/analytics.ts
1'use client';
2
3import mixpanel from 'mixpanel-browser';
4
5mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN!);
6
7export function trackEvent(eventName: string, properties?: Record<string, any>) {
8  mixpanel.track(eventName, properties);
9}
10
11// Usage
12trackEvent('User Signed Up', {
13  email: user.email,
14  plan: 'pro',
15});

Identify users

1import mixpanel from 'mixpanel-browser';
2
3export function identifyUser(userId: string, properties?: Record<string, any>) {
4  mixpanel.identify(userId);
5  mixpanel.people.set(properties || {});
6}
7
8// Usage
9identifyUser(user.id, {
10  email: user.email,
11  name: user.name,
12  plan: user.plan,
13});

Track page views

1'use client';
2
3import { useEffect } from 'react';
4import { usePathname } from 'next/navigation';
5import { trackEvent } from '@/libs/analytics';
6
7export function usePageTracking() {
8  const pathname = usePathname();
9
10  useEffect(() => {
11    trackEvent('Page Viewed', {
12      path: pathname,
13    });
14  }, [pathname]);
15}
16
17// Usage in layout
18export default function Layout({ children }) {
19  usePageTracking();
20  return <>{children}</>;
21}