PS-Issue #PS-906 feat: Added user events to track in google Analytics

tekdi · Jun 13, 2024 · 6e8cc88 · 6e8cc88
1 parent 9a9250b
commit 6e8cc88
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 14 deletions.
diff --git a/.env b/.env
@@ -1,3 +1,2 @@
 NEXT_PUBLIC_BASE_URL=https://qa.prathamteacherapp.tekdinext.com/user/v1
-NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
 NEXT_PUBLIC_MEASUREMENT_ID= G-GNMQZ8Z65Z
diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
@@ -12,6 +12,7 @@ import {
   useStepContext,
 } from '@mui/material';
 import React, { useState } from 'react';
+import ReactGA from 'react-ga4';
 import { getDayAndMonthName, getTodayDate } from '@/utils/Helper';
 
 import checkMark from '../assets/images/checkMark.svg';
@@ -86,8 +87,15 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
     getDayAndMonthName(getTodayDate())
   );
   const [cancelClicked, setCancelClicked] = React.useState(false);
+  const [appliedOption, setAppliedOption] = React.useState<string>('');
+  const [appliedIndex, setAppliedIndex] = React.useState<number | null>(0);
 
   const toggleModal = () => setIsModalOpen(!isModalOpen);
+  const handleModalClose = () =>{
+    setIsModalOpen(false)
+    setSelectedValue(appliedOption)
+    setSelectedIndex(appliedIndex)
+  }
   const toggleCalendarModal = () =>
     setIsCalenderModalOpen(!isCalendarModalOpen);
   const { t } = useTranslation();
@@ -113,10 +121,13 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
       setSelectedValue('');
       setCancelClicked(false);
     } else {
-      console.log('applied', selectedIndex, selectedValue);
+      // console.log('applied', selectedIndex, selectedValue);
+      setAppliedOption(selectedValue)
+      setAppliedIndex(selectedIndex)
+      ReactGA.event("date-range-pop-up-clicked", { dateRangeType: selectedValue});
       const values = getDateRange(selectedIndex);
       const { toDate, fromDate } = values;
-      console.log(toDate, fromDate);
+      // console.log(toDate, fromDate);
       onDateRangeSelected({ fromDate, toDate });
       toggleModal();
     }
@@ -225,7 +236,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
 
       <Modal
         open={isModalOpen}
-        onClose={toggleModal}
+        onClose={handleModalClose}
         aria-labelledby="edit-profile-modal"
         aria-describedby="edit-profile-description"
       >
@@ -244,7 +255,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
                 </Typography>
               </Grid>
               <Grid item xs={6} textAlign={'right'}>
-                <CloseIcon className="text4D" onClick={toggleModal} />
+                <CloseIcon className="text4D" onClick={handleModalClose} />
               </Grid>
             </Grid>
           </Box>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -16,6 +16,7 @@ import Image from 'next/image';
 import logoLight from '../../public/images/logo-light.png';
 import menuIcon from '../assets/images/menuIcon.svg';
 import accountIcon from './../assets/images/account.svg';
