feat: react-ga4 연동완료 #430

woowacourse-teams · Dec 23, 2024 · 1f8fbc9 · 1f8fbc9
1 parent 5a6b0e4
commit 1f8fbc9
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 5 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,6 +27,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.24.1",
     "recoil": "^0.7.7"
@@ -58,6 +59,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
+    "@types/node": "^22.10.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
@@ -112,4 +114,4 @@
       "public"
     ]
   }
-}
+}
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -97,9 +97,11 @@
     function gtag() {
       dataLayer.push(arguments);
     }
-    gtag('js', new Date());
 
-    gtag('config', 'G-3BFVVPQT0Z');
+    if (process.env.NODE_ENV == 'production') {
+      gtag('js', new Date());
+      gtag('config', 'G-3BFVVPQT0Z');
+    }
   </script>
 
   <body>

diff --git a/frontend/src/router/MainLayout.tsx b/frontend/src/router/MainLayout.tsx
@@ -1,10 +1,17 @@
+import { useEffect } from 'react';
+import ReactGA from 'react-ga4';
 import { Outlet } from 'react-router-dom';
 
 import AsyncErrorBoundary from '@/components/common/ErrorBoundary/AsyncErrorBoundary';
 import RootErrorBoundary from '@/components/common/ErrorBoundary/RootErrorBoundary';
 import ModalProvider from '@/providers/ModalProvider/ModalProvider';
 
 const MainLayout = () => {
+  useEffect(() => {
+    ReactGA.initialize('G-3BFVVPQT0Z');
+    ReactGA.send({ hitType: 'pageview', page: '/my-path', title: 'Custom Title' });
+  });
+
   return (
     <RootErrorBoundary>
       <AsyncErrorBoundary>