feat: GA 적용

woowacourse-teams · Sep 28, 2023 · 2087e02 · 2087e02
1 parent 242a53e
commit 2087e02
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 58 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -87,6 +87,7 @@
     "msw": "^1.2.3",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
+    "react-ga4": "^2.1.0",
     "react-refresh": "^0.14.0",
     "storybook": "^7.1.1",
     "stylelint": "^15.10.0",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -22,6 +22,7 @@ import useToast from '@hooks/_common/useToast';
 import OAuthRedirect from './components/loginPage/OAuthRedirect';
 import AsyncBoundary from './components/_common/errorBoundary/AsyncBoundary';
 import SessionHandler from '@components/_common/sessionHandler/SessionHandler';
+import RouteChangeTracker from '@components/_common/routeChangeTracker/RouteChangeTracker';
 
 const GoalRoomDashboardPage = lazy(
   () => import('@pages/goalRoomDashboardPage/GoalRoomDashboardPage')
@@ -54,66 +55,68 @@ const App = () => {
       <UserInfoProvider>
         <ToastProvider>
           <BrowserRouter>
-            <ResponsiveContainer>
-              <PageLayout>
-                <AsyncBoundary>
-                  <SessionHandler>
-                    <Routes>
-                      <Route path='/' element={<MainPage />} />
-                      <Route path='/login' element={<LoginPage />} />
-                      <Route path='/join' element={<SignUpPage />} />
-                      <Route path='/roadmap-list' element={<RoadmapListPage />}>
+            <RouteChangeTracker>
+              <ResponsiveContainer>
+                <PageLayout>
+                  <AsyncBoundary>
+                    <SessionHandler>
+                      <Routes>
+                        <Route path='/' element={<MainPage />} />
+                        <Route path='/login' element={<LoginPage />} />
+                        <Route path='/join' element={<SignUpPage />} />
+                        <Route path='/roadmap-list' element={<RoadmapListPage />}>
+                          <Route
+                            path=':category/:search'
+                            element={<RoadmapSearchResult />}
+                          />
+                        </Route>
                         <Route
-                          path=':category/:search'
-                          element={<RoadmapSearchResult />}
+                          path='/roadmap/:id'
+                          element={
+                            <Suspense fallback={<Fallback />}>
+                              <RoadmapDetailPage />
+                            </Suspense>
+                          }
                         />
-                      </Route>
-                      <Route
-                        path='/roadmap/:id'
-                        element={
-                          <Suspense fallback={<Fallback />}>
-                            <RoadmapDetailPage />
-                          </Suspense>
-                        }
-                      />
-                      <Route
-                        path='/roadmap/:id/goalroom-list'
-                        element={<GoalRoomListPage />}
-                      />
-                      <Route
-                        path='/roadmap-create'
-                        element={
-                          <PrivateRouter>
-                            <RoadmapCreatePage />
-                          </PrivateRouter>
-                        }
-                      />
-                      <Route
-                        path='/roadmap/:id/goalroom-create'
-                        element={
-                          <PrivateRouter>
-                            <GoalRoomCreatePage />
-                          </PrivateRouter>
-                        }
-                      />
-                      <Route
-                        path='/goalroom-dashboard/:goalroomId'
-                        element={<GoalRoomDashboardPage />}
-                      />
-                      <Route
-                        path='/myPage'
-                        element={
-                          <PrivateRouter>
-                            <MyPage />
-                          </PrivateRouter>
-                        }
-                      />
-                      <Route path='/oauth/redirect' element={<OAuthRedirect />} />
-                    </Routes>
-                  </SessionHandler>
-                </AsyncBoundary>
-              </PageLayout>
-            </ResponsiveContainer>
+                        <Route
+                          path='/roadmap/:id/goalroom-list'
+                          element={<GoalRoomListPage />}
+                        />
+                        <Route
+                          path='/roadmap-create'
+                          element={
+                            <PrivateRouter>
+                              <RoadmapCreatePage />
+                            </PrivateRouter>
+                          }
+                        />
+                        <Route
+                          path='/roadmap/:id/goalroom-create'
+                          element={
+                            <PrivateRouter>
+                              <GoalRoomCreatePage />
+                            </PrivateRouter>
+                          }
+                        />
+                        <Route
+                          path='/goalroom-dashboard/:goalroomId'
+                          element={<GoalRoomDashboardPage />}
+                        />
+                        <Route
+                          path='/myPage'
+                          element={
+                            <PrivateRouter>
+                              <MyPage />
+                            </PrivateRouter>
+                          }
+                        />
+                        <Route path='/oauth/redirect' element={<OAuthRedirect />} />
+                      </Routes>
+                    </SessionHandler>
+                  </AsyncBoundary>
+                </PageLayout>
+              </ResponsiveContainer>
+            </RouteChangeTracker>
           </BrowserRouter>
         </ToastProvider>
       </UserInfoProvider>

diff --git a/client/src/components/_common/routeChangeTracker/RouteChangeTracker.tsx b/client/src/components/_common/routeChangeTracker/RouteChangeTracker.tsx
@@ -0,0 +1,29 @@
+/* src/RouteChangeTracker.js */
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import ReactGA from 'react-ga4';
+
+const RouteChangeTracker = ({ children }: PropsWithChildren) => {
+  const location = useLocation();
+  const [initialized, setInitialized] = useState(false);
+
+  // 구글 애널리틱스 운영서버만 적용
+  useEffect(() => {
+    if (process.env.GOOGLE_ANALYTICS) {
+      ReactGA.initialize(process.env.GOOGLE_ANALYTICS);
+      setInitialized(true);
+    }
+  }, []);
+
+  // location 변경 감지시 pageview 이벤트 전송
+  useEffect(() => {
+    if (initialized) {
+      ReactGA.set({ page: location.pathname });
+      ReactGA.send('pageview');
+    }
+  }, [initialized, location]);
+
+  return <>{children}</>;
+};
+
+export default RouteChangeTracker;
diff --git a/client/webpack.common.js b/client/webpack.common.js
@@ -79,6 +79,7 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env.PROD_SERVER': JSON.stringify(process.env.PROD_SERVER),
       'process.env.DEV_SERVER': JSON.stringify(process.env.DEV_SERVER),
+      'process.env.GOOGLE_ANALYTICS': JSON.stringify(process.env.GOOGLE_ANALYTICS),
     }),
   ],
 };