diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 695837c6..306ea3e3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@monaco-editor/react": "^4.7.0",
         "firebase": "^9.23.0",
+        "ga-4-react": "^0.1.281",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga": "^3.3.1",
@@ -2105,6 +2106,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/ga-4-react": {
+      "version": "0.1.281",
+      "resolved": "https://registry.npmjs.org/ga-4-react/-/ga-4-react-0.1.281.tgz",
+      "integrity": "sha512-LBvn8digT3gS8Iw8/XN3Z60c/JlFjMreLrZEneeQr+N/3+Ymv8yOsuK6qFAX2VPS6TscLbSlgtb/mriJ2P17Ow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 49bd917e..d8aa3994 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "firebase": "^9.23.0",
+    "ga-4-react": "^0.1.281",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f92186a7..33d3a552 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import ReactGA from 'react-ga';
+import GA4React from 'ga-4-react';
 import Editor from "@monaco-editor/react";
 import formatXML from "xml-formatter";
 import { initializeApp } from "firebase/app";
@@ -139,7 +139,8 @@ export default function App() {
   console.log("Using this URL as backendURL:", backendBase);
 
   useEffect(() => {
-   ReactGA.initialize(env.VITE_GA_ID);
+    const ga4react = new GA4React(env.VITE_GA_ID);
+    ga4react.initialize().catch(err => console.error(err));
  }, []);
 
   useEffect(() => {