[Feat/#543] Google Analytics 세팅

[namdaeun]

✨ 해당 이슈 번호 ✨

closed #543

todo

• react-ga4 설치를 통한 GA 세팅

📌 내가 알게 된 부분

• react-ga4 라이브러리를 사용해주었습니다.
  배포시 포함되어야하기 때문에 dependencies로 설치해주었어요

react의 경우 SPA구조이기 때문에 각 페이지의 html마다 코드를 주입해주는 방법을 사용하지 않고, useLocation을 사용해서 위치의 변경을 인식할 때마다 정보를 날려주는 방식으로 구현했습니다.

RouteTracker.tsx

// 로컬일 경우 send하지 않음
  useEffect(() => {
    if (!window.location.href.includes('localhost')) {
      ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS_ID);

      setIsInitialized(true);
    }
  }, []);

// pathname과 정보를 날려줌
  useEffect(() => {
    if (isInitialized) {
      ReactGA.set({ page: location.pathname });
      ReactGA.send('pageview');
    }
  }, [isInitialized, location]);

원래는 유틸 함수처럼 만들고 App.tsx 상위에서 호출했으나, 구글링해보니 BrowseRouter 외부에서 호출된다는 에러가 뜬다고 해서 RouteTracker 라는 컴포넌트를 만들고 RouteProvider 하위에서 호출해주었습니다.

            <Suspense fallback={<Loading />}>
              <RouterProvider router={router} />
              <RouteTracker /> // 추가 !
            </Suspense>

작동이 한 번에 되면 좋겠지만 .. 동헌오빠랑 계속 확인해보면서 코드를 고쳐가야 할 것 같습니당

📌 질문할 부분

📌스크린샷(선택)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mile-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 20, 2025 11:03am

[ljh0608]

LGTM