[Q&A] React 기반 웹사이트에서 GA4 올바르게 설정하려면?

 

새로 이직한 직장에서 데이터 기반 마케터라면 기존에 가졌던 경험을 가지고 자신있게 구글 애널리틱스를
제대로 설치하겠노라라고 생각하신 적 있으시나요? 아니면 광고 대행사에서 신규 고객사가 GA4 설치할 줄 몰라서
GA4 설치 도와주면서 비슷한 생각을 가지신 적 없으신가요?
적어도 전 있었습니다.

과거에 전자상거래 호스팅 업체의 웹사이트의 GA 속성을 최적화하면서 쌓은 경험으로 순조롭게 필요한 이벤트를
추적할 수 있을 거라 생각했었습니다.

그런데 웬일?

희한하게 다른 웹사이트에서는 구글 태그 관리자로 문제 없이 잡혔던 이벤트들이 해당 웹사이트에서 잘 안잡히면서
웹사이트 내 퍼포먼스 추적이 어려웠던 경험이 있었습니다.
나중에 깨달았던 건 해당 웹사이트가 리액트로 개발되었다는 점이었습니다.
그런데 그게 이벤트가 안잡히는 것이랑 무슨 관계가 있을까요?

리액트란

위키백과에 따르면 React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서
사용자 인터페이스를 만들기 위해 사용된다고 합니다.

최근 몇년간 웹 프론트엔드 개발자 사이에서 리액트가 인기가 많았는데 그 이유는 아래와 같습니다.

1. 불필요한 웹사이트 렌더링 과정의 비효율성을 최소화 => 웹사이트 빨라짐
2. 컴포넌트 단위로 개발하는 형식으로 개발자에게는 가독성이 높을 뿐 아니라 캡슐화, 확장성, 결합성, 재사용성에 용이함
3. 이미 익숙한 자바스크립트 기반 프레임워크로서 개발자에게는 러닝 커브가 높은 편이 아님
4. 서버 사이드 렌더링, 클라이언트 사이드 렌더링 지원
5. 다른 프레임워크와 혼용 가능

리액트를 정의하는 특징 중 하나는 리액트 기반의 웹사이트는 Single Page Application (이하 SPA)라는 점인데
React 외에도 Vue, Angular 등 다른 웹 프레임워크도 SPA를 산출합니다. SPA가 가진 특징 때문에 원하는 이벤트가
안 잡히는 경우가 많은데 그러면 SPA는 무엇일까요?

SPA란

SPA는 한 개의 페이지로 구성된 웹사이트로서 기존페이지에 서브 페이지나 적절한 자원, 데이터 등 만을 넘겨주어
클라이언트 상에 렌더링 이 이루어지는 방식으로 동작합니다.

SPA와 전통적인 웹사이트의 차이점

이벤트 추적 유실의 원인

다른 웹사이트면 특정 페이지 조회 이벤트를 추적하기 위해 구글 태그 관리자에서 '페이지뷰' 유형의 트리거를 사용하면
충분하지만 리액트에서는 해당 트리거로는 이벤트 추적을 할 수 없습니다.
페이지뷰는 새로운 페이지가 로딩되어 클라이언트에서 보여질 때 발동하는 트리거 유형이기 때문입니다.

그리고 우리가 흔히 알고 있는 gtag 양식으로 맞춤형 이벤트를 설치할 수 없습니다.
HTML이 아닌 React에 맞는 양식대로 이벤트 태그를 설치해야 하기 때문입니다.
그런데 이상한 것은 구글 애널리틱스 4 개발자 문서 그 어디에도 리액트 환경에서 어떻게 구글 애널리틱스 4 스크립트를 설치해야 하는지 알려주지 않습니다. 리액트가 페이스북에서 개발된 언어라서 그런가 봅니다...

 

그러면 리액트 기반의 웹사이트에서는 어떻게 GA4를 설치해야 할까요?
기존 웹사이트의 사례와 다른 점들만 뽑아서 정리했습니다!

