Skip to content

Conversation

@Dev-lemongrab
Copy link
Contributor

Motivation

GA4 이벤트 트래킹이 부분적으로만 구현되어 있어, 사용자 행동 분석에 필요한 핵심 지표를 수집하지 못하고 있었습니다. 또한 SPA 환경에서 페이지 전환 시 페이지뷰가 자동으로 트래킹되지 않는 문제가 있었습니다.

Modification

1. SPA 페이지뷰 트래킹 추가

  • usePageViewTracking 커스텀 훅 생성
  • DefaultLayout, SubLayout에 훅 적용
  • 모든 라우트 전환 시 자동으로 페이지뷰 이벤트 전송

2. GA4 커스텀 이벤트 추가

  • poll_result_viewed: 마감 게시물 결과 페이지 조회 시
  • onboarding_viewed: 온보딩 화면 진입 시
  • poll_voted: 투표 참여 시 (재투표/취소 무관)

3. GA4 측정 ID 변경

  • 운영 환경용 스트림 ID로 변경 (G-E7XGKV9GNF)

Result

  • GA4에서 SPA 페이지뷰 트래킹 가능
  • 마감 게시물 결과 확인 비율 분석 가능
  • 온보딩 화면 진입 횟수 측정 가능
  • 투표 참여율 분석 가능
  • GA4 DebugView에서 실시간 이벤트 확인 가능

@github-actions
Copy link

🤖 AI Code Review (OpenAI)

  • src/hooks/usePageViewTracking.ts + useEffect 의존성 배열 + ReactGA.send 호출 시 location 객체 전체가 아닌 location.pathname과 location.search를 분리해서 의존성 배열에 넣는 것이 더 명확하고 불필요한 재호출을 줄일 수 있음.
    useEffect(() => {...}, [location.pathname, location.search]) 로 변경 권장.

  • src/components/poll-detail/Button/PollButton.tsx + ReactGA.event 호출 위치 + onSuccess 콜백 내에서 ReactGA 이벤트를 호출하는 것은 적절하나, mutate 함수 호출 시 에러 처리(onError)에도 이벤트 로깅이 있으면 추후 문제 분석에 도움됨.
    → onError 콜백에 실패 이벤트 로깅 추가 고려.

  • src/pages/OnBoarding/OnBoardingPage.tsx + ReactGA 이벤트 중복 호출 가능성 + showSplash 상태가 false가 된 직후 이벤트를 보내는데, 만약 컴포넌트가 여러 번 리렌더링되면 이벤트가 중복 발생할 수 있음.
    → useEffect 내부에 이벤트 중복 방지를 위한 플래그 또는 조건 추가 고려.

  • src/pages/PollDetail/PollResultPage.tsx + ReactGA 이벤트 의존성 + post, result, postId가 모두 truthy일 때 이벤트를 보내는데, postId는 useParams에서 string | undefined일 수 있으므로 undefined 체크가 필요함.
    → postId가 확실히 존재하는지 확인 후 이벤트 호출 권장.

  • index.html + Google Analytics ID 하드코딩 + GA ID가 하드코딩되어 있어 환경별로 다르게 관리하기 어려움.
    → 환경변수 또는 별도 설정 파일로 관리하는 것이 유지보수에 유리.

  • src/components/common/Layout/DefaultLayout.tsx, SubLayout.tsx + 커스텀 훅 호출 위치 + usePageViewTracking 훅을 레이아웃 컴포넌트 최상단에 호출한 것은 적절하나, 훅 내부에서 location 변화를 감지하므로 라우팅 구조 변경 시 의도치 않은 중복 호출 가능성 있음.
    → 페이지별로 별도 훅 호출 또는 라우터 최상단에서 한 번만 호출하는 방안 검토.

  • nit: src/components/poll-detail/Button/PollButton.tsx + 불필요한 주석 제거 + 주석 // voteMode 종료는 코드 자체가 명확하므로 제거해도 무방함.

  • nit: src/pages/OnBoarding/OnBoardingPage.tsx + useEffect 의존성 배열 + 첫 useEffect에 빈 배열([]) 대신 명시적으로 의존성 추가 고려 (예: navigate)하여 의도 명확히 할 수 있음.

  • nit: index.html + script 태그 async 속성 위치 통일 + async 속성 위치가 들쭉날쭉하므로 일관성 있게 정리하면 가독성 향상.

자동 생성된 리뷰입니다. 참고용으로만 사용해주세요.

@YOOJS1205 YOOJS1205 merged commit ead2a51 into develop Jan 26, 2026
6 checks passed
@YOOJS1205 YOOJS1205 deleted the feat/ga4-for-prd branch January 26, 2026 02:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants