Issue feat: Gogle analytic event changes for plp

Author: AkshataKatwal16

apps/learner-web-app/src/components/GoogleAnalyticsTracker/GoogleAnalyticsTracker.tsx

@@ -23,6 +23,11 @@ const GoogleAnalyticsTracker = () => {
         console.log('Initializing GA for Themantic');
         initGA(`${process.env.NEXT_PUBLIC_MEASUREMENT_ID_THEMATIC}`);
       }
+      else if(window.location.href.includes('plp') )
+      {
+        console.log('Initializing GA for PLP or PDP');
+        initGA(`${process.env.NEXT_PUBLIC_MEASUREMENT_ID_PLP}`);
+      }
       else
       initGA(`${process.env.NEXT_PUBLIC_MEASUREMENT_ID_POS}`);
       window.GA_INITIALIZED = true;

apps/learner-web-app/src/utils/googleAnalytics.ts

@@ -1,10 +1,24 @@
 import ReactGA from "react-ga4";
 
+declare global {
+  interface Window {
+    gtag?: (...args: unknown[]) => void;
+    dataLayer?: unknown[];
+  }
+}
+
 export const initGA = (measurementId: string) => {
   ReactGA.initialize(measurementId);
 };
 
 export const logPageView = (url: string) => {
+  if(localStorage.getItem('userProgram'))
+  {
+    ReactGA.send({ hitType: "pageview", page: url , program: localStorage.getItem('userProgram')});
+    return;
+
+  }
+  else
   ReactGA.send({ hitType: "pageview", page: url });
 };
 
@@ -19,10 +33,40 @@ export const logEvent = ({
   label?: string;
   value?: number;
 }) => {
-  ReactGA.event({
-    action,
-    category,
-    label,
-    value,
-  });
+  if (typeof window === "undefined") return;
+  
+  const userProgram = localStorage.getItem('userProgram');
+  
+  // Build event parameters for GA4
+  const eventParams: Record<string, string | number> = {
+    event_category: category,
+  };
+  
+  // Add optional fields
+  if (label) {
+    eventParams.event_label = label;
+  }
+  if (value !== undefined) {
+    eventParams.value = value;
+  }
+  
+  // Add program name if available (custom parameter)
+  if (userProgram) {
+    console.log('userProgram', userProgram);
+    eventParams.program = userProgram;
+  }
+  
+  // Use gtag directly to send event with custom parameters
+  // This ensures custom parameters like 'program' are sent to GA4
+  if (window.gtag && typeof window.gtag === 'function') {
+    window.gtag('event', action, eventParams);
+  } else {
+    // Fallback to ReactGA.event if gtag is not available
+    ReactGA.event({
+      action,
+      category,
+      label,
+      value,
+    });
+  }
 };