이 문서는 Google 애널리틱스를 사용하여 싱글 페이지 애플리케이션의 페이지 조회수를 측정하려는 개발자를 대상으로 합니다.
단일 페이지 애플리케이션(SPA)은 HTML 문서를 한 번 로드하고 JavaScript API를 사용하여 추가 콘텐츠를 가져오는 웹사이트입니다.
예: 리드를 획득하기 위한 양식이 있다고 가정해 보겠습니다. 양식에는 세 개의 화면이 있습니다.
- 고객 정보를 캡처하는 첫 번째 화면입니다.
- 고객이 특정 서비스에 관심을 표시하는 두 번째 화면
- 고객의 관심분야와 관련된 웨비나에 가입하는 세 번째 화면 페이지
SPA의 페이지 조회수를 올바르게 측정하려면 사용자가 상호작용하는 각 화면의 페이지 조회수를 집계하고 페이지 리퍼러를 올바르게 가져와야 사용자 여정을 올바르게 추적할 수 있습니다.
시작하기 전에
이 페이지에서는 다음이 이미 있다고 가정합니다.
웹사이트의 Google 애널리틱스 4 계정 및 속성 Google 애널리틱스를 설정하는 방법을 알아보세요.
페이지가 처음 로드될 때 실행되는 웹사이트에 구현된 Google 태그 Google 태그를 설정하는 방법을 알아보세요.
단일 페이지 애플리케이션 측정 구현
정확한 SPA 측정을 구현하려면 다음 방법 중 하나를 사용하여 새 가상 페이지 조회수를 트리거하세요.
브라우저 기록 변경 (권장): SPA에서 History API, 특히
pushState()및replaceState()메서드를 사용하여 화면을 업데이트하는 경우 이 옵션을 사용합니다.맞춤 이벤트: 웹사이트에서
DocumentFragment객체를 사용하여 다양한 화면을 렌더링하는 경우 이 옵션을 사용합니다.
브라우저 기록 변경 구현
GA4에서 향상된 측정 사용 설정
브라우저 기록을 기반으로 page_views를 자동으로 측정하려면 다음 단계를 따르세요.
Google 애널리틱스를 엽니다.
관리의 데이터 수집 및 수정에서 데이터 스트림 > 웹을 클릭합니다.
향상된 측정에서 스위치를 사용으로 슬라이드하여 모든 옵션을 사용 설정합니다.
개별 옵션을 수정하려면 클릭하세요. 페이지 조회수에서 고급 설정 표시를 클릭합니다. 페이지 로드와 브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항을 모두 사용 설정해야 합니다.
변경사항을 저장합니다.
측정 설정 확인
단일 페이지 애플리케이션이 페이지 조회를 올바르게 측정하는지 확인하려면 다음 단계를 따르세요.
SPA 측정 설정의 모든 태그에 대해 디버그 모드를 사용 설정합니다. DebugView에서 이벤트를 모니터링하는 방법을 알아보세요.
단일 페이지 애플리케이션을 클릭합니다. 새 가상 화면을 클릭하면 DebugView에 새
page_view이벤트가 표시됩니다.page_view이벤트 매개변수를 이전page_view이벤트와 비교하여 페이지 리퍼러와 페이지 위치가 올바르게 업데이트되었는지 확인합니다.