[Troubleshooting] 리액트(React) & 뷰(Vue) SPA 웹사이트 GA4 페이지뷰 누락 완벽 해결 아키텍처
"웹사이트 트래픽은 엄청난데, 구글 애널리틱스(GA4)를 보면 사용자들이 페이지를 하나만 보고 100% 이탈한 것으로 나옵니다." 리액트(React), 뷰(Vue), 넥스트(Next.js) 등으로 개발된 현대적인 SPA(Single Page Application) 웹사이트를 운영하는 퍼포먼스 마케터들이 가장 먼저 겪는 치명적인 데이터 누수 현상이다. 눈으로 볼 때는 분명히 사용자가 '메인 페이지 → 상품 페이지 → 결제 페이지'로 이동하고 있는데, GA4 대시보드에는 오직 '메인 페이지' 조회수 1건만 찍혀 있다. 이 에러를 방치하면 마케팅 부서는 어떤 페이지가 전환을 일으키는지 전혀 추적할 수 없게 되어 광고비를 허공에 날리게 된다. 본 가이드에서는 SPA 라우팅의 본질적 한계를 해체하고, 구글 태그 매니저(GTM)를 활용해 자바스크립트의 가상 이동을 완벽하게 추적하는 '가상 페이지뷰(Virtual Pageview)' 아키텍처를 단호하게 제시한다. 1단계: 핵심 원인 분석 (물리적 새로고침의 부재) 기존의 전통적인 웹사이트는 링크를 클릭할 때마다 브라우저가 '물리적으로(Physically)' 새로고침되며 구글 애널리틱스 스크립트가 매번 다시 실행되었다. 하지만 SPA는 최초 1회만 사이트를 로드한 뒤, 화면의 껍데기만 자바스크립트로 바꿔치기한다. 브라우저 입장에서는 URL 주소창의 글자만 바뀌었을 뿐 새로고침이 일어나지 않았기 때문에, GA4 스크립트는 "사용자가 계속 첫 페이지에 머물고 있다"고 착각하는 것이다. 2단계: 1차 방어선 - 향상된 측정(Enhanced Measurement)의 한계 인지 GA4 설정에 들어가면 '향상된 측정' 기능 내에 '브라우저 기록 이벤트를 기반으로 한 페이지 변경'을 추적하는 옵션이 기본적으로 켜져 있다. 초보자들은 이것만 믿고 안심하지만, 복잡한 매개변수가 붙거나 비동기(Asyn...