use react-ga4

pieterprovoost · Jul 9, 2023 · b0244b5 · b0244b5
1 parent e78b8d6
commit b0244b5
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react-bootstrap": "^2.7.0",
     "react-bootstrap-icons": "^1.10.2",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-leaflet": "^4.2.0",
     "react-leaflet-draw": "^0.20.4",
     "web-vitals": "^2.1.4"

diff --git a/public/index.html b/public/index.html
@@ -15,16 +15,5 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WT1E61C5VW"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-WT1E61C5VW');
-    </script>
-
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -16,6 +16,7 @@ import FullscreenControl from "./FullscreenControl";
 import CRC32 from "crc-32";
 import { EditControl } from "react-leaflet-draw";
 import { geojsonToWKT } from "@terraformer/wkt";
+import ReactGA from "react-ga4";
 
 const DEFAULT_EPSG = "4326";
 const USE_WKT = false;
@@ -224,6 +225,11 @@ function App() {
     }).catch(error => console.error(error)); 
     window.history.replaceState(null, null, "?" + hash);
     setShowUrl(true);
+    ReactGA.event({
+      category: "wkt",
+      action: "wkt_share",
+      label: hash,
+    });
   }
 
   function loadExample() {

diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import ReactGA from "react-ga4";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+ReactGA.initialize("G-WT1E61C5VW");
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />