📝 chore: GA 초기화하는 위치를 App.tsx로 이동, 초기에 브라우저 정보 남기기

src/App.tsx

@@ -1,14 +1,17 @@
 import { useEffect } from 'react';
-import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter } from 'react-router-dom';
 
-import GlobalStyle from '@styles/global';
-import Router from '@routes/Router';
-import { useLoginUser } from '@hooks/useLoginUser';
 import ToastList from '@components/common/Toast/List';
+import { GaAction, GaCategory, useGoogleAnalytics } from '@hooks/useGoogleAnalytics';
+import { useLoginUser } from '@hooks/useLoginUser';
+import Router from '@routes/Router';
+import GlobalStyle from '@styles/global';
+import ReactGA from 'react-ga';
 
 function App() {
-  const { initLoginUser } = useLoginUser();
+  const { initLoginUser, userID, isAuthenticated } = useLoginUser();
+  const { isGoogleAnalyticsLoaded, makeGaEvent } = useGoogleAnalytics();
 
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -22,6 +25,19 @@ function App() {
     initLoginUser();
   }, []);
 
+  useEffect(() => {
+    if (isGoogleAnalyticsLoaded) {
+      makeGaEvent({
+        category: GaCategory.INIT,
+        action: GaAction.USER_AGENT,
+        label: navigator.userAgent,
+      });
+      if (isAuthenticated) {
+        ReactGA.set({ userID });
+      }
+    }
+  }, [isGoogleAnalyticsLoaded, isAuthenticated]);
+
   return (
     <>
       <GlobalStyle />

src/application/hooks/useGoogleAnalytics.ts

@@ -2,12 +2,14 @@ import { useEffect, useState } from 'react';
 import ReactGA from 'react-ga';
 
 export const enum GaCategory {
+  INIT = 'init',
   LANDING = 'landing',
   TSS = 'tss',
   NSS = 'nss',
 }
 
 export const enum GaAction {
+  USER_AGENT = 'user_agent',
   CLICK = 'click',
 }
 

src/presentation/pages/Landing/index.tsx

@@ -1,7 +1,17 @@
+import {
+  imgGlass,
+  imgLanding,
+  imgLink,
+  imgMainPage,
+  imgMypage,
+  imgTeamsoseo,
+} from '@assets/images';
+import TeamLandingLottie from '@assets/lottie/TeamLottie';
+import CommonHeader from '@components/common/Header';
+import { GaAction, GaCategory, useGoogleAnalytics } from '@hooks/useGoogleAnalytics';
 import { useLoginUser } from '@hooks/useLoginUser';
-import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
-import CommonHeader from '@components/common/Header';
+import { useNavigate } from 'react-router-dom';
 import {
   StFooter,
   StLandingWrapper,
@@ -16,16 +26,6 @@ import {
   StServiceButton,
   StShadow,
 } from './style';
-import {
-  imgGlass,
-  imgLanding,
-  imgLink,
-  imgMainPage,
-  imgMypage,
-  imgTeamsoseo,
-} from '@assets/images';
-import TeamLandingLottie from '@assets/lottie/TeamLottie';
-import { GaAction, GaCategory, useGoogleAnalytics } from '@hooks/useGoogleAnalytics';
 
 function Landing() {
   const { isAuthenticated } = useLoginUser();
@@ -49,7 +49,17 @@ function Landing() {
         </div>
         <img src={imgMainPage} />
         <StShadow top={161} />
-        <StServiceButton theme="coral" onClick={() => navigate(`/login`)}>
+        <StServiceButton
+          theme="coral"
+          onClick={() => {
+            makeGaEvent({
+              category: GaCategory.LANDING,
+              action: GaAction.CLICK,
+              label: 'login_top',
+            });
+            navigate(`/login`);
+          }}
+        >
           너가소개서 받으러 가기
         </StServiceButton>
       </StMain>

src/presentation/routes/Router.tsx

@@ -1,27 +1,25 @@
 import ScrollToTop from '@components/common/ScrollToTop';
+import InAppBrowserEscape from '@components/InAppBrowserEscape';
 import { useGoogleAnalytics } from '@hooks/useGoogleAnalytics';
 import { Suspense, useEffect } from 'react';
+import ReactGA from 'react-ga';
 import { Route, Routes, useLocation } from 'react-router-dom';
+import FormRouter from './FormRouter';
 import NeogaRouter from './NeogaRouter';
+import PreferencesRouter from './PreferencesRouter';
 import TeamRouter from './TeamRouter';
 import UserRouter from './UserRouter';
-import ReactGA from 'react-ga';
-import FormRouter from './FormRouter';
-import { useLoginUser } from '@hooks/useLoginUser';
-import PreferencesRouter from './PreferencesRouter';
-import InAppBrowserEscape from '@components/InAppBrowserEscape';
 
 const Router = () => {
   const location = useLocation();
   const { isGoogleAnalyticsLoaded } = useGoogleAnalytics();
-  const { isAuthenticated, userID } = useLoginUser();
 
   useEffect(() => {
-    if (isGoogleAnalyticsLoaded) ReactGA.pageview(location.pathname + location.search);
-    if (isGoogleAnalyticsLoaded && isAuthenticated) {
-      ReactGA.set({ userID });
+    if (isGoogleAnalyticsLoaded) {
+      ReactGA.pageview(location.pathname + location.search);
     }
-  }, [isGoogleAnalyticsLoaded, location, isAuthenticated]);
+  }, [isGoogleAnalyticsLoaded, location]);
+
   return (
     <>
       <ScrollToTop />