단일 페이지 애플리케이션 측정

이 문서는 Google 애널리틱스를 사용하여 싱글 페이지 애플리케이션의 페이지 조회수를 측정하려는 개발자를 대상으로 합니다.

단일 페이지 애플리케이션(SPA)은 HTML 문서를 한 번 로드하고 JavaScript API를 사용하여 추가 콘텐츠를 가져오는 웹사이트입니다.

예: 리드를 획득하기 위한 양식이 있다고 가정해 보겠습니다. 양식에는 세 개의 화면이 있습니다.

고객 정보를 캡처하는 첫 번째 화면입니다.

고객이 특정 서비스에 관심을 표시하는 두 번째 화면

고객의 관심분야와 관련된 웨비나에 가입하는 세 번째 화면 페이지

SPA의 페이지 조회수를 올바르게 측정하려면 사용자가 상호작용한 각 화면의 페이지 조회수를 집계하고 페이지 리퍼러를 올바르게 가져와야 사용자 여정을 올바르게 추적할 수 있습니다.

시작하기 전에

이 페이지에서는 다음이 이미 있다고 가정합니다.

정확한 SPA 측정을 구현하려면 다음 방법 중 하나를 사용하여 새 가상 페이지 조회수를 트리거하세요.

브라우저 기록 변경 (권장): SPA에서 History API, 특히 pushState() 및 replaceState() 메서드를 사용하여 화면을 업데이트하는 경우 이 옵션을 사용합니다.
맞춤 이벤트: 웹사이트에서 DocumentFragment 객체를 사용하여 다양한 화면을 렌더링하는 경우 이 옵션을 사용합니다.

SPA에서 History API를 사용하는 경우 Google 애널리틱스에서 향상된 측정을 사용 설정하여 브라우저 기록 이벤트를 기반으로 페이지 조회를 자동으로 추적할 수 있습니다.

브라우저 기록을 기반으로 page_views를 자동으로 측정하려면 다음 단계를 따르세요.

Google 애널리틱스를 엽니다.
관리의 데이터 수집 및 수정에서 데이터 스트림 > 웹을 클릭합니다.
향상된 측정에서 스위치를 사용으로 슬라이드하여 모든 옵션을 사용 설정합니다.
개별 옵션을 수정하려면 클릭하세요. 페이지 조회수에서 고급 설정 표시를 클릭합니다. 페이지 로드와 브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항을 모두 사용 설정해야 합니다.
변경사항을 저장합니다.

단일 페이지 애플리케이션이 페이지 조회를 올바르게 측정하는지 확인하려면 다음 단계를 따르세요.

SPA 측정 설정의 모든 태그에 대해 디버그 모드를 사용 설정합니다. DebugView에서 이벤트를 모니터링하는 방법을 알아보세요.
단일 페이지 애플리케이션을 클릭합니다. 새 가상 화면을 클릭하면 DebugView에 새 page_view 이벤트가 표시됩니다. page_view 이벤트 매개변수를 이전 page_view 이벤트와 비교하여 페이지 리퍼러와 페이지 위치가 올바르게 업데이트되었는지 확인합니다.

SPA에서 가상 페이지 조회 측정을 올바르게 구현하면 Google 애널리틱스에서 다른 자동 이벤트를 적절하게 처리합니다. 화면 변경에 대한 가상 페이지 조회가 기록되지 않으면 Google 애널리틱스에서 SPA를 단일 페이지로 취급하여 측정항목이 왜곡됩니다.

예를 들어 user_engagement 이벤트는 사용자가 페이지에서 적극적으로 보내는 시간을 측정합니다. 가상 페이지 조회 없이는 모든 참여 시간이 초기 페이지 로드에 기여한 것으로 간주되므로 개별 화면에서 소비된 시간을 분석할 수 없습니다.

가상 페이지 조회수 측정이 올바르게 구현된 경우:

user_engagement 이벤트는 사용자가 한 가상 페이지에서 다른 가상 페이지로 이동할 때 전송됩니다.
이전 가상 페이지의 참여 시간이 계산되어 user_engagement 이벤트와 함께 전송됩니다. 일반적으로 새 가상 페이지의 page_view 이벤트가 처리되기 직전입니다.
클릭이나 스크롤과 같은 다른 이벤트는 사용자가 현재 보고 있는 가상 페이지의 page_location와 연결됩니다.

이를 통해 SPA 내의 개별 화면 또는 섹션에 대한 사용자 참여도 및 기타 측정항목을 분석하여 사용자 여정을 더 정확하게 파악할 수 있습니다.