Spring/activation test 2025 09 18 3c21

netlify.toml

@@ -0,0 +1,11 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+[build.environment]
+  VITE_APP_BASE_NAME = "/"

package.json

@@ -34,6 +34,7 @@
     "formik": "2.4.6",
     "framer-motion": "12.8.2",
     "lodash-es": "4.17.21",
+    "mixpanel-browser": "^2.70.0",
     "react": "19.1.0",
     "react-device-detect": "2.2.3",
     "react-dom": "19.1.0",

src/App.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
 // project imports
@@ -6,9 +7,25 @@ import ThemeCustomization from 'themes';
 
 import ScrollTop from 'components/ScrollTop';
 
+// analytics
+import analytics from 'analytics/mixpanel';
+
 // ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //
 
 export default function App() {
+  useEffect(() => {
+    // Initialize Mixpanel
+    analytics.init();
+
+    // Track app load
+    analytics.track('App Loaded', {
+      timestamp: new Date().toISOString(),
+      user_agent: navigator.userAgent,
+      screen_width: window.screen.width,
+      screen_height: window.screen.height
+    });
+  }, []);
+
   return (
     <ThemeCustomization>
       <ScrollTop>

src/analytics/mixpanel.js

@@ -0,0 +1,80 @@
+import mixpanel from 'mixpanel-browser';
+
+const MIXPANEL_TOKEN = 'ff3948c5215e478a83d6047952d7302a';
+
+class MixpanelAnalytics {
+  constructor() {
+    this.initialized = false;
+  }
+
+  init() {
+    if (this.initialized) return;
+
+    mixpanel.init(MIXPANEL_TOKEN, {
+      debug: true,
+      track_pageview: true,
+      persistence: 'localStorage'
+    });
+
+    this.initialized = true;
+    console.log('Mixpanel initialized successfully');
+  }
+
+  track(eventName, properties = {}) {
+    if (!this.initialized) {
+      console.warn('Mixpanel not initialized. Call init() first.');
+      return;
+    }
+
+    mixpanel.track(eventName, properties);
+    console.log(`Mixpanel Event Tracked: ${eventName}`, properties);
+  }
+
+  identify(userId, userProperties = {}) {
+    if (!this.initialized) {
+      console.warn('Mixpanel not initialized. Call init() first.');
+      return;
+    }
+
+    mixpanel.identify(userId);
+    mixpanel.people.set(userProperties);
+    console.log(`Mixpanel User Identified: ${userId}`, userProperties);
+  }
+
+  trackPageView(pageName, properties = {}) {
+    this.track('Page View', {
+      page: pageName,
+      url: window.location.href,
+      path: window.location.pathname,
+      referrer: document.referrer,
+      ...properties
+    });
+  }
+
+  trackButtonClick(buttonName, properties = {}) {
+    this.track('Button Click', {
+      button_name: buttonName,
+      page: window.location.pathname,
+      ...properties
+    });
+  }
+
+  trackFormSubmit(formName, properties = {}) {
+    this.track('Form Submit', {
+      form_name: formName,
+      page: window.location.pathname,
+      ...properties
+    });
+  }
+
+  reset() {
+    if (this.initialized) {
+      mixpanel.reset();
+      console.log('Mixpanel reset');
+    }
+  }
+}
+
+const analytics = new MixpanelAnalytics();
+
+export default analytics;