added GA4 detection of events PWA_DISMISSED and PWA_INSTALLED (#1479)

Co-authored-by: Kylee Fields <43586156+kyleecodes@users.noreply.github.com>

Author: shaishav007

lib/hooks/usePWA.test.ts

@@ -5,6 +5,14 @@ import { setPwaDismissed } from '../store/userSlice';
 import { useAppDispatch, useTypedSelector } from './store';
 import usePWA from './usePwa';
 
+// Mocking track functions for vercel and GA4
+jest.mock('@vercel/analytics/react', () => ({
+  track: jest.fn(),
+}));
+jest.mock('@next/third-parties/google', () => ({
+  sendGAEvent: jest.fn(),
+}));
+
 jest.mock('js-cookie');
 jest.mock('./store', () => ({
   useTypedSelector: jest.fn(),

lib/hooks/usePwa.ts

@@ -1,9 +1,11 @@
 'use client';
 
+import { useAppDispatch, useTypedSelector } from '@/lib/hooks/store';
+import { setPwaDismissed } from '@/lib/store/userSlice';
+import logEvent from '@/lib/utils/logEvent';
 import Cookies from 'js-cookie';
 import { useEffect, useMemo, useState } from 'react';
-import { setPwaDismissed } from '@/lib/store/userSlice';
-import { useAppDispatch, useTypedSelector } from '@/lib/hooks/store';
+import { PWA_DISMISSED, PWA_INSTALLED } from '../constants/events';
 
 type UserChoice = Promise<{
   outcome: 'accepted' | 'dismissed';
@@ -17,7 +19,7 @@ interface BeforeInstallPromptEvent extends Event {
   prompt(): Promise<void>;
 }
 
-const PWA_DISMISSED = 'pwaBannerDismissed';
+const PWA_BANNER_DISMISSED = 'pwaBannerDismissed';
 
 export default function usePWA() {
   const [bannerState, setBannerState] = useState<PwaBannerState>('Generic');
@@ -31,9 +33,35 @@ export default function usePWA() {
     [],
   );
 
+  const getPwaMetaData = useMemo(() => {
+    const userAgent = window.navigator.userAgent;
+    const platform = userAgent.includes('Win')
+      ? 'Windows'
+      : userAgent.includes('Mac')
+        ? 'MacOS'
+        : userAgent.includes('Linux')
+          ? 'Linux'
+          : 'Unknown OS';
+
+    const browser = userAgent.includes('Chrome')
+      ? 'Chrome'
+      : userAgent.includes('Firefox')
+        ? 'Firefox'
+        : userAgent.includes('Safari')
+          ? 'Safari'
+          : userAgent.includes('Edge')
+            ? 'Edge'
+            : userAgent.includes('Edge')
+              ? 'Opera'
+              : 'Unknown Browser';
+
+    return { browser, platform };
+  }, []);
+
   const declineInstallation = async () => {
     if (userCookiesAccepted) {
-      Cookies.set(PWA_DISMISSED, 'true');
+      Cookies.set(PWA_BANNER_DISMISSED, 'true');
+      logEvent(PWA_DISMISSED, getPwaMetaData);
     }
     setBannerState('Hidden');
     await dispatch(setPwaDismissed(true));
@@ -50,12 +78,15 @@ export default function usePWA() {
      * immediately after installation. In some cases, isStandalone might
      * still return false momentarily, causing the banner to reappear.
      */
+    if (userCookiesAccepted) {
+      logEvent(PWA_INSTALLED, getPwaMetaData);
+    }
     window.beforeinstallpromptEvent = undefined;
     setBannerState('Hidden');
   };
 
   useEffect(() => {
-    const pwaBannerDismissedCookie = Boolean(Cookies.get(PWA_DISMISSED));
+    const pwaBannerDismissedCookie = Boolean(Cookies.get(PWA_BANNER_DISMISSED));
     const isStandalone =
       typeof window !== 'undefined' && window.matchMedia('(display-mode: standalone)').matches;
     const isHidden =