使用 gtag.js 进行用户计时

本指南介绍如何使用 gtag.js 来衡量用户计时并将其发送给 Google Analytics(分析)。

了解用户计时报告

概览

研究表明,减少网页加载时间可改善网站的整体用户体验。使用 Google Analytics(分析),可以跟踪自定义计时信息,用于衡量网站的具体性能。如果开发者要衡量提交 AJAX 请求和加载网页资源的延迟时间(即所需时间),该功能特别有用。

实现

要衡量用户计时,请使用 event 命令发送一个 timing_complete 事件:

gtag('event', 'timing_complete', [parametersObject]);

用户计时参数

下表对各用户计时参数进行了概要说明:

参数名称 数据类型 是否必须提供 说明
name string 用于标识要记录的变量(例如 'load')的字符串。
value integer 向 Google Analytics(分析)报告的以毫秒为单位的历时时间(例如 20)。
event_category string 用于将所有用户计时变量归类到相应逻辑组的字符串(例如 'JS Dependencies')。
event_label string 可用于提高报告中用户计时数据的显示灵活性的字符串(例如 'Google CDN')。

示例

以下命令向 Google Analytics(分析)发送用户计时事件,指明当前网页加载其所有外部 JavaScript 依赖关系耗时 3549 毫秒:

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

衡量时间

在发送用户计时数据时,您可以在 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 Analytics(分析)将对计时事件进行抽样,以确保针对此功能公平分配系统资源。

计时事件的抽样率取决于系统针对相应媒体资源在前一天所接收到的网页浏览总数。下表简要说明了计时抽样率的确定方式:

网页浏览总数(前一天) 系统最多可处理的计时事件数
0 - 1000 100
1000 - 100000 网页浏览总数的 10%
100000 - 1000000 10000
1000000+ 网页浏览总数的 1%