[feat/CK-211] Google Analytics 를 적용한다.

[sh981013s]

📌 작업 이슈 번호

ck-211

✨ 작업 내용

• GA 를 RouteChangeTracker 컴포넌트를 구현 후 적용했습니다!

💬 리뷰어에게 남길 멘트

잘 부탁드려용~

🚀 요구사항 분석

• GA 적용

[NaveOWO]

제가 알기로 GA이거.. GTM하면 index.html에만 gtm매니저 적용하면 되는데, 직접 트래커 컴포넌트 만들어준 이유가 궁금해요!

[jw-r]

너무 좋네요!
고생하셨어요🤩

[sh981013s]

제가 알기로 GA이거.. GTM하면 index.html에만 gtm매니저 적용하면 되는데, 직접 트래커 컴포넌트 만들어준 이유가 궁금해요!

GA나 GTM을 일반적으로 index.html에 추가하면 사이트 전반에 추적 코드가 적용되기는 하지만, React와 같은 Single Page Application(SPA)에서는 조금 이슈가 파악됐어요!

1. 라우트 변경 감지
   SPA에서는 페이지 전환 시 전체 페이지가 리로드되지 않아서 GA가 새로운 페이지 뷰를 자동으로 감지하지 못할 수 있다네요! 이러한 문제를 해결하기 위해 라우트 변경 감지를 컴포넌트 레벨에서 처리할 수 있게 했어요.

2. 조건부 추적
   특정 조건(예: 로그인 여부, 사용자 권한 등)에 따라 분석을 활성화하거나 비활성화할 수 있어요! 이러한 상황을 개별 컴포넌트에서 처리할 수 있기에 확장성을 고려해 따로 컴포넌트로 구현했어요!

3. 추적 initialization
   코드에서 볼 수 있듯이, ReactGA.initialize()가 조건부로 호출돼요! 환경 변수나 다른 로직을 통해 추적을 초기화할 수 있게 할 수 있어요!

useEffect(() => {
  if (process.env.GOOGLE_ANALYTICS) {
    ReactGA.initialize(process.env.GOOGLE_ANALYTICS);
    setInitialized(true);
  }
}, []);