From 02b04da10ded4e69c7967430a3c0b374fd3b8976 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 27 Mar 2025 22:56:48 +0000
Subject: [PATCH] Added Google Analytics

---
 package-lock.json | 7 +++++++
 package.json      | 1 +
 src/App.jsx       | 3 +++
 wrangler.jsonc    | 2 +-
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 1e02823..3839fb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "framer-motion": "^12.4.7",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-ga4": "^2.1.0",
         "react-icons": "^5.5.0",
         "react-particles": "^2.12.2",
         "react-responsive": "^10.0.0",
@@ -18874,6 +18875,12 @@
       "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ==",
       "license": "MIT"
     },
+    "node_modules/react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==",
+      "license": "MIT"
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
diff --git a/package.json b/package.json
index 6150860..e37daf5 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "framer-motion": "^12.4.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-ga4": "^2.1.0",
     "react-icons": "^5.5.0",
     "react-particles": "^2.12.2",
     "react-responsive": "^10.0.0",
diff --git a/src/App.jsx b/src/App.jsx
index edc6965..d0b8cf9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import ReactGA from "react-ga4";
 import { Layout, Space } from "antd";
 import { useLocation, useNavigate } from "react-router-dom";
 import { AnimatePresence, motion } from "framer-motion";
@@ -24,6 +25,8 @@ const App = () => {
 
   const isMobile = useMediaQuery({ maxWidth: 600 });
 
+  ReactGA.initialize(GA_MEASUREMENT_ID);
+
   // Get the query parameter from the URL
   const getQueryParam = (param) => {
     const searchParams = new URLSearchParams(location.search); // Use location.search directly
diff --git a/wrangler.jsonc b/wrangler.jsonc
index 534afbc..465679b 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -31,7 +31,7 @@
    * Environment Variables
    * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
    */
-  // "vars": { "MY_VARIABLE": "production_value" },
+  "vars": { "GA_MEASUREMENT_ID": "G-MN5S04W1HB" },
   /**
    * Note: Use secrets to store sensitive data.
    * https://developers.cloudflare.com/workers/configuration/secrets/