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

이 가이드에서는 기존의 전체 페이지가 로드되지 않고 콘텐츠가 동적으로 로드되는 사이트의 페이지 활동을 analytics.js를 통해 측정하는 방법을 설명합니다.

개요

단일 페이지 애플리케이션(SPA)은 첫 페이지 로드 시 사이트 전반에서 탐색하는 데 필요한 모든 리소스를 로드하는 웹 애플리케이션 또는 웹사이트입니다. 사용자가 링크를 클릭하고 페이지와 상호작용하면 후속 콘텐츠가 동적으로 로드됩니다. 애플리케이션은 주소 표시줄의 URL을 업데이트하여 기존 페이지 탐색을 에뮬레이션하기도 하지만, 또 다른 전체 페이지 요청을 수행하지는 않습니다.

사용자가 새 페이지를 로드할 때마다 스니펫 코드가 실행되므로, 기본 Google 애널리틱스 태그는 전형적인 웹사이트에서 원활하게 작동합니다. 반면 사이트가 전체 페이지를 로드하는 대신 새 페이지 콘텐츠를 동적으로 로드하는 단일 페이지 애플리케이션의 경우, analytics.js 스니펫 코드가 한 번만 실행됩니다. 따라서 새 콘텐츠가 로드될 때 후속 (가상) 페이지뷰를 수동으로 캡처해야 합니다.

가상 페이지뷰 추적

애플리케이션이 콘텐츠를 동적으로 로드하여 주소 표시줄의 URL을 업데이트할 때 추적기에 저장된 데이터도 업데이트되어야 합니다.

추적기를 업데이트하려면 다음과 같이 set 명령어를 사용하고 새 page 값을 제공합니다.

ga('set', 'page', '/new-page.html');

새 페이지 값이 설정되면, 전송된 모든 후속 조회는 새로운 값을 사용합니다. 페이지 조회를 기록하려면 추적기를 업데이트한 직후에 페이지 조회를 전송합니다.

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

기술적으로 페이지 조회에 대한 send 명령어는 선택사항인 page 필드를 세 번째 매개변수로 허용하지만, 단일 페이지 애플리케이션을 측정할 때는 page 필드를 그런 식으로 전달하지 않는 것이 좋습니다. 이는 send 명령어를 통해 전달된 필드는 추적기에 설정되지 않고 현재 조회에만 적용되기 때문입니다. 추적기를 업데이트하지 않으면 애플리케이션이 페이지 조회가 아닌 조회(예: 이벤트 또는 소셜 상호작용)를 전송하는 경우 문제가 발생합니다. 이러한 조회는 추적기를 만들었을 때 지정됐던 page 값과 관련이 있기 때문입니다.

동일한 리소스에 대한 여러 URL 처리

일부 SPA는 동적으로 콘텐츠를 로드할 때 URL의 해시 부분만 업데이트합니다. 이렇게 하면 서로 다른 여러 페이지 경로가 동일한 리소스를 가리키는 상황이 발생할 수 있습니다. 이러한 경우에는 일반적으로 표준 URL을 선택하고 page 값만 Google 애널리틱스로 전송하는 것이 가장 좋습니다.

예를 들어 다음 URL 중 하나를 통해 '회사 소개' 페이지에 도달할 수 있는 웹사이트를 가정해 보겠습니다.

  • /about.html
  • /#about.html
  • /home.html#about.html

보고서에서 중복을 방지하려면 모든 페이지 조회를 /about.html로 캡처하는 것이 가장 좋습니다.

중요 고려사항

문서 리퍼러 업데이트 안 함

create 명령어를 사용하여 추적기 객체를 만들면 document.referrer 값이 추적기의 referrer 필드에 저장됩니다. 전체 페이지 로드를 사용하지 않는 단일 페이지 애플리케이션의 경우, referrer 필드는 항상 동일하게 유지됩니다.

그럼에도 불구하고 페이지 조회를 전송하기 전에 리퍼러 필드를 수동으로 업데이트할 필요는 없습니다. Google 애널리틱스에서는 올바른 탐색 경로를 자동으로 확인할 수 있습니다.

문서 위치 업데이트 안 함

추적기는 referrer 필드에 document.referrer를 사용하는 것과 같은 방식으로 location 필드에 document.location을 사용합니다. 이 필드에는 URL의 끝에 추가되는 쿼리 매개변수의 형식으로 캠페인 데이터 또는 기타 메타데이터가 포함될 수 있습니다.

Google 애널리틱스에서 확인 중인 캠페인 필드 또는 기타 메타데이터를 업데이트하면 현재 세션이 종료되고 새 세션이 시작될 수 있습니다. 이러한 문제를 방지하려면 단일 페이지 애플리케이션에서 가상 페이지뷰를 측정할 때 location 필드를 업데이트하지 마세요. 대신 page 필드를 사용하세요.

새 추적기를 만들지 않음

기존 웹사이트에 대한 JavaScript 추적 스니펫의 기능을 모방하기 위해 단일 페이지 앱에서 새로운 추적기를 만들지 마세요. 추적기를 만들 경우 위에서 설명한 대로 잘못된 리퍼러와 잘못된 캠페인 데이터가 전송될 위험이 있습니다.