Mixpanel
Product analytics platform focused on user behavior and conversion funnels. Excellent for understanding how users interact with your product and optimizing conversion rates.
Why Mixpanel?
You need detailed product analytics
You're optimizing user funnels and conversions
You want cohort analysis and user segmentation
Signal Breakdown
What drives the Trust Score
Download Trend
Last 12 months
Tradeoffs & Caveats
Know before you commitYou need basic web analytics (use Google Analytics)
You're on a tight budget
You want primarily marketing attribution
Pricing
Free tier & paid plans
20M events/mo free
$28/mo Growth (starts at 100M events)
Most startups stay on free tier
Alternative Tools
Other options worth considering
Often Used Together
Complementary tools that pair well with Mixpanel
Learning Resources
Docs, videos, tutorials, and courses
Get Started
Repository and installation options
View on GitHub
github.com/mixpanel/mixpanel-js
npm install mixpanel-browserpip install mixpanelQuick Start
Copy and adapt to get going fast
import mixpanel from 'mixpanel-browser';
mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN!, {
debug: process.env.NODE_ENV === 'development',
track_pageview: true,
persistence: 'localStorage',
});
// Identify the user after login
mixpanel.identify(user.id);
mixpanel.people.set({ $email: user.email, $name: user.name, plan: user.plan });
// Track events
mixpanel.track('Tool Viewed', { tool_slug: 'openai-api', category: 'llm-apis' });Code Examples
Common usage patterns
React hook for event tracking
Wrap Mixpanel in a reusable hook
'use client';
import mixpanel from 'mixpanel-browser';
import { useCallback } from 'react';
export function useAnalytics() {
const track = useCallback((event: string, props?: Record<string, unknown>) => {
mixpanel.track(event, props);
}, []);
const identify = useCallback((userId: string, traits?: Record<string, unknown>) => {
mixpanel.identify(userId);
if (traits) mixpanel.people.set(traits);
}, []);
return { track, identify };
}
// Usage in a component
const { track } = useAnalytics();
track('Button Clicked', { button: 'Upgrade', page: 'dashboard' });Server-side tracking in Route Handler
Track events from the server to avoid ad blockers
import Mixpanel from 'mixpanel';
const mp = Mixpanel.init(process.env.MIXPANEL_TOKEN!);
export async function POST(req: Request) {
const { userId, plan } = await req.json();
mp.track('Subscription Created', {
distinct_id: userId,
plan,
$ip: req.headers.get('x-forwarded-for') ?? '0',
});
mp.people.set(userId, { plan, subscribed_at: new Date().toISOString() });
return Response.json({ ok: true });
}A/B test assignment tracking
Track which experiment variant a user sees
function assignVariant(userId: string): 'control' | 'treatment' {
// Deterministic assignment based on user ID
const hash = userId.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0);
return hash % 2 === 0 ? 'control' : 'treatment';
}
const variant = assignVariant(user.id);
mixpanel.track('Experiment Viewed', {
experiment_name: 'new_onboarding_flow',
variant,
});
// Register as super property so all future events include it
mixpanel.register({ 'Experiment: new_onboarding_flow': variant });Community Notes
Real experiences from developers who've used this tool