사용자 시간 - 웹 추적 (ga.js)

이 문서에서는 _trackTiming 메서드를 사용하는 방법에 관한 포괄적인 가이드를 제공합니다.

소개

연구 결과에 따르면 페이지 로드 시간을 줄이면 사이트의 전반적인 사용자 환경이 개선됩니다. Google 애널리틱스에는 페이지 로드 시간을 자동으로 추적하는 강력한 보고서가 많이 있습니다. 하지만 특정 리소스를 로드하는 데 걸리는 시간을 추적하려면 어떻게 해야 할까요?

예를 들어 인기 자바스크립트 라이브러리를 로드하는 데 시간이 너무 오래 걸려 특정 사용자의 사이트 경험이 저하되나요?

사용자 시간을 통해 Google 애널리틱스에서 기간을 추적하는 기본적인 방법을 제공하여 이 질문에 답할 수 있습니다.

실제 예를 보려면 사용자 시간 샘플 코드를 확인하세요.

사용자 시간 설정

사용자 시간 데이터를 수집하려면 Google 애널리틱스로 시간 데이터를 전송하는 _trackTiming 메서드를 사용해야 합니다.

_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);

여기에서 매개변수는 다음을 나타냅니다.

매개변수 값 필수 요약
category string 예 보다 쉬운 보고를 위해 모든 사용자 시간 변수를 논리적 그룹으로 분류하는 문자열입니다. 예를 들어 특정 자바스크립트 라이브러리를 로드하는 데 걸리는 시간을 추적하는 경우 jQuery 값을 사용할 수 있습니다.
variable string 예 추적 중인 리소스의 작업 이름을 나타내는 문자열입니다. 예를 들어 jQuery 자바스크립트 라이브러리를 로드하는 데 걸린 시간을 추적하려는 경우 JavaScript Load 값을 사용할 수 있습니다. 여러 카테고리에서 동일한 변수를 사용하여 Javascript Load 및 Page Ready Time 등 이러한 카테고리에 공통된 이벤트의 타이밍을 추적할 수 있습니다.
time number 예 Google 애널리틱스에 보고하기까지 경과한 시간(밀리초)입니다. jQuery 라이브러리를 로드하는 데 20밀리초가 소요되면 20 값을 전송합니다.
opt_label string 아니요 보고서에서 사용자 시간을 시각화할 때 유연성을 더하기 위해 사용할 수 있는 문자열입니다. 라벨은 동일한 카테고리 및 변수 조합에 대한 다양한 하위 실험에 집중할 수도 있습니다. 예를 들어 Google 콘텐츠 전송 네트워크에서 jQuery를 로드했다면 Google CDN 값을 사용합니다.
opt_sampleRate number 아니요 타이밍 조회가 Google 애널리틱스로 전송되는 방문자의 비율을 수동으로 재정의하는 숫자입니다. 기본값은 일반 사이트 속도 데이터 수집과 동일한 수로 설정되며 방문자의 비율을 기반으로 합니다. 따라서 방문자 100% 의 _trackTiming 조회를 추적하려면 100 값을 사용해야 합니다. 각 조회는 세션당 일반 조회수 500회 한도에 반영됩니다.

맨 위로

소요 시간 추적

_trackTiming 메서드를 사용하는 경우 time 매개변수에 소요된 시간(밀리초)을 지정합니다. 따라서 이 기간을 캡처하는 코드를 작성하는 것은 개발자의 몫입니다. 가장 쉬운 방법은 기간이 시작될 때 타임스탬프를 만들고 기간이 끝날 때 다른 타임스탬프를 만드는 것입니다. 그런 다음 두 타임스탬프 간의 차이를 통해 소요 시간을 얻을 수 있습니다.

간단한 예를 들어 보겠습니다.

var startTime = new Date().getTime();

setTimeout(myCallback, 200);

function myCallback(event) {

  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;

  _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']);
}

시작 타임스탬프는 새 Date 객체를 만들고 밀리초 단위로 시간을 가져와서 가져옵니다. 다음으로 setTimeout 함수를 사용하여 200밀리초 내에 myCallback 함수를 호출합니다. 콜백 함수가 실행되면 새 Date 객체를 만들어 endTime 타임스탬프를 검색합니다. 그런 다음 종료 시간과 시작 시간의 차이를 계산하여 소요 시간을 가져옵니다. 마지막으로 소비한 시간이 Google 애널리틱스로 전송됩니다.

이 예는 간단하지만 시간을 추적하는 방법의 개념을 보여줍니다. 좀 더 현실적인 예를 살펴보겠습니다.

맨 위로

자바스크립트 리소스 로드 시간 추적

오늘날 많은 사이트가 서드 파티 JavaScript 라이브러리를 포함하거나 JSON 객체를 통해 데이터를 요청합니다. 사이트에서 이러한 리소스를 빠르게 로드할 수도 있지만 다른 국가의 사용자에게는 동일한 리소스가 매우 느리게 로드될 수 있습니다. 이와 같이 로딩 속도가 느린 리소스는 전 세계 사용자의 사이트 환경을 저하시킬 수 있습니다.

