React & Next.js Analytics

// pages/_app.js
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import Script from 'next/script'

const GA_TRACKING_ID = 'G-XXXXXXXXXX'

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

  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag('config', GA_TRACKING_ID, {
        page_path: url,
      })
    }

    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_TRACKING_ID}');
        `}
      </Script>
      <Component {...pageProps} />
    </>
  )
}

// utils/analytics.js
import mixpanel from 'mixpanel-browser'

mixpanel.init('YOUR_PROJECT_TOKEN')

export const trackEvent = (eventName, properties = {}) => {
  mixpanel.track(eventName, properties)
}

// Component usage
import { trackEvent } from '../utils/analytics'

function ProductCard({ product }) {
  const handleAddToCart = () => {
    trackEvent('Product Added to Cart', {
      product_id: product.id,
      product_name: product.name,
      price: product.price,
      category: product.category
    })

    // Add to cart logic
  }

  return (
    <button onClick={handleAddToCart}>
      Add to Cart
    </button>
  )
}