페이지 로드 시간을 줄이면 사이트의 전반적인 사용자 경험을 개선할 수 있습니다. 이 페이지에서는 사용자 시간 정보를 Google 애널리틱스로 전송하는 방법을 설명합니다.
구현
event 명령어를 사용하여 timing_complete 이벤트를 전송합니다.
gtag('event', 'timing_complete', {<timing_parameters>});
여기서 <timing_parameters>는 하나 이상의 매개변수-값 쌍입니다. 각 쌍을 쉼표로 구분하세요. 예를 들어 이 명령어는 현재 웹페이지에서 모든 외부 JavaScript 종속 항목을 로드하는 데 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 |
아니요 |
보고서에서 사용자 시간을 더 유연하게 시각화하는 데 사용할 수 있는 문자열입니다(예: '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% |