+import { logEvent } from '@/utils/googleAnalytics';
 
 const Header: React.FC = () => {
   const router = useRouter();
@@ -69,10 +70,20 @@ const Header: React.FC = () => {
   const handleProfileClick = () => {
     if (pathname !== '/profile') {
       router.push('/profile');
+      logEvent({
+        action: 'my-profile-clicked-header',
+        category: 'Dashboard',
+        label: 'Profile Clicked',
+      });
     }
   };
   const handleLogoutClick = () => {
     router.replace('/logout');
+    logEvent({
+      action: 'logout-clicked-header',
+      category: 'Dashboard',
+      label: 'Logout Clicked',
+    });
   };
   const [openDrawer, setOpenDrawer] = useState<boolean>(false);
 

diff --git a/src/components/LearnerAttendanceStatsListView.tsx b/src/components/LearnerAttendanceStatsListView.tsx
@@ -1,5 +1,6 @@
 import { Box, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
 import React, { useState } from 'react';
+import ReactGA from 'react-ga4';
 import { UserData, updateCustomField } from '@/utils/Interfaces';
 
 import LearnerModal from './LearnerModal';
@@ -130,7 +131,9 @@ const StudentsStatsList: React.FC<StudentsStatsListProps> = ({
             <Grid item xs={6} textAlign={'left'}>
               <Link className="word-break" href={''}>
                 <Typography
-                  onClick={() => handleOpenModalLearner(userId!)}
+                  onClick={() => {handleOpenModalLearner(userId!)
+                    ReactGA.event("learner-details-link-clicked", { userId: userId});
+                  }}
                   sx={{
                     textAlign: 'left',
                     fontSize: '14px',

diff --git a/src/components/SortingModal.tsx b/src/components/SortingModal.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import ReactGA from 'react-ga4';
 
 import {
   FormControl,
@@ -88,6 +89,14 @@ const SortingModal: React.FC<sortCardProps> = ({
       sortByClassesMissed,
       sortByAttendanceNumber
     );
+    ReactGA.event('sort-by-applied', {
+      sortingBasis: [
+        sortByName,
+        sortByAttendance,
+        sortByClassesMissed,
+        sortByAttendanceNumber,
+      ],
+    });
     handleCloseModal();
   };
 

diff --git a/src/components/UpDownButton.tsx b/src/components/UpDownButton.tsx
@@ -5,6 +5,7 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import { Box } from '@mui/material';
 import { usePathname } from 'next/navigation';
 import { useTranslation } from 'next-i18next';
+import { logEvent } from '@/utils/googleAnalytics';
 
 const UpDownButton = () => {
   const [isVisible, setIsVisible] = useState(false);
@@ -49,6 +50,22 @@ const UpDownButton = () => {
     }
   }, [pathname]);
 
+  const handleBackToTopButtonClicked = () =>{
+    logEvent({
+      action: 'back-to-top-button-clicked',
+      category: 'Attendance Overview/ History Page',
+      label: 'Back To Top Clicked',
+    });
+  }
+
+  const handleLearnerButtonClicked = () =>{
+    logEvent({
+      action: 'learners-button-clicked',
+      category: 'Attendance Overview/ History Page',
+      label: 'Learners Button Clicked',
+    });
+  }
+
   return (
     <div>
       {isVisible && (
@@ -61,6 +78,7 @@ const UpDownButton = () => {
               <Box
                 sx={{ height: '88px', width: '64px' }}
                 className="flex-column-center"
+                onClick={handleBackToTopButtonClicked}
               >
                 <ArrowUpwardIcon />
                 <span className="w-78"> {t('DASHBOARD.BACK_TO_TOP')}</span>
@@ -69,6 +87,7 @@ const UpDownButton = () => {
               <Box
                 sx={{ height: '80px', width: '64px' }}
                 className="flex-column-center"
+                onClick={handleLearnerButtonClicked}
               >
                 {t('COMMON.LEARNERS')}
                 <ArrowDownwardIcon />

diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx
@@ -19,6 +19,7 @@ import {
   Typography,
 } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
+import ReactGA from 'react-ga4';
 import {
   debounce,
   getTodayDate,
@@ -49,6 +50,7 @@ import { useRouter } from 'next/router';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import ToastMessage from '@/components/ToastMessage';
+import { logEvent } from '@/utils/googleAnalytics';
 
 interface user {
   userId: string;
@@ -404,6 +406,7 @@ const UserAttendanceHistory = () => {
 
   const handleCohortSelection = (event: SelectChangeEvent) => {
     setClassId(event.target.value as string);
+    ReactGA.event("cohort-selection-attendance-history-page", { selectedCohortID: event.target.value });
     setHandleSaveHasRun(!handleSaveHasRun);
 
     // ---------- set cohortId and stateName-----------
@@ -440,6 +443,7 @@ const UserAttendanceHistory = () => {
   // handle search student data
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchWord(event.target.value);
+    ReactGA.event("search-by-keyword-attendance-history-age", { keyword: event.target.value});
     if (event.target.value.length >= 3) {
       debouncedSearch(event.target.value);
     } else {
@@ -570,7 +574,12 @@ const UserAttendanceHistory = () => {
               width={'100%'}
               paddingTop={'10px'}
             >
-              <Box onClick={() => window.history.back()}>
+                <Box onClick={() => {window.history.back()
+                logEvent({
+                  action: 'back-button-clicked-attendance-history-page',
+                  category: 'Attendance History Page',
+                  label: 'Back Button Clicked',
+                });}}>
                 <Box>
                   <KeyboardBackspaceOutlinedIcon
                     cursor={'pointer'}

diff --git a/src/pages/attendance-overview.tsx b/src/pages/attendance-overview.tsx
@@ -15,6 +15,7 @@ import {
   Typography,
 } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
+import ReactGA from 'react-ga4';
 import {
   classesMissedAttendancePercentList,
   getAllCenterAttendance,
@@ -50,6 +51,7 @@ import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import { logEvent } from '@/utils/googleAnalytics';
 
 interface AttendanceOverviewProps {
   //   buttonText: string;
@@ -454,6 +456,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
 
   const handleCohortSelection = (event: SelectChangeEvent) => {
     setClassId(event.target.value as string);
+    ReactGA.event("cohort-selection-attendance-overview-page", { selectedCohortID: event.target.value });
 
     // ---------- set cohortId and stateName-----------
     const cohort_id = event.target.value;
@@ -491,6 +494,7 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
     setSearchWord(event.target.value);
     if (event.target.value.length >= 1) {
       debouncedSearch(event.target.value);
+      ReactGA.event("search-by-keyword-attendance-overview-page", { keyword: event.target.value});
     } else {
       setDisplayStudentList(learnerData);
     }
@@ -585,6 +589,11 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
   };
   const handleBackEvent = () => {
     window.history.back();
+    logEvent({
+      action: 'back-button-clicked-attendance-overview',
+      category: 'Attendance Overview Page',
+      label: 'Back Button Clicked',
+    });
   };
   const truncate = (str: string, length: number) => {
     if (str.length <= length) return str;

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -19,6 +19,7 @@ import {
 } from '@mui/material';
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 import React, { useEffect, useState } from 'react';
+import ReactGA from 'react-ga4';
 // import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
 import {
   classesMissedAttendancePercentList,
@@ -56,6 +57,7 @@ import useDeterminePathColor from '../hooks/useDeterminePathColor';
 import { useRouter } from 'next/navigation';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import { logEvent } from '@/utils/googleAnalytics';
 
 // interface State extends SnackbarOrigin {
 //   openModal: boolean;
@@ -398,10 +400,16 @@ const Dashboard: React.FC<DashboardProps> = () => {
     setShowDetails(true);
   };
 
-  const handleModalToggle = () => setOpen(!open);
+  const handleModalToggle = () => {setOpen(!open)
+    logEvent({
+      action: 'mark/modify-attendance-button-clicked-dashboard',
+      category: 'Dashboard Page',
+      label: 'Mark/ Modify Attendance',
+    })};
 
   const handleCohortSelection = (event: SelectChangeEvent) => {
     setClassId(event.target.value as string);
+    ReactGA.event("cohort-selection-dashboard", { selectedCohortID: event.target.value });
     localStorage.setItem('classId', event.target.value);
     setHandleSaveHasRun(!handleSaveHasRun);
   };
@@ -470,6 +478,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
   const viewAttendanceHistory = () => {
     if (classId !== 'all') {
       router.push('/attendance-history');
+      ReactGA.event("month-name-clicked", { selectedCohortID: classId });
     }
   };
 
@@ -502,6 +511,14 @@ const Dashboard: React.FC<DashboardProps> = () => {
     return str.slice(0, length) + '...';
   };
 
+  const handleMoreDetailsClicked = () => {
+    logEvent({
+      action: 'more-details-button-clicked',
+      category: 'Dashboard Page',
+      label: 'More Details Link Clicked',
+    });
+  };
+
   return (
     <>
       {!isAuthenticated && (
@@ -834,6 +851,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                             color: theme.palette.secondary.main,
                             fontWeight: '500',
                           }}
+                          onClick={handleMoreDetailsClicked}
                         >
                           {t('DASHBOARD.MORE_DETAILS')}
                           <ArrowForwardSharpIcon sx={{ height: '18px' }} />

diff --git a/src/pages/learner-attendance-history.tsx b/src/pages/learner-attendance-history.tsx
@@ -15,6 +15,7 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import ToastMessage from '@/components/ToastMessage';
+import { logEvent } from '@/utils/googleAnalytics';
 
 type LearnerAttendanceData = {
   [date: string]: {
@@ -69,6 +70,11 @@ const LearnerAttendanceHistory = () => {
 
   const handleOpen = () => {
     setOpen(true);
+    logEvent({
+      action: 'individual-learner-attendance-modal-open',
+      category: 'Learner Attendance History Page',
+      label: 'Mark Individual Learner Modal Open',
+    });
   };
 
   const handleModalOpen = () => {
@@ -77,6 +83,11 @@ const LearnerAttendanceHistory = () => {
 
   const handleModalClose = () => {
     setOpen(false);
+    logEvent({
+      action: 'individual-learner-attendance-modal-close',
+      category: 'Learner Attendance History Page',
+      label: 'Mark Individual Learner Modal Close',
+    });
   };
 
   useEffect(() => {