gtag.js로 사용자 시간 측정

페이지 로드 시간을 줄이면 사이트의 전반적인 사용자 경험을 개선할 수 있습니다. 이 페이지에서는 사용자 시간 정보를 Google 애널리틱스로 전송하는 방법을 설명합니다.

구현

event 명령어를 사용하여 timing_complete 이벤트를 전송합니다.

gtag('event', 'timing_complete', {<timing_parameters>});

여기서 <timing_parameters>는 하나 이상의 매개변수-값 쌍입니다. 각 쌍을 쉼표로 구분하세요. 예를 들어 이 명령어는 현재 웹페이지에서 모든 외부 자바스크립트 종속 항목을 로드하는 데 3,549밀리초가 소요되었음을 표시하여 사용자 시간 이벤트를 Google 애널리틱스로 전송합니다.

gtag('event', 'timing_complete', {
  'name' : 'load',
  'value' : 3549,
  'event_category' : 'JS Dependencies'
});

사용자 시간 매개변수

이 표에는 사용자 시간 매개변수가 요약되어 있습니다.

매개변수 이름	데이터 유형	필수	설명
name	string	예	기록 중인 변수를 나타내는 문자열입니다(예: 'load').
value	integer	예	Google 애널리틱스에 보고하기까지 경과한 시간(밀리초)입니다(예: 20).
event_category	string	아니요	모든 사용자 시간 변수를 논리적 그룹으로 분류하는 문자열입니다(예: 'JS Dependencies').
event_label	string	No	보고서에서 사용자 시간을 더 유연하게 시각화하는 데 사용할 수 있는 문자열입니다(예: 'Google CDN').

시간 측정

timing_complete 이벤트에는 경과 시간을 밀리초 단위로 지정하는 value 매개변수가 필요합니다. 이 값을 캡처하는 코드를 작성하셔야 합니다.

가장 쉬운 방법은 기간이 시작될 때 타임스탬프를 만들고 기간이 끝날 때 다른 타임스탬프를 만드는 것입니다. 그런 다음, 타임스탬프 사이에 경과된 시간을 계산합니다.

대부분의 최신 브라우저는 Navigation Timing API를 지원합니다. 이 API에는 고해상도 시간 데이터를 통해 웹페이지의 성능을 측정하는 window.performance 객체에 관한 메서드가 포함됩니다.

다음 예에서는 페이지가 처음 로드되기 시작한 이후 경과한 시간을 반환하는 performance.now() 메서드를 사용합니다.

// Feature detects Navigation Timing API support.
if (window.performance) {
  // Gets the number of milliseconds since page load
  // (and rounds the result since the value must be an integer).
  var timeSincePageLoad = Math.round(performance.now());

  // Sends the timing event to Google Analytics.
  gtag('event', 'timing_complete', {
    'name': 'load',
    'value': timeSincePageLoad,
    'event_category': 'JS Dependencies'
  });
}

샘플링 고려사항

Google 애널리틱스는 이 기능에 대한 시스템 리소스의 균등한 배포를 보장하기 위해 타이밍 이벤트를 샘플링합니다.

타이밍 이벤트의 샘플링 레이트는 해당 속성에 대해 전날에 수신한 총 페이지 조회수에 의해 결정됩니다. 다음 표에는 타이밍 샘플링 레이트가 결정되는 방식이 요약되어 있습니다.

총 페이지 조회수(전날)	처리할 최대 타이밍 이벤트 수
0~1,000	100
1,000~100,000	총 페이지 조회수의 10%
100,000~1,000,000	10,000
100만 이상	총 페이지 조회수의 1%