이 문서는 Google 애널리틱스를 사용하여 단일 페이지 애플리케이션의 페이지 조회수를 측정하려는 개발자를 위한 것입니다.
단일 페이지 애플리케이션 (SPA)은 HTML 문서를 한 번 로드하고 JavaScript API를 사용하여 추가 콘텐츠를 가져오는 웹사이트입니다.
예: 잠재고객을 확보하기 위한 양식이 있다고 가정해 보겠습니다. 양식에는 세 개의 화면이 있습니다.
- 고객 정보를 캡처하는 첫 번째 화면
- 고객이 특정 서비스에 관심을 표시하는 두 번째 화면
- 고객의 관심분야와 관련된 웹 세미나에 등록하는 세 번째 화면 페이지
SPA에서 페이지 조회수를 올바르게 측정하는 핵심은 사용자가 상호작용하는 각 화면의 페이지 조회수를 집계하고 페이지 리퍼러를 올바르게 가져와 사용자 여정을 올바르게 추적하는 것입니다.
시작하기 전에
이 페이지에서는 다음이 이미 있다고 가정합니다.
단일 페이지 애플리케이션 측정 구현
정확한 SPA 측정을 구현하려면 다음 방법 중 하나를 사용하여 새 가상 페이지 조회수를 트리거하세요.
브라우저 방문 기록 변경 (권장): SPA에서 방문 기록 API, 특히
pushState()및replaceState()메서드를 사용하여 화면을 업데이트하는 경우 이 옵션을 사용합니다.맞춤 이벤트: 웹사이트에서
DocumentFragment객체를 사용하여 여러 화면을 렌더링하는 경우 이 옵션을 사용합니다.
브라우저 방문 기록 변경 구현
SPA에서 방문 기록 API를 사용하는 경우 Google 애널리틱스에서 향상된 측정을 사용 설정하여 브라우저 방문 기록 이벤트를 기반으로 페이지 조회수를 자동으로 추적할 수 있습니다.
GA4에서 향상된 측정 사용 설정
브라우저 방문 기록을 기반으로 page_views를 자동으로 측정하려면 다음 안내를 따르세요.
Google 애널리틱스를 엽니다.
관리의 데이터 수집 및 수정에서 데이터 스트림 > 웹을 **클릭** 합니다.
향상된 측정에서 스위치를 사용으로 슬라이드하여 모든 옵션을 사용 설정합니다.
개별 옵션을 클릭하여 수정합니다. **페이지 조회수** 에서 **고급 설정 설정 표시** 를 클릭합니다. 페이지 로드 와 브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항 을 모두 사용 설정해야 합니다.
변경사항을 저장 합니다.
참고: '브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항'에 향상된 측정을 사용 설정하면 Google 애널리틱스에서 방문 기록 이벤트 (예: SPA에서 사용되는 이벤트)를 자동으로 수신 대기하고 page_view 이벤트를 전송합니다. GA4에 페이지 조회수를 전송하기 위해 Google 태그 관리자에서 특정 방문 기록 변수 또는 트리거를 구성할 필요가 없습니다.
방문 기록 이벤트에 Google 태그 관리자 트리거 사용
다른 마케팅 플랫폼에 데이터를 전송하는 등 브라우저 방문 기록 변경사항을 기반으로 Google 태그 관리자에서 다른 유형의 태그를 실행해야 하는 경우 '방문 기록 변경' 트리거 유형을 사용할 수 있습니다.
방문 기록 변경 트리거와 함께 작동하도록 태그 또는 변수를 구성할 때는 Google 태그 관리자에서 제공하는 올바른 기본 제공 변수 를 사용해야 합니다.
History New URL Fragment: 방문 기록 이벤트 후 URL의 프래그먼트입니다.History Old URL Fragment: 방문 기록 이벤트 전 URL의 프래그먼트입니다.History New State: 새 방문 기록 상태 객체입니다.History Old State: 이전 방문 기록 상태 객체입니다.History Source: 방문 기록 이벤트의 소스 (예:popstate,pushState,replaceState)입니다.
이러한 기본 제공 변수는 먼저 Google 태그 관리자의 변수 > 구성 에서 사용 설정해야 할 수 있습니다.
이 트리거에 대한 자세한 내용은 방문 기록 변경 트리거를 참고하세요.
측정 방식 설정 확인
단일 페이지 애플리케이션에서 페이지 조회수를 올바르게 측정하는지 확인하려면 다음 안내를 따르세요.
SPA 측정 방식 설정의 모든 태그에 디버그 모드를 사용 설정합니다. DebugView에서 이벤트 모니터링 방법을 알아보세요.
단일 페이지 애플리케이션을 클릭합니다. 새 가상 화면을 클릭하면 DebugView에 새
page_view이벤트가 표시됩니다.page_view이벤트 매개변수를 이전page_view이벤트와 비교하여 페이지 리퍼러와 페이지 위치가 올바르게 업데이트되었는지 확인합니다.
SPA에 대한 추가 고려사항
page_view 이벤트를 전송하는 것 외에도 Google 애널리틱스와의 강력한 SPA 통합 및 더 나은 사용자 환경을 위해 다음 추가 측면을 고려하세요.
스크롤 위치 관리
사용자가 SPA에서 뷰 간에 이동할 때 브라우저는 일반적으로 현재 스크롤 위치를 유지합니다. 즉, 사용자가 새 가상 페이지의 상단을 보지 못할 수 있으며 스크롤한 정도 추적에 영향을 미칠 수 있습니다.
권장사항: 각 가상 페이지 전환 후 스크롤 위치를 페이지 상단 또는 기본 콘텐츠 컨테이너로 프로그래매틱 방식으로 재설정합니다.
// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);
// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);
이 변경사항을 적용하면 사용자가 새 콘텐츠의 상단에서 시작하므로 Google 애널리틱스 스크롤 추적에서 새 가상 페이지의 참여도를 정확하게 측정할 수 있습니다.
브라우저 기능의 콘텐츠 접근성 보장
사용자가 가상 페이지 로드 후 페이지 내 검색 (Ctrl+F)과 같은 브라우저 기능이 작동하지 않는 문제를 신고하는 경우 SPA에서 DOM을 업데이트하는 방법을 나타낼 수 있습니다.
권장사항: SPA 프레임워크와 라우팅 로직이 새 페이지의 콘텐츠로 DOM의 관련 부분을 완전하고 동기적으로 업데이트하는지 확인합니다. 지연된 렌더링 또는 기본 DOM 트리에서 숨겨진 콘텐츠는 브라우저의 검색 기능으로 즉시 색인 생성되지 않을 수 있습니다. 가상 탐색 후 페이지 내 검색을 테스트하여 콘텐츠 접근성을 확인합니다.
자동 이벤트에 미치는 영향
SPA에서 가상 페이지 조회수 측정을 올바르게 구현하면 Google 애널리틱스에서 다른 자동 이벤트를 적절하게 처리합니다. 화면 변경에 가상 페이지 조회수가 기록되지 않으면 Google 애널리틱스에서 SPA를 단일 페이지로 처리하여 측정항목이 왜곡됩니다.
예를 들어 user_engagement 이벤트는 사용자가 페이지에서 적극적으로 보낸 시간을 측정합니다. 가상 페이지 조회수가 없으면 모든 참여 시간이 초기 페이지 로드에 기여한 것으로 간주되므로 개별 화면에서 보낸 시간을 분석할 수 없습니다.
가상 페이지 조회수 측정이 올바르게 구현되면 다음이 적용됩니다.
- 사용자가 한 가상 페이지에서 다른 가상 페이지로 이동할 때
user_engagement이벤트가 전송됩니다. - 이전 가상 페이지의 참여 시간이 계산되어
user_engagement이벤트와 함께 전송됩니다. 일반적으로 새 가상 페이지의page_view이벤트가 처리되기 직전에 전송됩니다. - 클릭 또는 스크롤과 같은 다른 이벤트는 사용자가 현재 보고 있는 가상 페이지의
page_location과 연결됩니다.
이를 통해 SPA 내의 개별 화면 또는 섹션에 대한 사용자 참여도 및 기타 측정항목을 분석하여 사용자 여정을 더 정확하게 파악할 수 있습니다.