React에서 GA4 세팅하기

 
 
데이터 분석 최종 프로젝트 당시 Amplitude 사용해보면서
이벤트 로그 설계에 엄청난 흥미를 느꼈다..!
로그를 심는 행위 자체가 data-driven 의사결정의 시작과 끝이라는 생각이 들 정도

 

이번에는 프론트엔드 개발자로서 GA4를 세팅해봤다!
 
Amplitude와 GA4의 차이는 정말 간단하게 정리할 수 있는데
Amplitude는 좋다. 하지만 비싸다.
GA4는 구리다. 하지만 무료다.
 
난 돈이 없으니까 GA4를 선택했다~!!

 
 
설명하기에 앞서 제일 중요한 부분
GA4에 최근 들어 변화가 많았는데 (UA 종료 등)
그만큼 오류도 많고 이에 대한 스택 오버플로우도 부족한 상황이다.
이에 대해 구글은...
 

구글 태그 매니저를 사용하세요

 
네...
 

1. GA4 계정 만들고 스트림 설정하기

 
데이터 스트림 URL을 설정해주고 측정 ID(G-로 시작함)를 받으면 된다.
우리는 GTM을 이용할 것이기 때문에 설치하라는 문구는 가볍게 무시해준다.
URL은 나중에 변경할 수 있기 때문에 아직 배포 링크가 없더라도 대충 입력해주면 된다.
 
또한 React는 SPA이기 때문에 페이지뷰를 제대로 잡으려면 향상된 측정 설정을 켜주어야 한다.

 
 

2. GTM 계정, 컨테이너 만들기
 

컨테이너를 만들면 GTM-으로 시작하는 ID를 받을 수 있다.
 
 

3. react-gtm-module 설치
 

프로젝트로 돌아와서 필요한 패키지를 설치한다.

npm install react-gtm-module

 
타입스크립트라면

npm install react-gtm-module @types/react-gtm-module

 
 
 

4. .env에 GTM ID를 추가해준다.

 

5. 최상위 파일 수정
 

나는 App.tsx에서 return 바로 위에 적어줬다.

useEffect(() => {
    if (process.env.REACT_APP_GTM_ID) {
      TagManager.initialize({ gtmId: process.env.REACT_APP_GTM_ID });
    }
  }, []);

 
 

6. 다시 구글 태그 매니저로 돌아가서, 태그를 만들어보자.

 
태그 유형에서 GA4 이벤트를 선택해보자.
맨 처음에 Google 태그 하나를 설정해주라고 나오는데, 그냥 시키는 대로 하면 뚝딱뚝딱 됨
아까 GA4에서 스트림 설정하면서 받은 측정 ID를 입력해주면 된다.
 

• 트리거가 실행되면
• 해당 측정 ID를 가진 컨테이너에
• 설정한 이벤트 이름으로
• 이벤트가 전달되는 개념이다.

 
위에 보이는 스크롤 깊이 트리거는 GTM에서 제공하는 기본 트리거이다.
근데 사실 웬만한거 다 있어서...
개발자를 귀찮게 할 일은 딱히 없을 것 같긴 하다...
 
 

그렇지만

 
 

7. 커스텀 이벤트 만들기 ㅎㅎ

 
나는 배우는 입장이니까 직접 태그를 심어서 커스텀 이벤트를 수집해보기로 했다.

 
먼저 트리거(태그 말고)를 만들어줘야 한다.
트리거 유형으로 맞춤 이벤트를 선택하고, 이벤트 이름을 지어주면 되는데
이 이벤트 이름은 중요하다.
프로젝트에 심을 때 정확히 일치해야만 잡히기 때문이다.
아마 case 제한도 있는 것 같은데 틀려도 안 잡아줌............ 완전 어이없음
아무튼 안전하게 소문자, underscore로 구성하면 될 것 같다.
 
그리고 이제 다시 프로젝트로 돌아가서 태그 심을 곳을 찾아보자.

const addTodoClicked = () => {
    const addTodoClickedArgs = {
      dataLayer: {
        event: 'click_add_todo',
      },
    };

    TagManager.dataLayer(addTodoClickedArgs);
  };
  
 
// onClick={addTodoClicked}

 
나는 할일 추가 버튼을 누를 때마다 이벤트를 수집하도록 하고 싶었다.
할일 추가 버튼이 애플리케이션 여러 곳에 있는데, 어디서 클릭했는지 비교해보면 좋을 것 같아서?
억분석 레전드
 

 
다음으로 다시 GTM으로 돌아와서 태그를 만들어준다.
아까 만들어 둔 맞춤 이벤트를 트리거로 설정해주면 된다.
할일 추가 버튼을 사용자들이 주로 어느 페이지에서 클릭하는지 비교하고 싶으니까, 이벤트 매개변수로 페이지도 넣어준다. 이것도 제공되는 파라미터라서 아주 간단했다...
 
 

8. 확인하기

 
여기까지 했으면 태그들이 제대로 심어졌는지 확인해볼 차례다.

 
상단에 이 미리보기를 누르고, 확인해볼 링크를 입력해주면 된다. ✔️로컬도 쌉가능!
 

 
잘 설정되었다면 이런 식으로 이벤트들이 잡히는 걸 볼 수 있다.
(History는 페이지뷰)
 
 
🔫 여기서 중요한 트러블 슈팅
 
🙋 뭐가 found되지 않았다는데요?
 
💯 그렇다면 extension을 확인해보자...
 
 
광고차단 extension 예를 들어 uBlock Origin 같은 것들이 있으면 안 잡힌다
그렇다고 내가 유튜브 광고를 볼 순 없지
유튜브에서만 액세스 가능하도록 설정해놓고 다시 했더니 잘 잡히기 시작했다!
 
태그가 잘 잡히는 걸 확인했으면 다시 구글 태그 매니저 화면으로 돌아와 제출해주고,
GA4에서 보고서 작성해주기를 기다리면 된다!
 
물론 세팅 끝낸 리액트 프로젝트를 배포하고, 스트림 설정에서 URL을 배포 링크로 수정해줘야 한다!
 
여기까지 하고도 간혹 GA4에서 이벤트가 안 잡히는 경우가 있는데, 이건 보통 시간이 해결해준다...
48시간은 기다려 보시길...😎
 
 
➕ 맞춤 이벤트 트리거 만들때 dataLayer에 이것저것 적어주면 더 많은 데이터를 함께 보내줄 수 있다.
react-gtm-module 공식문서(?)를 참고해도 좋고
이 글도 좋다.
(사실 나도 안해봐서 GTM 상에서 어떻게 잡히는지는 모르겠다)


➕ SEO 처리에 관해서도 더 알아보면 좋을 것 같고, 강사님은 AI한테 로그 명세서를 받아서 데이터 분석까지 해보라는 말씀도 해주셨다 👍