React, Vue, Angular와 같은 프레임워크로 제작된 SPA(Single Page Application) 환경에서 GA4를 운영할 때, 많은 마케터와 분석가들이 “사용자는 페이지를 이동하는데 데이터상으로는 첫 페이지에 머물러 있다”는 문제에 직면합니다.
기존 웹 방식과 달리 SPA는 브라우저의 전체 페이지를 새로고침하지 않고 필요한 데이터만 비동기적으로 불러오기 때문에, 전통적인 방식의 GA4 스크립트 설치만으로는 페이지 전환을 감지하지 못하는 경우가 빈번합니다. 이 문제를 방치하면 이탈률, 체류 시간, 유입 경로 데이터가 모두 왜곡됩니다. 본 가이드에서는 기술적 메커니즘을 바탕으로 SPA 환경에서 가상 페이지뷰(Virtual Pageviews)를 완벽하게 추적하는 최적의 솔루션을 제시합니다.
Part 1 – SPA 가상 페이지뷰의 핵심 개념과 중요성
데이터 분석 실무 관점에서 SPA의 페이지뷰 추적은 단순히 ‘조회수’를 올리는 작업이 아닙니다. 이는 사용자의 여정(User Journey)을 선형적으로 복원하는 과정입니다.
SPA 가상 페이지뷰 핵심 포인트 1: History API와 브라우저 상태 변화
SPA는 History API(pushState, replaceState)를 사용하여 URL을 변경합니다. GA4의 향상된 측정(Enhanced Measurement) 기능은 이를 자동으로 감지하려고 시도하지만, 개발 환경의 라우팅 구현 방식에 따라 감지가 되지 않거나 중복 수집되는 이슈가 발생합니다. 따라서 분석가는 브라우저의 ‘주소창이 바뀔 때’를 명확히 정의하고 이를 이벤트로 전송해야 합니다.
SPA 가상 페이지뷰 핵심 포인트 2: UA와 GA4의 구현 방식 차이
과거 UA(Universal Analytics)에서는 set page와 send pageview 명령어를 순차적으로 실행해야 했으나, GA4는 이벤트 기반 모델입니다. GA4에서는 page_view라는 이벤트 이름과 함께 page_location 및 page_title 매개변수를 전송하는 것만으로도 충분합니다. 특히 GA4는 페이지 로드 시 자동으로 발생하는 첫 번째 page_view와 사용자의 동작으로 발생하는 이후의 가상 페이지뷰를 일관된 데이터 구조로 통합하여 분석할 수 있게 해줍니다.
Part 2 – 실무 적용 가이드
GTM(Google Tag Manager)을 활용하여 개발자의 추가 공수를 최소화하면서 가상 페이지뷰를 설정하는 방법입니다.
Step 1: 브라우저 기록 변경 트리거 설정
GA4가 URL 변화를 감지할 수 있도록 GTM에서 기본 트리거를 생성합니다.
- GTM 컨테이너 접속 > 트리거 > 새로 만들기.
- 트리거 유형: 기록 변경 (History Change) 선택.
- 발생 조건: 모든 기록 변경.(이 트리거는 브라우저의 pushState 또는 popState가 실행될 때마다 활성화됩니다.)
Step 2: GA4 구성 태그 연동 및 변수 확인
기록이 변경될 때 현재의 정확한 URL과 제목을 가져와야 합니다.
- 태그 > 새로 만들기 > Google 태그 또는 GA4 이벤트 태그 선택.
- 이벤트 이름: page_view
- 이벤트 매개변수 설정:
- page_location: {{Page URL}} (GTM 기본 변수)
- page_title: {{Page Title}} (GTM 기본 변수)
- 주의사항: GA4 설정의 ‘향상된 측정’에서 ‘브라우저 기록 이벤트를 토대로 한 페이지 변경사항’ 옵션이 켜져 있다면 GTM 설정과 중복될 수 있습니다. 중복 수집이 확인되면 한쪽 설정을 비활성화해야 합니다.
Step 3: 데이터 확인 및 검증 방법
설정이 완료되었다면 실시간 보고서를 통해 검증합니다.
- GTM 미리보기(Preview) 모드 실행.
- SPA 사이트에서 메뉴를 클릭하여 페이지를 이동합니다.
- GTM 디버그 창 왼쪽 패널에 History 이벤트가 찍히는지 확인합니다.
- GA4 실시간 보고서 > 페이지 타이틀 및 화면 이름 카드에서 현재 보고 있는 가상 페이지 경로가 정상적으로 수집되는지 확인합니다.
FAQ – SPA 가상 페이지뷰 관련 자주 묻는 질문
Q1. 페이지 이동 시 URL은 변하는데 GA4 데이터에는 잡히지 않습니다.
Google 공식 문서에 따르면, 일부 SPA 프레임워크는 GA4의 기본 ‘향상된 측정’이 감지하기 전 로직을 처리해버립니다. 이 경우 GTM의 ‘기록 변경’ 트리거를 별도로 생성하여 page_view 이벤트를 강제로 발생시켜야 합니다.
Q2. 가상 페이지뷰 설정 후 데이터가 2번씩 찍히는데 이유가 무엇인가요?
GA4의 자동 페이지뷰 측정 기능과 GTM의 수동 트리거가 동시에 작동하기 때문입니다. GA4 설정의 [데이터 스트림 설정 > 향상된 측정 > 고급 설정]에서 ‘브라우저 기록 이벤트’ 옵션을 끄거나, GTM 태그의 실행 조건을 조정하십시오.
Q3. page_location 매개변수를 꼭 수동으로 넣어야 하나요?
반드시 그런 것은 아니지만, SPA에서는 브라우저 주소창의 값이 실제 가상 경로와 다를 수 있는 파라미터(Fragment 등)를 포함할 수 있습니다. 데이터 클렌징을 위해 정제된 값을 매개변수로 전송하는 것이 실무적으로 권장됩니다.
Q4. Fragment(URL의 # 뒷부분)를 페이지뷰로 인식하게 할 수 있나요?
네, 가능합니다. GTM 기록 변경 트리거는 해시(#) 변화도 감지합니다. 다만, 이 정보가 page_location에 포함되도록 변수 설정이 되어 있는지 확인이 필요합니다.
Q5. 개발자가 데이터 영역(dataLayer)에 이벤트를 밀어넣어 주는 게 더 정확한가요?
Google 개발자 가이드는 가장 확실한 방법으로 dataLayer.push({‘event’: ‘virtual_pageview’}) 방식을 추천합니다. GTM의 기록 변경 트리거보다 개발자가 라우팅 완료 시점에 직접 이벤트를 쏴주는 것이 시점상 가장 정확하기 때문입니다.
결론
SPA 환경에서의 가상 페이지뷰 구현은 단순한 기술 설정을 넘어 비즈니스의 성과 측정 신뢰도를 결정짓는 핵심 작업입니다. 페이지뷰가 정확히 측정되어야만 사용자가 어떤 콘텐츠에 열광하는지, 결제 단계 어느 지점에서 이탈하는지를 정확히 파악할 수 있습니다.
단순히 자동 측정 기능에 의존하기보다, 서비스의 라우팅 구조를 파악하여 GTM의 기록 변경 트리거 또는 맞춤 dataLayer 이벤트를 조합하는 하이브리드 전략을 사용하시기 바랍니다.
이를 통해 누락 없는 데이터를 확보한다면, 더욱 정교한 리마케팅과 전환 최적화(CRO)가 가능해질 것입니다.