Mixpanel vs Google Analytics

// Mixpanel JavaScript SDK
import mixpanel from 'mixpanel-browser';

mixpanel.init('YOUR_TOKEN', { debug: true });

// Track user sign up
mixpanel.track('User Signed Up', {
  'Signup Method': 'email',
  'Plan': 'premium'
});

// Identify users
mixpanel.identify('user123');
mixpanel.people.set({
  '$email': 'user@example.com',
  '$name': 'John Doe',
  'Plan': 'premium',
  'Signup Date': new Date()
});

// Track custom events
mixpanel.track('Button Clicked', {
  'Button Name': 'Upgrade Plan',
  'Page': 'Dashboard',
  'User Type': 'free'
});

// Create funnels
// 1. Go to Mixpanel dashboard
// 2. Create → Funnel
// 3. Add steps: Page View → Sign Up → Purchase
// 4. Analyze conversion rates

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

<!-- Track custom events -->
gtag('event', 'purchase', {
  transaction_id: '12345',
  value: 99.99,
  currency: 'USD',
  items: [{
    item_id: 'SKU_12345',
    item_name: 'Product Name',
    price: 99.99,
    quantity: 1
  }]
});

// React integration with gtag
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag('config', 'GA_MEASUREMENT_ID', {
        page_path: url,
      });
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}