Merge branch 'react-ga4' into develop

UCF · Jul 15, 2024 · 5e2319a · 5e2319a
2 parents 867d63c + 13deb2e
commit 5e2319a
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 11 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=G-DFCVBKX579
diff --git a/index.html b/index.html
@@ -1,16 +1,9 @@
 <!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" href="/apple-touch-icon.jpg">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.jpg">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Navigate the University of Central Florida with our interactive map. Find buildings, parking, classrooms, libraries, student services and more on our 4 cutting-edge campuses.">
     <!-- Open Graph Meta Tags -->
@@ -30,8 +23,8 @@
   </head>
   <body>
      <!-- Google Tag Manager (noscript) -->
-     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NDH5K9RN"
-      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!--      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NDH5K9RN"
+      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> -->
       <!-- End Google Tag Manager (noscript) -->
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>

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,15 @@ 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() {
+  ReactGA.initialize(REACT_MEASUREMENT_ID);
+
+  // 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;