사이트 속도 사용자 시간 기능을 사용하면 이러한 리소스가 로드되는 데 걸리는 시간을 수집하고 보고할 수 있습니다.

다음은 JavaScript 리소스를 비동기식으로 로드하는 함수의 소요 시간을 추적하는 방법을 보여주는 간단한 예입니다.

var startTime;

function loadJs(url, callback) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  var s = document.getElementsByTagName('script')[0];

  js.onload = callback;
  startTime = new Date().getTime();

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;
  _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']);

  // Library has loaded. Now you can use it.
};

이 예는 이전 예와 매우 유사합니다.

이 예에서 loadJs는 스크립트 요소를 동적으로 만들어 브라우저의 DOM에 연결하여 JavaScript 리소스를 로드하는 유틸리티 함수입니다. 이 함수는 두 가지 매개변수, 즉 문자열로서의 URL과 스크립트가 로드된 후 실행되는 콜백 함수를 허용합니다.

loadJs 내부에서 시작 타임스탬프는 startTime에 저장됩니다. 리소스가 로드되면 콜백 함수가 실행됩니다. 콜백 함수에서 종료 타임스탬프를 가져와 JavaScript 리소스를 로드하는 데 걸린 시간을 계산하는 데 사용합니다. 이 시간은 _trackTiming 메서드를 사용하여 Google 애널리틱스로 전송됩니다.

따라서 다음을 호출하면 됩니다.

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);

Google 콘텐츠 전송 네트워크에서 jQuery 라이브러리를 비동기식으로 로드하고, 완료되면 콜백 함수를 실행합니다. 그러면 리소스의 로드 시간이 Google 애널리틱스로 전송됩니다.

맨 위로

다중 사용자 시간 사용하기

위의 코드를 사용하여 여러 JavaScript 리소스를 로드한다고 가정해 보겠습니다. startTime 변수는 전역 변수이므로 기간의 시작을 추적할 때마다 startTime 변수를 덮어쓰게 되어 잘못된 소요 시간이 발생합니다.

따라서 추적하려는 모든 리소스에 대해 고유한 시작 및 종료 시간 인스턴스를 유지하는 것이 좋습니다.

또한 _trackTiming의 카테고리 및 변수 매개변수가 하드 코딩된 것을 볼 수 있습니다. 따라서 loadJs를 사용하여 여러 리소스를 로드하면 Google 애널리틱스 보고서에서 각 리소스를 구분할 수 없습니다.

두 문제는 모두 타이밍 및 _trackTiming 매개변수를 JavaScript 객체에 저장하여 해결할 수 있습니다.

사용자 시간을 저장하는 JavaScript 객체 만들기

다음은 추적되는 각 리소스의 사용자 시간 데이터를 저장하는 데 사용할 수 있는 간단한 JavaScript 객체입니다.

function TrackTiming(category, variable, opt_label) {
  this.category = category;
  this.variable = variable;
  this.label = opt_label ? opt_label : undefined;
  this.startTime;
  this.endTime;
  return this;
}

TrackTiming.prototype.startTime = function() {
  this.startTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.endTime = function() {
  this.endTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}

이제 이 객체를 사용하여 loadJs가 여러 요청에서 작동하도록 할 수 있습니다.

저장된 사용자 시간 전송

이제 추적하려는 각 리소스의 타이밍 데이터를 저장하는 방법이 있으므로 이를 사용하도록 loadJs를 업데이트하는 방법은 다음과 같습니다.

var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN');

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt);

function loadJs(url, callback, tt) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  js.onload = callback;
  var s = document.getElementsByTagName('script')[0];

  tt.startTime();
  js.tt = tt;

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  target.tt.endTime().send();

  // Library has loaded. Now you can use it.
}

위 코드는 카테고리, 변수, 선택적 라벨이 생성자에 전달되는 새 TrackTiming 객체를 만드는 것으로 시작합니다. 그런 다음 TrackTiming 객체가 매개변수로 loadJs 함수에 전달됩니다.

loadJs 내에서 startTime 메서드를 호출하여 시작 타임스탬프를 가져오고 저장합니다.

이전 예에서 콜백 함수는 startTime 변수가 전역 변수이므로 이 변수에 쉽게 액세스할 수 있었습니다. 이제 startTime가 TrackTiming 객체의 일부이므로 이 객체를 loadJs 함수에서 콜백 함수로 전달할 방법이 필요합니다.

이 문제를 해결하기 위한 한 가지 전략은 TrackTiming 객체를 스크립트 요소에 속성으로 추가하는 것입니다. 콜백 함수는 스크립트 onload 메서드에서 실행되므로 콜백에 이벤트 객체가 매개변수로 전달됩니다. 그런 다음 이 이벤트 객체를 사용하여 이벤트를 실행한 원본 스크립트 객체를 가져올 수 있으며 이 스크립트 객체를 사용하여 TrackTiming 객체에 액세스할 수 있습니다.

