feat: integrate Mixpanel tracking for instruction file creation and define analytics events

Author: spivx

app/page.tsx

@@ -7,6 +7,8 @@ import { InstructionsWizard } from "@/components/instructions-wizard"
 import HeroIconsRow from "@/components/HeroIconsRow"
 import { ThemeToggle } from "@/components/theme-toggle"
 import { getHeroIconItems, getHomeMainClasses } from "@/lib/utils"
+import { ANALYTICS_EVENTS } from "@/lib/analytics-events"
+import { track } from "@/lib/mixpanel"
 import { Github } from "lucide-react"
 import Link from "next/link"
 
@@ -56,7 +58,10 @@ export default function Home() {
                 <Button
                   size="lg"
                   className="px-8 py-6 text-lg"
-                  onClick={() => setShowWizard(true)}
+                  onClick={() => {
+                    track(ANALYTICS_EVENTS.CREATE_INSTRUCTIONS_FILE)
+                    setShowWizard(true)
+                  }}
                 >
                   Create My Instructions File
                 </Button>

lib/analytics-events.ts

@@ -0,0 +1,7 @@
+export const ANALYTICS_EVENTS = {
+  PAGE_VIEW: "Page View",
+  CREATE_INSTRUCTIONS_FILE: "Create My Instructions File",
+} as const
+
+export type AnalyticsEvent =
+  (typeof ANALYTICS_EVENTS)[keyof typeof ANALYTICS_EVENTS]

lib/mixpanel.ts

@@ -1,5 +1,7 @@
 import mixpanel from "mixpanel-browser"
 
+import { ANALYTICS_EVENTS, type AnalyticsEvent } from "@/lib/analytics-events"
+
 const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN
 
 let isMixpanelInitialized = false
@@ -24,7 +26,7 @@ export const initMixpanel = () => {
   isMixpanelInitialized = true
 }
 
-export const track = (event: string, props?: Record<string, unknown>) => {
+export const track = (event: AnalyticsEvent, props?: Record<string, unknown>) => {
   if (typeof window === "undefined" || !isMixpanelInitialized) {
     return
   }
@@ -41,7 +43,7 @@ export const identify = (userId: string) => {
 }
 
 export const trackPageView = (path: string, search?: string) => {
-  track("Page View", {
+  track(ANALYTICS_EVENTS.PAGE_VIEW, {
     path,
     search: search || undefined,
   })