구글 애널리틱스 적용되지 않는 오류 수정 (ga -> ga4로 변경) (#667)

chore: react-ga4 패키지 추가
woowacourse-teams · Oct 12, 2023 · bc79576 · bc79576
1 parent 5b54935
commit bc79576
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,7 +24,7 @@
     "history": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-ga": "^3.3.1",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^6.14.2",
     "styled-components": "^6.0.4"
   },

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { styled } from 'styled-components';
 import { Outlet } from 'react-router-dom';
 import ToastProvider from './contexts/ToastContext';
@@ -8,22 +8,24 @@ import LoadingPage from './pages/LoadingPage';
 import ModalProvider from './contexts/ModalContext';
 import { QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query';
 import { queryClient } from './hooks/query/queryClient';
-import ReactGA from 'react-ga';
 import { createBrowserHistory } from 'history';
 import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
+import ReactGA from 'react-ga4';
 
-const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
-if (gaTrackingId) {
-  ReactGA.initialize(gaTrackingId);
-}
+const App = () => {
+  useEffect(() => {
+    const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
+    if (gaTrackingId) {
+      ReactGA.initialize(gaTrackingId);
+    }
 
-const history = createBrowserHistory();
-history.listen((response: { location: { pathname: string } }) => {
-  ReactGA.set({ page: response.location.pathname });
-  ReactGA.pageview(response.location.pathname);
-});
+    const history = createBrowserHistory();
+    history.listen((response) => {
+      ReactGA.set({ page: response.location.pathname });
+      ReactGA.send(response.location.pathname);
+    });
+  }, []);
 
-const App = () => {
   ChannelService.loadScript();
 
   if (CHANNEL_SERVICE_KEY) {