From 39f8d8dbf5fc2df60789e29a3bf0e2e7ce5fd957 Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Wed, 4 Jun 2025 09:42:26 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20Google=20Analytics=20=EA=B5=AC?= =?UTF-8?q?=EC=B6=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/front-build.yaml | 1 + package-lock.json | 7 +++++++ package.json | 1 + src/Router.tsx | 21 ++++++++++++++++++++- 4 files changed, 29 insertions(+), 1 deletion(-) diff --git a/.github/workflows/front-build.yaml b/.github/workflows/front-build.yaml index 17c6acd..a560863 100644 --- a/.github/workflows/front-build.yaml +++ b/.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 diff --git a/package-lock.json b/package-lock.json index e370eaa..1470208 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,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", @@ -4185,6 +4186,12 @@ "react": "^18.3.1" } }, + "node_modules/react-ga4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", + "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==", + "license": "MIT" + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", diff --git a/package.json b/package.json index eaf7658..30b45af 100644 --- a/package.json +++ b/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", diff --git a/src/Router.tsx b/src/Router.tsx index ef2e222..d9931d1 100644 --- a/src/Router.tsx +++ b/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 ( From be628cc62a1b77391348b3a860c6de2f53bf8e89 Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Wed, 4 Jun 2025 09:54:09 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20useLocation=20=ED=9B=85=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD=20=3D>=20BrowserRouter=20?= =?UTF-8?q?=EB=82=B4=EB=B6=80=EC=97=90=EC=84=9C=20=EB=8F=99=EC=9E=91?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 11 ++++++++++- src/Router.tsx | 51 +++++++++++++++++++++++--------------------------- 2 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0863e18..e7c1f95 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import GlobalStyle from './styles/globalStyle'; import './styles/font.css'; import { NotificationProvider } from './components/NotificationProvider'; +import { NavermapsProvider } from 'react-naver-maps'; +import { BrowserRouter } from 'react-router-dom'; + function App() { const queryClient = new QueryClient(); return ( @@ -12,7 +15,13 @@ function App() { - + + + + + diff --git a/src/Router.tsx b/src/Router.tsx index d9931d1..d16290a 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,5 +1,4 @@ -import { NavermapsProvider } from 'react-naver-maps'; -import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'; +import { Routes, Route, useLocation } from 'react-router-dom'; import { useEffect } from 'react'; import ReactGA from 'react-ga4'; import LoginPage from './pages/LoginPage/LoginPage'; @@ -31,32 +30,28 @@ const Router = () => { }); }, [location]); return ( - - - - } /> - } /> - }> - } /> - } /> - - } /> - } /> - - - } /> - } /> - } /> - - - } /> - } /> - - } /> - - - - + + } /> + } /> + }> + } /> + } /> + + } /> + } /> + + + } /> + } /> + } /> + + + } /> + } /> + + } /> + + ); }; export default Router;