gtag.js를 사용한 단일 페이지 애플리케이션 측정

이 페이지에서는 gtag.js를 사용하여 기존의 전체 페이지 로드 없이 콘텐츠를 동적으로 로드하는 사이트 페이지와의 상호작용을 측정하는 방법을 설명합니다.

개요

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

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

가상 페이지뷰 측정

애플리케이션이 콘텐츠를 동적으로 로드하여 주소 표시줄의 URL을 업데이트하면 gtag.js로 저장된 페이지 URL도 업데이트되어야 합니다. 그런 다음 사이트 주소의 변경사항을 페이지 조회수로 측정할 수도 있습니다.

gtag.js에서 보고하는 경로를 설정하려면 set 명령어를 사용하여 page_path 매개변수의 값을 지정하세요.

gtag('set', 'page_path', page_path);
gtag('event', 'page_view');

예를 들면 다음과 같습니다.

gtag('set', 'page_path', '/new-page.html');
gtag('event', 'page_view');

page_path 값을 추가한 후 이 속성으로 전송되는 모든 후속 이벤트에서 새 값을 사용합니다.

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

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

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

  • /about
  • /#/about
  • /home/#/about

보고서에서 중복을 방지하려면 page_path/about를 사용하여 위의 모든 페이지를 기록하는 것이 가장 좋습니다.