feat: Google Analytics 연동 (#227)

* chore: react-ga4 설치 * feat: GA 태그 코드 삽입 * build: action 수정
JNU-Parking-Ticket-Project · Sep 4, 2024 · f396102 · f396102
1 parent 2d048e9
commit f396102
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 35 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -30,6 +30,7 @@ jobs:
       - name: env 파일 생성
         run: |
           touch .env
+          echo VITE_REACT_APP_GA_KEY=${{ secrets.VITE_REACT_APP_GA_KEY }} >> .env
           echo VITE_PUBLIC_API_URL=${{ secrets.VITE_PUBLIC_API_URL }} >> .env
           cat .env
 
@@ -51,6 +52,6 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           AWS_REGION: ${{ secrets.AWS_DEFAULT_REGION }}
-          SOURCE_DIR: "dist/service-manager"
+          SOURCE_DIR: 'dist/service-manager'
         run: |
           aws s3 sync dist/service-manager s3://${{ secrets.AWS_MANAGER_WS_BUCKET_NAME }}
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "react-markdown": "^9.0.1",
     "react-modal": "^3.16.1",
     "react-router-dom": "6.11.2",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "react-ga4": "^2.1.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/service-manager/src/main.tsx b/service-manager/src/main.tsx
@@ -2,6 +2,11 @@ import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import App from './app/app';
 import './main.css';
+import ReactGA from 'react-ga4';
+
+if (import.meta.env.VITE_REACT_APP_GA_KEY) {
+  ReactGA.initialize(import.meta.env.VITE_REACT_APP_GA_KEY);
+}
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,

diff --git a/service-manager/src/router/RouterChangeTracker.tsx b/service-manager/src/router/RouterChangeTracker.tsx
@@ -0,0 +1,30 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import ReactGA from 'react-ga4';
+
+const RouteChangeTracker = () => {
+  const location = useLocation();
+  const [initialized, setInitialized] = useState(false);
+
+  const GAInitializer = useCallback(() => {
+    if (initialized) {
+      ReactGA.set({ page: location.pathname });
+      ReactGA.send('pageview');
+    }
+  }, [location, initialized]);
+
+  useEffect(() => {
+    if (import.meta.env.VITE_REACT_APP_GA_KEY) {
+      ReactGA.initialize(import.meta.env.VITE_REACT_APP_GA_KEY);
+      setInitialized(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    GAInitializer();
+  }, [GAInitializer]);
+
+  return <></>;
+};
+
+export default RouteChangeTracker;
diff --git a/service-manager/src/router/index.tsx b/service-manager/src/router/index.tsx
@@ -20,45 +20,49 @@ import { NotFound } from '../pages/NotFound';
 import { SettingBoardPage } from '../pages/setting/SettingList.page';
 import { SectionCreateSettingPage } from '../pages/setting/SectionCreate.page';
 import { ApplyBoardPage } from '../pages/apply/ApplyBoard.page';
+import RouteChangeTracker from './RouterChangeTracker';
 
 export default function Router() {
   return (
-    <Routes>
-      <Route path="/" element={<MainPage />} />
-      <Route path="/admin" element={<AdminPage />} />
-      <Route path="/signup" element={<SignUpPage />} />
-      <Route path="/password-reset" element={<PasswordResetLayout />}>
-        <Route index element={<RequestPasswordResetPage />} />
-        <Route
-          path="/password-reset/:resetId"
-          element={<PasswordResetPage />}
-        />
-      </Route>
-      <Route path="/" element={<CommonLayout />}>
-        <Route path="announcement" element={<AnnouncementLayout />}>
-          <Route index element={<AnnouncementListPage />} />
-          <Route path=":announcementId" element={<AnnouncementPage />} />
+    <>
+      <RouteChangeTracker />
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/admin" element={<AdminPage />} />
+        <Route path="/signup" element={<SignUpPage />} />
+        <Route path="/password-reset" element={<PasswordResetLayout />}>
+          <Route index element={<RequestPasswordResetPage />} />
           <Route
-            path="update/:announcementId"
-            element={<AnnouncementUpdatePage />}
+            path="/password-reset/:resetId"
+            element={<PasswordResetPage />}
           />
-          <Route path="create" element={<AnnouncementCreatePage />} />
         </Route>
-        <Route path="apply-list">
-          <Route index element={<ApplyBoardPage />} />
-          <Route path=":eventId" element={<ApplyListPage />} />
+        <Route path="/" element={<CommonLayout />}>
+          <Route path="announcement" element={<AnnouncementLayout />}>
+            <Route index element={<AnnouncementListPage />} />
+            <Route path=":announcementId" element={<AnnouncementPage />} />
+            <Route
+              path="update/:announcementId"
+              element={<AnnouncementUpdatePage />}
+            />
+            <Route path="create" element={<AnnouncementCreatePage />} />
+          </Route>
+          <Route path="apply-list">
+            <Route index element={<ApplyBoardPage />} />
+            <Route path=":eventId" element={<ApplyListPage />} />
+          </Route>
+          <Route path="setting">
+            <Route index element={<SettingBoardPage />} />
+            <Route path=":eventId" element={<SectionSettingPage />} />
+            <Route path="create" element={<SectionCreateSettingPage />} />
+          </Route>
+          <Route path="notice" element={<NoticeLayout />}>
+            <Route index element={<NoticeViewPage />} />
+            <Route path="update" element={<NoticeUpdatePage />} />
+          </Route>
         </Route>
-        <Route path="setting">
-          <Route index element={<SettingBoardPage />} />
-          <Route path=":eventId" element={<SectionSettingPage />} />
-          <Route path="create" element={<SectionCreateSettingPage />} />
-        </Route>
-        <Route path="notice" element={<NoticeLayout />}>
-          <Route index element={<NoticeViewPage />} />
-          <Route path="update" element={<NoticeUpdatePage />} />
-        </Route>
-      </Route>
-      <Route path="*" element={<NotFound />} />
-    </Routes>
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </>
   );
 }