用户计时 - 网络跟踪 (ga.js)

本文档提供了有关如何使用 _trackTiming 方法的全面指南。

简介

研究表明，减少网页加载时间可改善网站的整体用户体验。Google Analytics（分析）有许多可自动跟踪网页加载时间的强大报告。但是，如果您想跟踪特定资源的加载时间，该怎么办？

例如，加载某个热门的 JavaScript 库是否花费了太长时间，从而降低某些用户的网站体验？

借助用户计时，您可以通过在 Google Analytics（分析）中以原生方式跟踪时间段，从而找到上述问题的答案。

要查看有效示例，请参阅“用户计时”示例代码。

设置用户计时

要收集用户计时数据，您需要使用 _trackTiming 方法，该方法会将时间数据发送到 Google Analytics（分析）。

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

其中，参数表示：

参数 值 必需 摘要
category string 是 用于将所有用户计时变量归类到相应逻辑组的字符串，以便更轻松地生成报告。 例如，如果您要跟踪加载该特定 JavaScript 库所需的时间，可以使用 jQuery 的值。
variable string 是 一个字符串，用于指定所跟踪资源的操作名称。例如，如果您希望跟踪 jQuery JavaScript 库的加载用时，可以使用 JavaScript Load 的值。请注意，可以在多个类别中使用相同的变量，以跟踪这些类别（例如 Javascript Load 和 Page Ready Time 等）共有的事件的时间。
time number 是 向 Google Analytics（分析）报告的以毫秒为单位的历时时间。如果 jQuery 库的加载用时为 20 毫秒，那么您会发送 20 的值。
opt_label string 否 可用于提高报告中显示用户计时数据灵活性的字符串。标签还可用于专注于同一类别和变量组合的不同子实验。例如，如果我们从 Google 内容分发网络加载了 jQuery，我们将使用 Google CDN 的值。
opt_sampleRate number 否 一个数值，用于手动替换将计时命中发送到 Google Analytics（分析）的访问者所占百分比。此默认值与常规网站速度数据收集功能的数字相同，并采用访问者百分比的形式表示。因此，如果您希望跟踪所有访问者的 _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 Analytics（分析）。

这个示例简单明了，但却说明了如何跟踪时间的概念。我们来看一个更实际的例子。

返回页首

跟踪加载 JavaScript 资源所用的时间

当前，许多网站包含第三方 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 资源。该函数接受两个参数：一个字符串形式的网址，以及一个在脚本加载完成后执行的回调函数。

在 loadJs 中，开始时间戳存储在 startTime 中。资源加载后，回调函数马上执行。在回调函数中，系统会检索结束时间戳并将其用于计算加载 JavaScript 资源所用的时间。所用的时间将通过 _trackTiming 方法发送到 Google Analytics（分析）。

所以，通过调用：

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

将从 Google 内容分发网络异步加载 jQuery 库，并在完成后执行回调函数，进而将资源的加载时间发送到 Google Analytics（分析）。

返回页首

使用多个用户计时

假设您要使用上述代码加载多个 JavaScript 资源。由于 startTime 变量是全局变量，每次跟踪时间段的开始时间时，系统都会覆盖 startTime 变量，从而生成错误的时间。

因此，最佳实践是，您需要为要跟踪的每个资源维护一个唯一的开始时间和结束时间实例。

另请注意，_trackTiming 的类别和变量参数是硬编码的。因此，如果您使用 loadJs 加载多个资源，则无法在 Google Analytics（分析）报告中区分每项资源。

这两个问题都可以通过将时间和 _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 Analytics（分析）发送错误数据。发送一个较大的不良值时存在的一大问题是，这会使平均指标和总指标出现偏差。

因此，在将数据发送到 Google Analytics（分析）之前，最佳做法通常是确保所用时间大于 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 Analytics（分析）发送 Google Analytics（分析）收集的所有网站速度指标的数据。默认情况下，此比例设置为所有访问者的 1%。

对于流量较大的网站，使用默认设置没什么问题。 但对于流量较少的网站，您可以通过设置可选的采样率参数来提高采样率。例如： 

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

将从 50% 的访问者收集 _trackTiming 数据。

或者，您可以设置 _setSiteSpeedSampleRate 方法，为所有网站速度计时（包括 _trackTiming 方法）设置采样率。比如：

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

还将从 50% 的访问者收集_trackTiming数据。

通常情况下，在测试和验证 Google Analytics（分析）实现时，所测试网站的流量非常少。因此，在测试时将采样率提高到 100% 通常很有用。

返回页首

跟踪其他时间事件

以上所有示例的重点都是使用 _trackTiming 方法跟踪加载资源所用的时间，但此方法还可用于跟踪一般时长。例如，您可以跟踪：

  • 访问者观看视频所花费的时间。
  • 完成游戏关卡所需的时间。
  • 访问者阅读网站某个版块所花的时间。

无论是上述哪种情况，您都可以重复使用上面提供的同一 TimeTracker JavaScript 对象，以简化收集所花时间并将其发送到 Google Analytics（分析）的流程。