feat: add mixpanel analytics script

[prudentbird]

Related Issue

Fixes #94

[claude]

Claude finished @prudentbird's task —— View job

---

PR Review: Mixpanel Analytics Integration

I've completed my review of the Mixpanel analytics integration. Here are my findings:

✅ What's Working Well

• Proper Next.js Integration: Uses Next.js Script component with afterInteractive strategy
• Correct Placement: Script is properly placed in the document head
• Standard Implementation: Uses the official Mixpanel initialization code

🚨 Critical Security Concerns

1. Exposed API Key

• Line 43: mixpanel.init('62c042c7c84959c74b1a700644589a75', ...)
• Issue: The Mixpanel project token is hardcoded and publicly visible in client-side code
• Risk: This token will be exposed to all users and can be found in browser dev tools
• Recommendation: Move to environment variable and use Next.js environment variable handling

2. Privacy & Data Collection Settings

• Lines 44-45: autocapture: true, record_sessions_percent: 100
• Issue: Aggressive data collection without user consent
• Risk: May violate GDPR/CCPA requirements, captures all user interactions including sensitive data
• Recommendation: Implement user consent management and reduce session recording percentage

🔧 Code Quality Issues

1. Missing Environment Configuration

// Current implementation
mixpanel.init('62c042c7c84959c74b1a700644589a75', {

// Recommended approach
mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN, {

2. No Error Handling

• The script lacks error boundaries for failed Mixpanel initialization
• Consider wrapping in try/catch block

3. TypeScript Integration

• Missing TypeScript declarations for window.mixpanel
• Consider adding @types/mixpanel-browser or custom type declarations

📋 Missing Considerations

1. Test Coverage

• No tests verify analytics integration
• Consider adding tests for tracking events (can use Mixpanel test mode)

2. Performance Impact

• Session recording at 100% will impact performance
• Recommend starting with 5-10% for production

3. GDPR Compliance

• No cookie consent management
• Missing privacy policy integration
• Consider implementing analytics opt-in/opt-out functionality

🛠️ Recommended Changes

1. Secure the API Key:

   // In .env.local
   NEXT_PUBLIC_MIXPANEL_TOKEN=62c042c7c84959c74b1a700644589a75
   
   // In layout.tsx
   mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN || '', {

2. Adjust Data Collection Settings:

   mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN, {
     autocapture: false, // Enable selectively
     record_sessions_percent: 10, // Reduce for performance
     respect_dnt: true, // Respect Do Not Track
   })

3. Add Error Handling:

   try {
     mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN, config);
   } catch (error) {
     console.warn('Analytics initialization failed:', error);
   }

Todo List:

• Read repository CLAUDE.md for guidelines
• Examine the modified layout.tsx file
• Analyze Mixpanel integration implementation
• Check for security concerns and best practices
• Review code quality and structure
• Provide comprehensive PR review feedback

Summary

While the implementation follows Next.js best practices, it has critical security and privacy concerns that should be addressed before merging. The exposed API key and aggressive data collection settings pose significant risks.

Recommendation: Request changes to secure the API key and implement proper privacy controls before approving.

---