Thời gian người dùng - Theo dõi web (ga.js)

Tài liệu này cung cấp hướng dẫn đầy đủ về cách sử dụng phương thức _trackTiming.

Giới thiệu

Nghiên cứu đã chỉ ra rằng việc giảm thời gian tải một trang sẽ giúp cải thiện trải nghiệm người dùng tổng thể của trang web. Google Analytics có một số báo cáo hữu ích giúp tự động theo dõi thời gian tải trang. Nhưng nếu bạn muốn theo dõi thời gian cần để tải một tài nguyên cụ thể thì sao?

Ví dụ: việc tải một thư viện JavaScript phổ biến có mất quá nhiều thời gian, làm giảm trải nghiệm trên trang web của một số người dùng không?

Thời gian người dùng cho phép bạn trả lời câu hỏi này bằng cách cung cấp một phương thức gốc để theo dõi một khoảng thời gian trong Google Analytics.

Để xem ví dụ về cách hoạt động, hãy xem mã mẫu Thời gian người dùng.

Thiết lập thời gian người dùng

Để thu thập dữ liệu thời gian của người dùng, bạn cần sử dụng phương thức _trackTiming. Phương thức này sẽ gửi dữ liệu thời gian đến Google Analytics.

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

Trường hợp tham số đại diện:

Thông số Giá trị Bắt buộc Tóm tắt
category string có Một chuỗi để phân loại tất cả biến thời gian của người dùng thành các nhóm logic nhằm mục đích báo cáo dễ dàng hơn. Ví dụ: bạn có thể sử dụng giá trị của jQuery nếu bạn đang theo dõi thời gian cần để tải thư viện JavaScript cụ thể đó.
variable string có Một chuỗi cho biết tên hành động của tài nguyên đang được theo dõi. Ví dụ: bạn có thể sử dụng giá trị của JavaScript Load nếu muốn theo dõi thời gian cần để tải thư viện JavaScript của jQuery. Xin lưu ý rằng bạn có thể sử dụng cùng một biến trên nhiều danh mục để theo dõi thời gian cho một sự kiện phổ biến với các danh mục này, chẳng hạn như Javascript Load và Page Ready Time, v.v.
time number có Số mili giây đã trôi qua để báo cáo cho Google Analytics. Nếu thư viện jQuery mất 20 mili giây để tải thì bạn sẽ gửi giá trị là 20.
opt_label string no Một chuỗi có thể được sử dụng để tăng cường tính linh hoạt trong việc trực quan hoá thời gian của người dùng trong báo cáo. Bạn cũng có thể dùng nhãn để tập trung vào nhiều thử nghiệm phụ cho cùng một tổ hợp danh mục và biến. Ví dụ: nếu đã tải jQuery từ Mạng phân phối nội dung của Google, chúng tôi sẽ sử dụng giá trị của Google CDN.
opt_sampleRate number no Một con số để ghi đè theo cách thủ công tỷ lệ phần trăm khách truy cập có lượt truy cập thời gian được gửi đến Google Analytics. Mặc định được đặt cùng số với số lần thu thập dữ liệu tốc độ trang web chung và dựa trên tỷ lệ phần trăm khách truy cập. Vì vậy, nếu muốn theo dõi lượt truy cập _trackTiming cho 100% khách truy cập, bạn sẽ sử dụng giá trị 100. Xin lưu ý rằng mỗi lượt truy cập được tính vào giới hạn chung là 500 lượt truy cập cho mỗi phiên.

Trở lại đầu trang

Theo dõi thời gian đã sử dụng

Khi sử dụng phương thức _trackTiming, bạn sẽ chỉ định lượng mili giây dành cho tham số time. Do đó, với vai trò là nhà phát triển, bạn có quyền viết mã để chụp lại khoảng thời gian này. Cách dễ nhất để thực hiện việc này là tạo một dấu thời gian ở đầu một khoảng thời gian và tạo một dấu thời gian khác ở cuối giai đoạn đó. Sau đó, bạn có thể lấy sự khác biệt giữa cả hai dấu thời gian để biết thời gian sử dụng.

Sau đây là một ví dụ nhỏ:

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']);
}

Dấu thời gian bắt đầu được truy xuất bằng cách tạo một đối tượng Date mới và lấy thời gian tính bằng mili giây. Tiếp theo, hàm setTimeout được dùng để gọi hàm myCallback trong 200 mili giây. Sau khi thực thi hàm callback, dấu thời gian endTime sẽ được truy xuất bằng cách tạo một đối tượng Date mới. Sau đó, hệ thống sẽ tính mức chênh lệch giữa thời gian kết thúc và thời gian bắt đầu để tính thời gian sử dụng. Cuối cùng, thời gian đã bỏ ra được gửi đến Google Analytics.

Ví dụ này đơn giản nhưng minh hoạ khái niệm về cách theo dõi thời gian. Hãy xem một ví dụ thực tế hơn.

