Added Google Analytics

web-ui/package.json

@@ -15,7 +15,9 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
+    "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-highlight-words": "^0.20.0",
     "react-icons": "^4.10.1",
     "react-router-dom": "^6.15.0",

web-ui/src/App.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import MainFrame from "./components/MainFrame";
 import "./App.scss";
-
 function App() {
   return (
     <div className="App">

web-ui/src/components/NavigationBar/NavigationBar.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { BrowserRouter, Route, Routes, Link, Navigate } from "react-router-dom";
-
 import "./NavigationBar.scss";
 import FullScreenModel from "../../pages/FullScreenModel";
+import { AnalyticsTracker, handleAcceptCookie } from "../../utils/analytics";
+import CookieConsent from "react-cookie-consent";
 
 interface NavItem {
   label: string;
@@ -18,6 +19,21 @@ const NavigationBar: React.FC<NavigationBarProps> = ({ navItems }) => {
   return (
     <div>
       <BrowserRouter>
+        <AnalyticsTracker />
+        <CookieConsent
+          buttonText="I understand"
+          style={{ background: "#d04dc9" }}
+          buttonStyle={{
+            backgroundColor: "#ffffff",
+            color: "#000000",
+            fontSize: "13px",
+          }}
+          onAccept={handleAcceptCookie}
+          location="bottom"
+          overlay
+        >
+          This website uses cookies to enhance the user experience.
+        </CookieConsent>
         <nav className="NavigationBar">
           {navItems.map((item, index) => (
             <Link className={"nav-link"} key={index} to={item.path}>

web-ui/src/pages/Blog/Blog.tsx

@@ -12,7 +12,7 @@ const Blog: React.FC<BlogProps> = (props) => {
   } else {
     //window.location.href = "https://brendansmiley.com/blog";
   }
-  return <div>Coming Soon ...</div>;
+  return <div style={{ textAlign: "center" }}>Docusaurus Coming Soon ...</div>;
 };
 
 export default Blog;

web-ui/src/utils/analytics.ts

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import ReactGA from "react-ga4";
+import { Cookies } from "react-cookie-consent";
+
+/**
+ * Initializes Google Analytics
+ * Should only be called once and called once the user has accepted the cookie policy
+ */
+const initializeReactGA = () => {
+  ReactGA.initialize("G-MWMM6L80KH");
+  ReactGA.set({ anonymizeIp: true });
+};
+
+/**
+ * Handles the user accepting the cookie policy
+ */
+const handleAcceptCookie = () => {
+  initializeReactGA();
+  _logPageView();
+};
+
+/**
+ * Logs a page view with the current URL
+ */
+const _logPageView = () => {
+  ReactGA.send({
+    hitType: "pageview",
+    page: window.location.pathname + window.location.search,
+  });
+};
+
+/**
+ * Component to track page views if and only if the user has accepted the cookie policy.
+ */
+function AnalyticsTracker() {
+  const location = useLocation();
+  useEffect(() => {
+    if (Cookies.get("CookieConsent")) {
+      _logPageView();
+    }
+  }, [location]);
+  return null;
+}
+export { initializeReactGA, handleAcceptCookie, AnalyticsTracker };