Improved: Made suggested changes in fetching ButtonLabel (hotwax#285)

Ridwan6947 · Jul 16, 2024 · 679c006 · 679c006
1 parent f149d6d
commit 679c006
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/src/mixins/analytics.ts b/src/mixins/analytics.ts
@@ -4,27 +4,48 @@ import { onMounted, onBeforeUnmount } from 'vue';
 import mixpanel from 'mixpanel-browser';
 import { appContext } from '../index';
 
+interface TrackableMetadata {
+  label?: string;
+  id?: string;
+  [key: string]: any; // Allow other properties as well
+}
+
 function useAnalytics() {
   const handleButtonClick = (event: MouseEvent) => {
     if (event.button === 0) { // Left mouse button
       const target = event.target as HTMLElement;
       const button = target.closest('button, ion-button') as HTMLElement;
-
+  
       if (button && button.hasAttribute('trackable')) {
-        const buttonLabel = (button.innerText || button.getAttribute('aria-label') || 'Unnamed button') as string;
-
+        const trackableData = button.getAttribute('trackable');
+        let metadata: TrackableMetadata = {};
+
+        try {
+          metadata = trackableData ? JSON.parse(trackableData) : {};
+        } catch (error) {
+          console.error('Error parsing trackable attribute:', error);
+        }
+
+        const buttonLabel = metadata.label || button.innerText || button.getAttribute('aria-label') || 'Unnamed button';
+        const buttonId = button.id || metadata.id || 'no-id';
+
+        console.log('Trackable Button Clicked:', { label: buttonLabel, id: buttonId });
+
         mixpanel.track(buttonLabel, {
           label: buttonLabel,
-          id: button.id || 'no-id',
+          id: buttonId,
+          ...metadata,
         });
       }
     }
   };
+
   onMounted(() => {
     console.log('Initializing Mixpanel');
 
     try {
       mixpanel.init('5d1a58b28169000ca197c14274eddf87', { debug: true });
+      console.log('Mixpanel initialized');
     } catch (error) {
       console.error('Error initializing Mixpanel:', error);
       return;
@@ -33,11 +54,17 @@ function useAnalytics() {
     const appState = appContext.config.globalProperties.$store;
 
     if (!appState) {
+      console.error('appState is not defined');
       return;
     }
 
     const userProfile = appState.getters['user/getUserProfile'];
 
+    if (!userProfile) {
+      console.error('userProfile is not defined');
+      return;
+    }
+
     const userEmail = userProfile.email;
     const userID = userProfile.userLoginId;
 
@@ -50,14 +77,17 @@ function useAnalytics() {
         $userId: userID,
       });
     } catch (error) {
+      console.error('Error identifying user in Mixpanel:', error);
       return;
     }
 
     document.addEventListener('click', handleButtonClick);
+    console.log('Event listener added for button clicks');
   });
 
   onBeforeUnmount(() => {
     document.removeEventListener('click', handleButtonClick);
+    console.log('Event listener removed for button clicks');
   });
 }
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,18 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "strictNullChecks": false,
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "importsNotUsedAsValues": "error",
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
+    "strictNullChecks": false
   },
   "include": [
     "src/**/*.ts",