Trở lại đầu trang

Theo dõi thời gian tải tài nguyên JavaScript

Hiện nay, nhiều trang web có chứa thư viện JavaScript của bên thứ ba hoặc yêu cầu dữ liệu thông qua các đối tượng JSON. Mặc dù trang web của bạn có thể tải những tài nguyên này rất nhanh tại nhà, nhưng những tài nguyên đó có thể tải rất chậm đối với người dùng ở các quốc gia khác. Những tài nguyên tải chậm này có thể làm giảm trải nghiệm của người dùng quốc tế trên trang web.

Tính năng thời gian của người dùng tăng tốc độ trang web có thể giúp bạn thu thập và báo cáo về thời gian tải những tài nguyên này.

Dưới đây là ví dụ đơn giản minh hoạ cách theo dõi thời gian sử dụng của một hàm tải không đồng bộ các tài nguyên 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.
};

Lưu ý rằng ví dụ này rất giống với ví dụ trước.

Trong ví dụ này, loadJs là một hàm hiệu dụng tải tài nguyên JavaScript bằng cách tự động tạo một phần tử tập lệnh và đính kèm phần tử đó vào DOM của trình duyệt. Hàm này chấp nhận 2 thông số: URL dưới dạng chuỗi và hàm callback sẽ được thực thi sau khi tải tập lệnh.

Bên trong loadJs, dấu thời gian bắt đầu được lưu trữ trong startTime. Sau khi tải tài nguyên, hàm callback sẽ được thực thi. Trong hàm callback, dấu thời gian kết thúc được truy xuất và dùng để tính thời gian cần để tải tài nguyên JavaScript. Thời gian sử dụng này được gửi đến Google Analytics bằng phương thức _trackTiming.

Do đó, bằng cách gọi:

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

Sẽ tải không đồng bộ thư viện jQuery từ mạng Phân phối nội dung của Google và sau khi hoàn tất, thực thi hàm callback, hàm này sẽ gửi thời gian tải của tài nguyên đến Google Analytics.

Trở lại đầu trang

Làm việc với nhiều thời gian người dùng

Giả sử bạn muốn tải nhiều tài nguyên JavaScript bằng mã ở trên. Vì biến startTime là biến toàn cục, nên mỗi khi bạn theo dõi bắt đầu một khoảng thời gian, biến startTime sẽ bị ghi đè, dẫn đến thời gian sử dụng không chính xác.

Vì vậy, tốt nhất là bạn cần duy trì một thực thể riêng biệt của thời gian bắt đầu và thời gian kết thúc cho mọi tài nguyên mà bạn muốn theo dõi.

Ngoài ra, xin lưu ý rằng các tham số danh mục và biến cho _trackTiming được mã hoá cứng. Vì vậy, nếu sử dụng loadJs để tải nhiều tài nguyên, bạn sẽ không thể phân biệt từng tài nguyên trong các báo cáo của Google Analytics.

Cả hai vấn đề này đều có thể được giải quyết bằng cách lưu trữ các tham số thời gian và _trackTiming trong đối tượng JavaScript.

Tạo đối tượng JavaScript để lưu trữ thời gian người dùng.

Dưới đây là một đối tượng JavaScript đơn giản có thể dùng để lưu trữ dữ liệu thời gian của người dùng cho mỗi tài nguyên đang được theo dõi:

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;
}

Giờ đây, chúng ta có thể sử dụng đối tượng này để loadJs có thể hoạt động cho nhiều yêu cầu.

Đang gửi thời gian người dùng đã lưu trữ

Hiện tại, chúng ta đã có cách lưu trữ dữ liệu thời gian cho mỗi tài nguyên muốn theo dõi. Sau đây là cách cập nhật loadJs để sử dụng dữ liệu đó:

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.
}

Mã ở trên bắt đầu bằng cách tạo một đối tượng TrackTiming mới, trong đó danh mục, biến và nhãn không bắt buộc được truyền vào hàm khởi tạo. Sau đó, đối tượng TrackTiming được truyền dưới dạng tham số vào hàm loadJs.

Bên trong loadJs, phương thức startTime được gọi để lấy và lưu trữ dấu thời gian bắt đầu.

Trong ví dụ trước, hàm callback có thể dễ dàng truy cập biến startTime vì đây là biến toàn cục. Hiện tại, startTime là một phần của đối tượng TrackTiming, chúng ta cần có cách để truyền đối tượng này từ hàm loadJs sang hàm callback.

Để giải quyết vấn đề này, bạn nên thêm đối tượng TrackTiming dưới dạng thuộc tính vào phần tử tập lệnh. Vì hàm callback được thực thi từ phương thức onload của tập lệnh, nên lệnh gọi lại được chuyển một đối tượng sự kiện dưới dạng thông số. Sau đó, đối tượng sự kiện này có thể được dùng để truy xuất đối tượng tập lệnh ban đầu đã kích hoạt sự kiện, và đối tượng tập lệnh đó có thể được dùng để truy cập vào đối tượng TrackTiming của chúng ta.

