added react-ga

package.json

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

src/App.js

@@ -10,7 +10,9 @@ import { ChakraProvider } from "@chakra-ui/react";
 import "leaflet/dist/leaflet.css";
 import { AuthContextProvider } from "./context/AuthContext";
 import AboutPage from "./components/AboutPage/AboutPage";
-//
+import ReactGA from "react-ga";
+
+ReactGA.initialize("UA-283774176-1");
 function App() {
   return (
     <AuthContextProvider>

src/components/AboutPage/AboutPage.jsx

@@ -10,14 +10,17 @@ 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([]);
-  console.log("leaderboard", leaderboard);
-  console.log("data", data);
+
+  useEffect(() => {
+    ReactGA.pageview(window.location.pathname);
+  }, []);
 
   window.onresize = () => {
     setScreenWidth(window.screen.width);

src/components/Home/Home.jsx

@@ -196,7 +196,7 @@ export default function Home() {
     };
 
     getLeaderboard();
-  }, [user]);
+  }, [user, token]);
 
   // set token to auth
   useEffect(() => {

src/components/Map/Map.jsx

@@ -22,6 +22,7 @@ import InfoModal from "../InfoModal/InfoModal";
 
 import DataContext from "../../context/DataContext";
 import { UserAuth } from "../../context/AuthContext";
+import ReactGA from "react-ga";
 
 import axios from "axios";
 
@@ -65,6 +66,10 @@ export default function Map({
     setShowDonut(false);
   };
 
+  useEffect(() => {
+    ReactGA.pageview(window.location.pathname);
+  }, []);
+
   useEffect(() => {
     const handleFocus = async () => {
       await handleMarkerSelect();
@@ -101,6 +106,10 @@ 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

@@ -12,6 +12,7 @@ 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();
@@ -21,6 +22,10 @@ export default function UpdatePage() {
     navigate("/");
   };
 
+  useEffect(() => {
+    ReactGA.pageview(window.location.pathname);
+  }, []);
+
   window.onresize = () => {
     setScreenWidth(window.screen.width);
   };