---

1. 향상된 측정 설정 사항 확인

페이지가 렌더링 형식으로 변형되는 케이스라서 거기에 맞게끔 페이지 조회 이벤트를 측정하려면
아래의 설정 사항을 확인하셔야 합니다.

GA4 관리>데이터 스트림>스트림 선택>이벤트 향상된 측정 아래 있는 톱니바퀴 아이콘 클릭 (아래 이미지 참고)>
'고급 설정 표시' 클릭>'브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항' 체크

GA4 향상된 측정 설정 방법: 리액트 웹사이트 사례

 

2. 페이지 조회 기반 맞춤 이벤트는 '기록 변경' 트리거 유형으로!

앞서 얘기했던 것처럼 '페이지뷰' 유형의 트리거로 특정 페이지 조회한 이벤트를 추적하면 안 됩니다.
대신 '기록 변경' 트리거 유형을 가지고 이벤트 태그를 설정해야 GA4에서 이벤트가 확인이 됩니다.

기록 변경 유형의 트리거 구성 예시

3. react-ga4 패키지 사용

혹시라도 맞춤형 측정기준과 측정항목이 포함된 이벤트를 측정해야 한다면 이벤트 태그를 직접 웹사이트 소스코드에
반영하도록 개발자에게 요청할 수 있습니다. 일반 웹사이트의 경우 아래와 같이 gtag를 전달하면 해결되는 문제입니다.

gtag('event', '이벤트명', {
  '변수 1 ID': '변수값',
  '변수 2 ID': '변수값'
});

그러나 리액트 기반의 웹사이트에서는 위 양식대로는 안되고 아래의 링크를 통해 npm을 설치하도록
개발자에게 요청 해야 합니다.

react-ga4

 

위 패키지를 설치하신 경우 아래의 양식에 맞춰 측정해야 할 이벤트를 개발자에게 전달하고
구글 태그 관리자에서는 '맞춤 이벤트' 유형의 트리거로 이벤트를 추적하면 됩니다.

ReactGA.event({
  category: "이벤트 카테고리명",
  action: "이벤트명",
  label: "이벤트 라벨명", // optional
  value: {가치값}, // optional, must be a number
{맞춤 변수명}: {변수값},
});

4. 맞춤형 gtm.load 태그 설치

웹사이트에 따라 다르지면 어떤 경우에는 페이지가 열리자마자 스크롤 이벤트가 다 스크롤된 상태로 수집되는 등
이벤트 수집 문제를 겪을 수 있습니다. 이런 문제를 해결하려면 새로운 페이지가 열릴 때마다
gtm.load를 수동으로 작동하여 매 페이지마다 새로운 페이지가 로딩된 것으로
구글 태그 관리자가 인식하도록 만들면 됩니다. 이를 위해서 아래와 같이 맞춤 이벤트 태그를 만들면 됩니다.

gtm.load 위한 맞춤 HTML 이벤트 태그 적용 예시

맞춤 HTML 스크립트는 아래와 같습니다.

<script>
window.dataLayer.push({
'event': 'gtm.load'
});
</script>

 

마치는 글

웹사이트마다 개발 컨디션이 조금씩 다르고 내 자신도 모든 기술적인 이슈를 다 경험해보지 않았기 때문에
모든 경우의 수를 고려한 다양한 확인 항목들을 여기에 정리하지 못했습니다.
하지만 기본적으로 상기 언급한 항목들을 처리하는 것만으로도 기존보다 더 정확히 이벤트를 추적할 수 있다고
말씀드릴 수 있으며 혹시라도 궁금하신 내용 있으시면 댓글 부탁드립니다.
그리고...

제 글이 도움이 되었다면 공감!
제 콘텐츠를 놓치고 싶지 않으시면 이웃신청!
부탁드립니다 (_ _)

 

도움이 되는 콘텐츠:

구글애널리틱스 GA4 설정 시 확인해야 할 체크리스트