Sau khi chúng ta có thể truy cập vào đối tượng TrackTiming ban đầu, tập lệnh có thể kết thúc thời gian và gửi dữ liệu.

Xem bản minh hoạ trực tiếp về ví dụ này trên trang web mẫu của chúng tôi.

Mẫu thêm đối tượng TrackTiming này làm thuộc tính cho đối tượng đang được theo dõi, có xu hướng hoạt động tốt để theo dõi các cơ chế tải không đồng bộ khác, chẳng hạn như sử dụng đối tượng XMLHttpRequest.

Trở lại đầu trang

Theo dõi XMLHttpRequests

Một cách phổ biến khác để tải không đồng bộ các tài nguyên trang web là sử dụng đối tượng XMLHttpRequest. Bạn cũng có thể theo dõi thời gian cần để tải những tài nguyên này bằng cả phương thức _trackTiming và đối tượng TimeTracker.

Sau đây là một ví dụ tải tệp báo giá từ máy chủ.

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.
    }
  }
}

Ví dụ này trông thực sự giống với ví dụ của loadJ. Xem bản minh hoạ trực tiếp tại đây.

Trở lại đầu trang

Tránh gửi dữ liệu không hợp lệ

Trong các ví dụ ở trên, để tính thời gian sử dụng, mã sẽ lấy thời gian bắt đầu trừ đi thời gian kết thúc. Thường thì cách này hiệu quả, miễn là thời gian bắt đầu ngắn hơn thời gian kết thúc. Tuy nhiên, điều này có thể trở thành vấn đề nếu thời gian trong trình duyệt thay đổi. Nếu người dùng thay đổi thời gian sử dụng máy sau khi đặt thời gian bắt đầu, thì dữ liệu không hợp lệ có thể được gửi đến Google Analytics. Một vấn đề lớn khi gửi một giá trị lớn không hợp lệ là việc này sẽ làm sai lệch các chỉ số trung bình và tổng số.

Vì vậy, nhìn chung, phương pháp hay nhất là đảm bảo thời gian dành cho lớn hơn 0 và nhỏ hơn một khoảng thời gian, trước khi bạn gửi dữ liệu đến Google Analytics. Chúng ta có thể sửa đổi phương thức gửi TimeTracker ở trên để thực hiện bước kiểm tra này:

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;
}

Ghi đè tốc độ lấy mẫu và gỡ lỗi

Phương thức _trackTiming chỉ gửi dữ liệu đến Google Analytics với cùng một tốc độ cho tất cả các chỉ số tốc độ trang web mà Google Analytics thu thập. Theo mặc định, giá trị này được đặt là 1% trên tất cả khách truy cập.

Đối với các trang web có lưu lượng truy cập lớn, chế độ cài đặt mặc định là hợp lệ. Tuy nhiên, đối với các trang web có ít lưu lượng truy cập hơn, bạn có thể tăng tốc độ lấy mẫu bằng cách đặt tham số tốc độ lấy mẫu không bắt buộc. Ví dụ:

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

Sẽ thu thập dữ liệu _trackTiming từ 50% khách truy cập.

Ngoài ra, bạn có thể đặt phương thức _setSiteSpeedSampleRate để đặt tốc độ lấy mẫu cho tất cả các dấu thời gian tốc độ trang web, bao gồm cả phương thức _trackTiming. Vì vậy, ví dụ:

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

Cũng sẽ thu thập dữ liệu _trackTiming từ 50% khách truy cập.

Thông thường, khi kiểm tra và xác minh việc triển khai Google Analytics, bạn có rất ít lưu lượng truy cập vào trang web mà bạn đang thử nghiệm. Vì vậy, thường thì bạn nên tăng tốc độ lấy mẫu lên 100% trong khi kiểm thử.

Trở lại đầu trang

Theo dõi các sự kiện thời gian khác

Mặc dù tất cả ví dụ ở trên đều tập trung vào việc sử dụng phương thức _trackTiming để theo dõi thời gian tải tài nguyên, nhưng bạn cũng có thể sử dụng phương thức này để theo dõi khoảng thời gian chung. Ví dụ: bạn có thể theo dõi:

  • Thời gian khách truy cập xem video.
  • Thời gian cần thiết để hoàn thành một cấp độ trong trò chơi.
  • Thời gian khách truy cập đọc một phần trên trang web.

Trong mỗi trường hợp này, bạn có thể sử dụng lại cùng một đối tượng JavaScript TimeTracker như đã trình bày ở trên để đơn giản hoá việc thu thập và gửi thời gian dành cho dữ liệu đến Google Analytics.