구글 애널리틱스 리액트 이벤트 설정과 조회방법 실습

1. 구글 애널리틱스 설치하기

npm install react-ga4

2. 리액트에 애널리틱스 추가하기

ReactGA.initialize(`${process.env.REACT_APP_GA_ID}`)

참고: https://velog.io/@jeongbeen2/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-GA-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0

3. 애널리틱스 이벤트 발생시키기
   ReactGA.event()

<div 
  className="character clickable" 
  onClick={() => {
    setShowSavedMessages(!showSavedMessages);
    ReactGA.event({
      category: 'MouseMode',
      action: 'OpenSavedMessages',
      label: 'CharacterFace'
    });
  }}
  title="저장된 메시지 보기"
>

4. 발생시킨 이벤트를 조회하는 방법
   애널리틱스 > 보고서 > 실시간 개요
   우측 대쉬보드 중 하단 "이벤트 이름 별 이벤트 수" 섹션

5. 결과 이해하기

• 3번에서 이벤트 속성으로 category, action, label 3개의 값을 입력
• 그 중 action 값만 이름으로 보임.
• 카테고리와 라벨은 대체 무슨 역할을 하고 있는건지 아직은 잘 이해가 안감

우선 액션에 들어가는 값을 구분자로 설정시켜둬야, 이벤트 해석이 가능할 것으로 기대된다