feat(#47): Google Analytics 구축

.github/workflows/front-build.yaml

@@ -38,6 +38,7 @@ jobs:
         run: |
           echo "VITE_NAVER_MAP_ID=${{ secrets.VITE_NAVER_MAP_ID }}" >> .env
           echo "VITE_SERVER_ADDRESS=${{ secrets.VITE_SERVER_ADDRESS }}" >> .env
+          echo "VITE_GA_TRACKING_ID=${{ secrets.VITE_GA_TRACKING_ID }}" >> .env
 
       - name: react build
         run: npm run build

package.json

@@ -29,6 +29,7 @@
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-naver-maps": "^0.1.3",
     "react-router-dom": "^7.1.1",
     "react-table": "^7.8.0",

src/Router.tsx

@@ -1,5 +1,7 @@
 import { NavermapsProvider } from 'react-naver-maps';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+import ReactGA from 'react-ga4';
 import LoginPage from './pages/LoginPage/LoginPage';
 import MapPage from './pages/MapPage/MapPage';
 import ManagePage from './pages/ManagePage/ManagePage';
@@ -11,6 +13,23 @@ import Home from './pages/ManagePage/Home';
 import SteepSlopeDup from './pages/ManagePage/StepSlope/StepSlopeOutlier/SteepSlopeDup';
 import SteepSlopeEmpty from './pages/ManagePage/StepSlope/StepSlopeOutlier/SteepSlopeEmpty';
 const Router = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    ReactGA.initialize(import.meta.env.VITE_GA_TRACKING_ID, {
+      gtagOptions: {
+        debug_mode: import.meta.env.DEV,
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    ReactGA.send({
+      hitType: 'pageview',
+      page: location.pathname + location.search,
+      title: document.title,
+    });
+  }, [location]);
   return (
     <NavermapsProvider ncpClientId={`${import.meta.env.VITE_NAVER_MAP_ID}`}>
       <BrowserRouter>