ga4 test deploy

package.json

@@ -21,7 +21,6 @@
     "react": "^18.2.0",
     "react-calendar": "^4.6.0",
     "react-dom": "^18.2.0",
-    "react-ga": "^3.3.1",
     "react-ga4": "^2.1.0",
     "react-icons": "^4.10.1",
     "react-leaflet": "^4.2.1",

src/App.js

@@ -11,9 +11,18 @@ import "leaflet/dist/leaflet.css";
 import { AuthContextProvider } from "./context/AuthContext";
 import AboutPage from "./components/AboutPage/AboutPage";
 import ReactGA from "react-ga4";
+import { useEffect } from "react";
 
-ReactGA.initialize("G-T3M3PZTJPN");
+ReactGA.initialize("G-7TSV14ZJ11");
 function App() {
+  useEffect(() => {
+    ReactGA.send({
+      hitType: "pageview",
+      page: window.location.pathname + window.location.search,
+      title: "Home",
+    });
+  }, []);
+
   return (
     <AuthContextProvider>
       <ChakraProvider>

src/components/AboutPage/AboutPage.jsx

@@ -10,17 +10,13 @@ import "swiper/css/navigation";
 import logo from "../../assets/images/small_logo.png";
 import login_page from "../../assets/images/login_page.jpg";
 import axios from "axios";
-import ReactGA from "react-ga";
 
 export default function AboutPage() {
   const navigate = useNavigate();
   const [screenWidth, setScreenWidth] = useState(window.screen.width);
   const [data, setData] = useState([]);
   const [leaderboard, setLeaderboard] = useState([]);
 
-  useEffect(() => {
-    ReactGA.pageview(window.location.pathname);
-  }, []);
 
   window.onresize = () => {
     setScreenWidth(window.screen.width);

src/components/Map/Map.jsx

@@ -22,7 +22,6 @@ import InfoModal from "../InfoModal/InfoModal";
 
 import DataContext from "../../context/DataContext";
 import { UserAuth } from "../../context/AuthContext";
-import ReactGA from "react-ga";
 
 import axios from "axios";
 
@@ -66,10 +65,6 @@ export default function Map({
     setShowDonut(false);
   };
 
-  useEffect(() => {
-    ReactGA.pageview(window.location.pathname);
-  }, []);
-
   useEffect(() => {
     const handleFocus = async () => {
       await handleMarkerSelect();
@@ -106,10 +101,6 @@ export default function Map({
               onOpen();
               setItemData(item);
               setFocusLocation(item.location);
-              ReactGA.event({
-                category: item.name,
-                action: "click on item",
-              });
             },
           }}
           icon={

src/components/UpdatePage/UpdatePage.jsx

@@ -1,4 +1,4 @@
-import { React, useState, useEffect } from "react";
+import { React, useState } from "react";
 import {
   Flex,
   Text,
@@ -12,7 +12,6 @@ import {
 import { useNavigate } from "react-router-dom";
 import { ChevronRightIcon, ArrowBackIcon } from "@chakra-ui/icons";
 import { SiInstagram } from "react-icons/si";
-import ReactGA from "react-ga";
 
 export default function UpdatePage() {
   const navigate = useNavigate();
@@ -22,9 +21,6 @@ export default function UpdatePage() {
     navigate("/");
   };
 
-  useEffect(() => {
-    ReactGA.pageview(window.location.pathname);
-  }, []);
 
   window.onresize = () => {
     setScreenWidth(window.screen.width);