Merge pull request #39 from UCF/react-ga4

React ga4
UCF · Jul 15, 2024 · 08d0697 · 08d0697
2 parents d6fe748 + 5f1f05b
commit 08d0697
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 8 deletions.
diff --git a/.env.template b/.env.template
@@ -4,4 +4,5 @@ VITE_REMOTE_HEADER_MENU_ID=23
 VITE_REMOTE_FOOTER_MENU_ID=24
 VITE_REMOTE_SOCIAL_LINKS_ID=26
 VITE_LOCATION_API_URL=https://www.ucf.edu/wp-json/wp/v2/locations/
-VITE_BASEURL= /map/
+VITE_BASEURL=/map/
+VITE_REACTGA_MEASUREMENT_ID=''
diff --git a/.github/workflows/azure-static-web-apps-delightful-moss-0832eaa0f.yml b/.github/workflows/azure-static-web-apps-delightful-moss-0832eaa0f.yml
@@ -22,6 +22,7 @@ jobs:
       VITE_REMOTE_SOCIAL_LINKS_ID: ${{ vars.VITE_REMOTE_SOCIAL_LINKS_ID }}
       VITE_LOCATION_API_URL: ${{ vars.VITE_LOCATION_API_URL_DEV }}
       VITE_BASEURL: ${{ vars.VITE_BASEURL }}
+      VITE_REACTGA_MEASUREMENT_ID: ${{ vars.VITE_REACTGA_MEASUREMENT_ID_DEVTEST }}
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v3

diff --git a/index.html b/index.html
@@ -1,13 +1,6 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <!-- Google Tag Manager -->
-<!--     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','GTM-NDH5K9RN');</script> -->
-      <!-- End Google Tag Manager -->
     <meta charset="UTF-8" />
     <link rel="shortcut icon" href="/ucf.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.jpg">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "react-ga4": "^2.1.0",
     "togeojson": "^0.16.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import './App.scss'
+import ReactGA from "react-ga4"
 
 // React Imports
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -71,8 +72,23 @@ import campusData from './assets/campuses.json';
 const TOKEN = import.meta.env.VITE_MAPBOX_TOKEN;
 const FOOTER_MENU_ID = import.meta.env.VITE_REMOTE_FOOTER_MENU_ID;
 const FOOTER_SOCIAL_ID = import.meta.env.VITE_REMOTE_SOCIAL_LINKS_ID;
+const REACT_MEASUREMENT_ID = import.meta.env.VITE_REACTGA_MEASUREMENT_ID || '';
 
 function App() {
+  if(REACT_MEASUREMENT_ID) {
+  ReactGA.initialize(REACT_MEASUREMENT_ID, {
+    gaOptions: {
+      debug_mode: true,
+    },
+    gtagOptions: {
+      debug_mode: true,
+    },
+  });
+
+  // Send pageview with a custom path
+  ReactGA.send({ hitType: "pageview", page: "/", title: "UCF Campus Map" });
+}
+
   const initialLng = -81.200142;
   const intitalLat = 28.602368;
   const initialZoom = 15;