+1

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",

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",

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(() => {