Merge pull request #73 from MobilityData/fix/70-google-analytics-tags

feat: migrated from react-ga4 to next/third-parties for analytics

Author: Alessandro100

package.json

@@ -11,6 +11,7 @@
     "@mui/material-nextjs": "7.3.6",
     "@mui/x-date-pickers": "8.23.0",
     "@mui/x-tree-view": "8.23.0",
+    "@next/third-parties": "^16.1.6",
     "@reduxjs/toolkit": "^1.9.6",
     "@sentry/nextjs": "^10.42.0",
     "@turf/center": "^6.5.0",
@@ -39,7 +40,6 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-draggable": "^4.5.0",
-    "react-ga4": "^2.1.0",
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.52.1",
     "react-leaflet": "^4.2.1",

src/app/[locale]/layout.tsx

@@ -1,5 +1,6 @@
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { Analytics } from '@vercel/analytics/next';
+import { GoogleAnalytics } from '@next/third-parties/google';
 import ThemeRegistry from '../registry';
 import { Providers } from '../providers';
 import { type ReactElement } from 'react';
@@ -12,6 +13,7 @@ import Footer from '../components/Footer';
 import Header from '../components/Header';
 import { Container } from '@mui/material';
 import { type Locale, routing } from '../../i18n/routing';
+import { getEnvConfig } from '../utils/config';
 
 export const metadata = {
   title:
@@ -125,6 +127,11 @@ export default async function LocaleLayout({
           </NextIntlClientProvider>
         </ThemeRegistry>
       </body>
+      {getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID') !== '' && (
+        <GoogleAnalytics
+          gaId={getEnvConfig('NEXT_PUBLIC_GOOGLE_ANALYTICS_ID')}
+        />
+      )}
     </html>
   );
 }

src/app/components/CoveredAreaMap.tsx

@@ -36,7 +36,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';
+import { sendGAEvent } from '@next/third-parties/google';
 import { selectGtfsDatasetRoutesLoadingStatus } from '../store/supporting-files-selectors';
 import {
   getLatestGbfsVersion,
@@ -190,10 +190,9 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
   };
 
   const handleOpenDetailedMapClick = (): void => {
-    ReactGA.event({
-      category: 'engagement',
-      action: 'gtfs_visualization_open_detailed_map',
-      label: 'Open Detailed Map',
+    sendGAEvent('event', 'gtfs_visualization_open_detailed_map', {
+      event_category: 'engagement',
+      event_label: 'Open Detailed Map',
     });
   };
 

src/app/screens/Feed/components/ClientDownloadButton.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from '@mui/material';
 import DownloadIcon from '@mui/icons-material/Download';
+import { sendGAEvent } from '@next/third-parties/google';
 import { useTranslations } from 'next-intl';
 
 export default function ClientDownloadButton({
@@ -11,13 +12,10 @@ export default function ClientDownloadButton({
 }): React.ReactElement {
   const t = useTranslations('feeds');
 
-  const handleDownloadLatestClick = async (): Promise<void> => {
-    // Lazy load react-ga4 to avoid loading it unnecessarily
-    const ReactGA = (await import('react-ga4')).default;
-    ReactGA.event({
-      category: 'engagement',
-      action: 'download_latest_dataset',
-      label: 'Download Latest Dataset',
+  const handleDownloadLatestClick = (): void => {
+    sendGAEvent('event', 'download_latest_dataset', {
+      event_category: 'engagement',
+      event_label: 'Download Latest Dataset',
     });
   };
 
@@ -30,9 +28,7 @@ export default function ClientDownloadButton({
       rel='noreferrer nofollow'
       id='download-latest-button'
       endIcon={<DownloadIcon />}
-      onClick={() => {
-        void handleDownloadLatestClick();
-      }}
+      onClick={handleDownloadLatestClick}
     >
       {t('downloadLatest')}
     </Button>

src/app/screens/Feed/components/ClientQualityReportButton.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from '@mui/material';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { sendGAEvent } from '@next/third-parties/google';
 import { useTranslations } from 'next-intl';
 
 export default function ClientQualityReportButton({
@@ -11,12 +12,10 @@ export default function ClientQualityReportButton({
 }): React.ReactElement {
   const t = useTranslations('feeds');
 
-  const handleOpenFullQualityReportClick = async (): Promise<void> => {
-    const ReactGA = (await import('react-ga4')).default;
-    ReactGA.event({
-      category: 'engagement',
-      action: 'open_full_quality_report',
-      label: 'Open Full Quality Report',
+  const handleOpenFullQualityReportClick = (): void => {
+    sendGAEvent('event', 'open_full_quality_report', {
+      event_category: 'engagement',
+      event_label: 'Open Full Quality Report',
     });
   };
 
@@ -28,9 +27,7 @@ export default function ClientQualityReportButton({
       target='_blank'
       rel='noreferrer nofollow'
       endIcon={<OpenInNewIcon />}
-      onClick={() => {
-        void handleOpenFullQualityReportClick();
-      }}
+      onClick={handleOpenFullQualityReportClick}
     >
       {t('openFullQualityReport')}
     </Button>

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

@@ -43,7 +43,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import GavelIcon from '@mui/icons-material/Gavel';
 import { getFeedStatusData } from '../../../utils/feedStatusConsts';
 import Link from 'next/link';
-import ReactGA from 'react-ga4';
+import { sendGAEvent } from '@next/third-parties/google';
 import { getRouteTypeTranslatedName } from '../../../constants/RouteTypes';
 import {
   featureChipsStyle,
@@ -95,10 +95,9 @@ export default function FeedSummary({
   }, [feed]);
 
   const handleOpenDetailedMapClick = (): void => {
-    ReactGA.event({
-      category: 'engagement',
-      action: 'gtfs_visualization_open_detailed_map',
-      label: 'Open Detailed Map',
+    sendGAEvent('event', 'gtfs_visualization_open_detailed_map', {
+      event_category: 'engagement',
+      event_label: 'Open Detailed Map',
     });
   };
 

yarn.lock

@@ -2340,6 +2340,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz#96e9e335e2577481dab6fc7a2af48f3e4a28fbdb"
   integrity sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw==
 
+"@next/third-parties@^16.1.6":
+  version "16.1.6"
+  resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-16.1.6.tgz#366980adab28f808ce6142af6b474066e2ad49da"
+  integrity sha512-/cLY1egaH529ylSMSK+C8dA3nWDLL4hOFR4fca9OLWWxjcNwzsbuq2pPb/tmdWL9Zj3K1nTjd1pWQoSlaDQ0VA==
+  dependencies:
+    third-party-capital "1.0.20"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -11404,11 +11411,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-ga4@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
-  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
-
 react-google-recaptcha@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz#44aaab834495d922b9d93d7d7a7fb2326315b4ab"
@@ -12789,6 +12791,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+third-party-capital@1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
+  integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
+
 throttleit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.1.tgz#304ec51631c3b770c65c6c6f76938b384000f4d5"