feat: enhance Mixpanel integration with improved tracking and initialization logic

Author: spivx

components/MixpanelInit/MixpanelInit.tsx

@@ -1,12 +1,26 @@
-'use client';
+"use client"
 
-import { useEffect } from 'react';
-import { initMixpanel } from '@/lib/mixpanel';
+import { useEffect } from "react"
+import { usePathname, useSearchParams } from "next/navigation"
+
+import { initMixpanel, trackPageView } from "@/lib/mixpanel"
 
 export function MixpanelInit() {
-    useEffect(() => {
-        initMixpanel();
-    }, []);
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    initMixpanel()
+  }, [])
+
+  useEffect(() => {
+    if (!pathname) {
+      return
+    }
+
+    const search = searchParams?.toString()
+    trackPageView(pathname, search ? `?${search}` : undefined)
+  }, [pathname, searchParams])
 
-    return null; // This component doesn't render anything
-}
+  return null
+}

lib/mixpanel.ts

@@ -1,21 +1,48 @@
-import mixpanel from "mixpanel-browser";
+import mixpanel from "mixpanel-browser"
 
-const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN!;
+const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN
+
+let isMixpanelInitialized = false
 
 export const initMixpanel = () => {
-    if (typeof window !== "undefined") {
-        mixpanel.init(MIXPANEL_TOKEN, { debug: process.env.NODE_ENV !== "production" });
-    }
-};
+  if (typeof window === "undefined" || isMixpanelInitialized) {
+    return
+  }
 
-export const track = (event: string, props?: Record<string, any>) => {
-    if (typeof window !== "undefined") {
-        mixpanel.track(event, props);
+  if (!MIXPANEL_TOKEN) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Mixpanel token is missing. Set NEXT_PUBLIC_MIXPANEL_TOKEN to enable analytics.")
     }
-};
+    return
+  }
+
+  mixpanel.init(MIXPANEL_TOKEN, {
+    debug: process.env.NODE_ENV !== "production",
+    ignore_dnt: true,
+  })
+
+  isMixpanelInitialized = true
+}
+
+export const track = (event: string, props?: Record<string, unknown>) => {
+  if (typeof window === "undefined" || !isMixpanelInitialized) {
+    return
+  }
+
+  mixpanel.track(event, props)
+}
 
 export const identify = (userId: string) => {
-    if (typeof window !== "undefined") {
-        mixpanel.identify(userId);
-    }
-};
+  if (typeof window === "undefined" || !isMixpanelInitialized) {
+    return
+  }
+
+  mixpanel.identify(userId)
+}
+
+export const trackPageView = (path: string, search?: string) => {
+  track("Page View", {
+    path,
+    search: search || undefined,
+  })
+}