feat: 1323 add ga tag to assess usage of full map view (#1340)

added GA tag to Download Latest, Open Full Quality Report and Open Detailed Map

Author: qcdyx

web-app/package.json

@@ -25,12 +25,12 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
     "leaflet": "^1.9.4",
-    "maplibre-gl": "^4.7.1",
+    "maplibre-gl": "^5.7.0",
     "material-react-table": "^2.13.0",
     "mui-datatables": "^4.3.0",
     "mui-nested-menu": "^3.4.0",
     "openapi-fetch": "^0.9.3",
-    "pmtiles": "^4.2.1",
+    "pmtiles": "^4.3.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-ga4": "^2.1.0",
@@ -39,7 +39,7 @@
     "react-hook-form": "^7.52.1",
     "react-i18next": "^14.1.2",
     "react-leaflet": "^4.2.1",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^8.0.4",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",

web-app/public/locales/en/feeds.json

@@ -160,5 +160,6 @@
       "no": "No",
       "notSure": "Unsure"
     }
-  }
+  },
+  "openDetailedMap": "Open Detailed Map"
 }

web-app/src/app/components/CoveredAreaMap.tsx

@@ -9,6 +9,7 @@ import {
   Typography,
   Fab,
 } from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Link } from 'react-router-dom';
 import MapIcon from '@mui/icons-material/Map';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
@@ -34,6 +35,7 @@ import ModeOfTravelIcon from '@mui/icons-material/ModeOfTravel';
 import { GtfsVisualizationMap } from './GtfsVisualizationMap';
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
 import { useRemoteConfig } from '../context/RemoteConfigProvider';
+import ReactGA from 'react-ga4';
 
 interface CoveredAreaMapProps {
   boundingBox?: LatLngExpression[];
@@ -127,6 +129,14 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
     if (newView !== null) setView(newView);
   };
 
+  const handleOpenDetailedMapClick = (): void => {
+    ReactGA.event({
+      category: 'engagement',
+      action: 'gtfs_visualization_open_detailed_map',
+      label: 'Open Detailed Map',
+    });
+  };
+
   const getGbfsLatestVersionVisualizationUrl = (
     feed: GBFSFeedType,
   ): string | undefined => {
@@ -217,8 +227,15 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
       >
         {view === 'gtfsVisualizationView' &&
           config.enableGtfsVisualizationMap && (
-            <Button component={Link} to='./map'>
-              Open Full Map with Filters
+            <Button
+              variant='contained'
+              disableElevation
+              component={Link}
+              to='./map'
+              onClick={handleOpenDetailedMapClick}
+              endIcon={<OpenInNewIcon></OpenInNewIcon>}
+            >
+              {t('openDetailedMap')}
             </Button>
           )}
         {feed?.data_type === 'gbfs' ? (
@@ -275,13 +292,15 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
             </Tooltip>
             {config.enableGtfsVisualizationMap && (
               <Tooltip title={t('gtfsVisualizationTooltip')}>
-                <ToggleButton
-                  value='gtfsVisualizationView'
-                  disabled={!config.enableGtfsVisualizationMap}
-                  aria-label='Bounding Box View'
-                >
-                  <ModeOfTravelIcon />
-                </ToggleButton>
+                <span>
+                  <ToggleButton
+                    value='gtfsVisualizationView'
+                    disabled={!config.enableGtfsVisualizationMap}
+                    aria-label='Bounding Box View'
+                  >
+                    <ModeOfTravelIcon />
+                  </ToggleButton>
+                </span>
               </Tooltip>
             )}
           </ToggleButtonGroup>

web-app/src/app/screens/Feed/components/FeedSummary.tsx

@@ -53,6 +53,7 @@ import {
   selectGtfsDatasetRouteTypes,
 } from '../../../store/selectors';
 import { getRouteTypeTranslatedName } from '../../../constants/RouteTypes';
+import ReactGA from 'react-ga4';
 
 export interface FeedSummaryProps {
   feed: GTFSFeedType | GTFSRTFeedType | undefined;
@@ -78,6 +79,14 @@ export default function FeedSummary({
   const totalRoutes = useSelector(selectGtfsDatasetRoutesTotal);
   const routeTypes = useSelector(selectGtfsDatasetRouteTypes);
 
+  const handleOpenDetailedMapClick = (): void => {
+    ReactGA.event({
+      category: 'engagement',
+      action: 'gtfs_visualization_open_detailed_map',
+      label: 'Open Detailed Map',
+    });
+  };
+
   return (
     <ContentBox
       width={width}
@@ -170,6 +179,7 @@ export default function FeedSummary({
                 to='./map'
                 color={'primary'}
                 disabled={totalRoutes == undefined}
+                onClick={handleOpenDetailedMapClick}
               >
                 <TravelExploreIcon></TravelExploreIcon>
               </IconButton>
@@ -203,6 +213,7 @@ export default function FeedSummary({
                 to='./map'
                 color={'primary'}
                 disabled={routeTypes == undefined}
+                onClick={handleOpenDetailedMapClick}
               >
                 <TravelExploreIcon></TravelExploreIcon>
               </IconButton>

web-app/src/app/screens/Feed/index.tsx

@@ -66,6 +66,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import GbfsFeedInfo from './components/GbfsFeedInfo';
 import GbfsVersions from './components/GbfsVersions';
 import generateFeedStructuredData from './StructuredData.functions';
+import ReactGA from 'react-ga4';
 
 const wrapComponent = (
   feedLoadingStatus: string,
@@ -124,6 +125,22 @@ const wrapComponent = (
   );
 };
 
+const handleDownloadLatestClick = (): void => {
+  ReactGA.event({
+    category: 'engagement',
+    action: 'download_latest_dataset',
+    label: 'Download Latest Dataset',
+  });
+};
+
+const handleOpenFullQualityReportClick = (): void => {
+  ReactGA.event({
+    category: 'engagement',
+    action: 'open_full_quality_report',
+    label: 'Open Full Quality Report',
+  });
+};
+
 export default function Feed(): React.ReactElement {
   const { t } = useTranslation('feeds');
   const theme = useTheme();
@@ -532,6 +549,7 @@ export default function Feed(): React.ReactElement {
             rel='noreferrer nofollow'
             id='download-latest-button'
             endIcon={<DownloadIcon></DownloadIcon>}
+            onClick={handleDownloadLatestClick}
           >
             {t('downloadLatest')}
           </Button>
@@ -544,6 +562,7 @@ export default function Feed(): React.ReactElement {
             target='_blank'
             rel='noreferrer nofollow'
             endIcon={<OpenInNewIcon></OpenInNewIcon>}
+            onClick={handleOpenFullQualityReportClick}
           >
             {t('openFullQualityReport')}
           </Button>