원래의 TrackTiming 객체에 액세스할 수 있게 되면 스크립트는 시간을 종료하고 데이터를 전송할 수 있습니다.

샘플 사이트에서 이 예의 실시간 데모를 참조하세요.

추적 중인 객체에 TrackTiming 객체를 속성으로 추가하는 이 패턴은 XMLHttpRequest 객체 사용과 같은 다른 비동기 로드 메커니즘을 추적하는 데 효과적인 경향이 있습니다.

맨 위로

XMLHttpRequest 추적

웹페이지 리소스를 비동기식으로 로드하는 또 다른 일반적인 방법은 XMLHttpRequest 객체를 사용하는 것입니다. 이러한 리소스를 로드하는 데 걸리는 시간을 _trackTiming 메서드와 TimeTracker 객체를 모두 사용하여 추적할 수도 있습니다.

다음은 서버에서 견적 파일을 로드하는 예입니다.

var url = ‘//myhost.com/quotes.txt’;
var tt = new TrackTime('xhr demo', 'load quotes');

makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    var xhr = new window.XMLHttpRequest;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = callback;

    tt.startTime();
    xhr.tt = tt;

    xhr.send();
  }
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  if (target.readyState == 4) {
    if (target.status == 200) {

      target.tt.endTime().send();

      // Do something with the resource.
    }
  }
}

이 예는 loadJs 예와 매우 유사합니다. 여기서 라이브 데모를 확인하세요.

맨 위로

잘못된 데이터 전송 방지

위의 예에서 소요 시간을 가져오기 위해 코드는 시작 시간에서 종료 시간을 뺍니다. 일반적으로 시작 시간이 종료 시간보다 작으면 잘 작동합니다. 하지만 브라우저의 시간이 변경되면 문제가 될 수 있습니다. 시작 시간이 설정된 후에 사용자가 머신 시간을 변경하면 잘못된 데이터가 Google 애널리틱스로 전송될 수 있습니다. 큰 잘못된 값을 전송할 때 발생하는 큰 문제는 평균 및 전체 측정항목이 왜곡된다는 점입니다.

따라서 일반적으로 Google 애널리틱스로 데이터를 전송하기 전에 소요 시간이 0보다 크고 일정 기간보다 짧은지 확인하는 것이 좋습니다. 위의 TimeTracker 전송 메서드를 수정하여 이 검사를 실행할 수 있습니다.

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;

  var hourInMillis = 1000 * 60 * 60;

  if (0 < timeSpent && timeSpent < hourInMillis) {
    window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  }

   return this;
}

샘플링 레이트 재정의 및 디버깅

_trackTiming 메서드는 Google 애널리틱스에서 수집한 모든 사이트 속도 측정항목의 경우 동일한 속도로 Google 애널리틱스로 데이터를 전송합니다. 기본적으로 전체 방문자의 1% 로 설정됩니다.

트래픽이 많은 사이트의 경우 기본값을 사용하면 됩니다. 하지만 트래픽이 더 적은 사이트의 경우 선택사항인 샘플링 레이트 매개변수를 설정하여 샘플링 레이트를 높일 수 있습니다. 예를 들면 다음과 같습니다. 

_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);

방문자의 50% 로부터 _trackTiming 데이터를 수집합니다.

또는 _setSiteSpeedSampleRate 메서드를 설정하여 _trackTiming 메서드를 포함한 모든 사이트 속도 타이밍의 샘플링 레이트를 설정할 수 있습니다. 예를 들면 다음과 같습니다.

_gaq.push([‘_setSiteSpeedSampleRate’, 50]);

방문자의 50% 로부터 _trackTiming 데이터도 수집합니다.

일반적으로 Google 애널리틱스 구현을 테스트하고 확인할 때 테스트 중인 사이트로 유입되는 트래픽이 매우 적습니다. 따라서 일반적으로 테스트하는 동안 샘플링 레이트를 100% 로 늘리는 것이 유용합니다.

맨 위로

기타 시간 이벤트 추적

위의 모든 예는 _trackTiming 메서드를 사용하여 리소스를 로드하는 데 걸리는 시간을 추적하는 데 중점을 두고 있지만 이 메서드는 일반적인 시간을 추적하는 데도 사용할 수 있습니다. 예를 들어 다음을 추적할 수 있습니다.

  • 방문자가 동영상을 시청한 시간입니다.
  • 게임에서 레벨을 완료하는 데 걸리는 시간입니다.
  • 방문자가 웹사이트의 한 섹션을 읽는 시간입니다.

이러한 각 경우 위에 나와 있는 동일한 TimeTracker JavaScript 객체를 재사용하여 소요 시간 데이터를 수집하고 Google 애널리틱스로 전송하는 작업을 간소화할 수 있습니다.