기존에는 Google Analytics (GA4) 만을 사용하여 사용자 통계 분석을 했다.
그리고 Google Tag Manager (GTM) 으로 전환하여 GA4 및 그 외 기능들을 사용하려고 한다.

그 전에 해결해야할 문제가 있었다.

바로 SPA의 고질적인 문제인 페이지 전환시 데이터를 실시간으로 수집하기 어려웠다.
현재 접속한 사람들의 경우 A 페이지를 먼저 진입하고 B 페이지 → C 페이지로 이동하면 C 페이지의 제목이 나와야하는데 SPA 일 경우 A 페이지만 계속 보여진다.

개발 서버에서 한번 보자,

1. 아무것도 접속하지 않은 상태

2. 상품 조회 페이지 접속

3. 상품 조회 트래킹 확인

4. 회원 가입 페이지로 전환

5. 여전히 상품 조회로 트래킹 됨

이렇듯 페이지 전환에 대한 현재 실제 보고 있는 페이지들의 정보를 명확하게 가져올 수 없었다.

그래서 window.dataLayer.push({ 'event': "page_view" }) 라는 스크립트를 통해 설정할 수 있지만 이 것만으로 트래킹이 안되어서 주말 내내 프론트 엔드 코드를 수정하고 gtm을 수정하고 ga4를 수정하고 난리도 아니였다.

사용자 user id 값은 gtm 이벤트 변수를 파라미터로 받아서 전달하면 되기 때문에 SHA256 암호화만 처리해서 넣으면 되기 때문에 별로 어렵지 않았다.

주말간의 작업 후 드디어 성공!

이제 페이지를 전환할 때마다 위 이미지처럼 페이지 제목이 함께 변경되어 쌓인다.
ga는 30분간 누적 실시간이기 때문에 바로바로 변경된 페이지로 대체되는 것이 아니라 선입선출식으로 데이터가 실시간으로 업데이트 누적된다.

그렇다고 접속자가 페이지 이동할 때마다 누적되는 것은 아니다.
내가 아무리 페이지를 전환해도 접속한 사용자는 하나로 본다.
user id 를 이용해서 login user 라는 사용자 속성을 만들었고 해당 속성을 보면 all users 수와 동일하게 3을 유지한다. 절대 페이지 제목에 나와있는 갯수만큼 사용자가 늘어나진 않는다.

예전에 프론트 엔드 개발자로 일 했었고 마케터랑 둘이 쿵짝 쿵짝 했던 프로젝트들이 많아서 혼자 구현해 봤다.
CTO라고는 하지만 사업부 전체를 총괄하다보니 이런 마케팅과 통계, 데이터가 중요하다는 것을 알기 때문에 놓치지 않고 분석 중이다.

나에겐 통계 데이터의 진실성이 중요하고 필요하다. ㅎㅎ

여튼 국내외 정보들이 예전 자료들이고 진짜 프론트 엔드 개발자가 작업할 것과 마케터가 작업할 것들이 너무 나뉘어 포스팅 되어 있어서 취합해서 적용시키느라 고생 좀 했지만 직원들한테 코드 리뷰할 생각하니 벌써 신난다. 🕺🏻👯💃🏻

내일 컨플루언스에 정리해 놓은 코드 리뷰용 포스팅을 마무리 하고 오늘은 퇴근하려고 한다.