使用 GA 测量单页应用的页面加载时间

Question

我在 SPA 中使用 Google Analytics。对于任何虚拟页面重定向（例如刷新页面正文的 AJAX 调用），我得到的页面加载时间为0ms。有没有办法跟踪这需要多长时间，就像刷新整页一样？我希望包括 AJAX 调用所需的时间，以及下载和显示结果加载的图像的时间。

Answer 1

如您所见，Google Analytics 不会为 SPA 提供页面计时。这包括如果您将网站速度采样率提高到 100。这是因为 Google Analytics（分析）使用 Navigation Timing API 计算页面计时。

例如，加载的 DOM 将是：

$(document).ready(console.log((Date.now() - 
    performance.timing.domComplete)/1000))

要解决这个问题，您需要使用自定义指标。解决方案分为三个步骤。

1) 在 GA 中设置自定义指标。

转到管理 > 属性 > 自定义定义 > 自定义指标。

创建一个新的自定义指标，包括命中范围和时间格式类型。 Note: Specify time in seconds, but it appears as hh:mm:ss in your reports.

2) 设置计时器。

您需要捕获要开始测量页面加载时间的时间。

一个示例解决方案可能是装饰所有内部链接，例如：

$('a[href*="stackoverflow"]').click(function(){
  time1 = Date.now()
})

3) 在虚拟浏览量事件中将超过时间（以秒为单位）发送到 Google Analytics。

当虚拟浏览量事件发生（触发您的虚拟浏览量）时，检索当前时间 (Date.now()) 和计时器启动时间 (time1) 之间的差异。

使用 Google 跟踪代码管理器，可以创建自定义 javascript 变量，如下所示：

function(){
  return (Date.now() - time1)/1000
}

然后需要根据在步骤 1 中设置的自定义指标索引，随网页浏览量发送此值。

ga('send', 'pageview', {
  'metricX': pageLoadSpeed
});

使用自定义指标和计算指标（例如 {{virtualPageTimings}}/{{pageViews}}，您将能够计算平均虚拟页面时间。

奖励：

为了使测量更加准确，请设置辅助自定义指标来计算虚拟浏览量。这将确保不考虑用户直接导航到的网页浏览量。

为此，请使用范围命中和格式化整数创建自定义指标。

然后，对于每个虚拟网页浏览，针对自定义指标索引发送值 1。例如：

ga('send', 'pageview', {
  'metricX': pageLoadSpeed,
  'metricX': 1
});

这允许计算出的指标：

{{virtualPageTimings}}/{{virtualPageViews}}

Answer 2

如果您查看 Google Analytics 文档，您可以了解siteSpeedSampleRate 选项，它基本上允许您为一定比例的用户打开您的网站跟踪信标。

默认情况下，此值为1，但我假设您可能希望将其转换为100。它可能会在网络使用方面产生一些影响，因为它必须将更多数据传输到 GA，因此请根据您的用户以及他们如何访问您的网站（通过移动设备、某些国家/地区的不良覆盖...）来考虑这一点。

您必须修改跟踪代码以集成以下内容：

ga('create', 'UA-XXXX-Y', { siteSpeedSampleRate: 10 })

Answer 3

您可以手动发送时间，就像 Google Analytics 上的所有内容一样。但这有点棘手，如果我说实话，除非有必要，否则我不会这样做。时间报告上的所有数据都是基于一个叫做计时的命中，这个命中是在pageView之后发送的，包含以下信息。 如果您可以看到我的示例，我强制该工具在页面浏览量通过特殊参数列表再次点击之后发送点击。

plt : Specifies the time it took for a page to load. The value is in milliseconds.
pdt : Specifies the time it took for the page to be downloaded. The value is in milliseconds.
dns : Specifies the time it took to do a DNS lookup.The value is in milliseconds.
rrt : Specifies the time it took for any redirects to happen. The value is in milliseconds.
srt : Specifies the time it took for the server to respond after the connect time. The value is in milliseconds.
tcp : Specifies the time it took for a TCP connection to be made. The value is in milliseconds.
dit : Used to send a random number in GET requests to ensure browsers and proxies don't cache hits. It should be sent as the final parameter of the request since we've seen some 3rd party internet filtering software add additional parameters to HTTP requests incorrectly. This value is not used in reporting.
clt : pecifies the time it took for the DOMContentLoaded Event to fire. The value is in milliseconds.

有关此参数的更多信息：https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters 和 你可以看到更多关于这个命中的信息 https://developers.google.com/analytics/devguides/collection/analyticsjs/user-timings

那么现在会发生什么？如果我在此 SPA 中启动另一个综合浏览量，同一页面上的第二次综合浏览量将不会进行此点击，您将永远获得 0 的加载时间。您可以将该命令用作官方文档，但如果您使用它，您会注意到这不是同一个命中（我必须仔细检查）。其他选项是使用“发送”命令手动发送并附加所需信息。检查您的网页浏览命中结构，以确保您的时间实际上附加到您之前的命中。

pageview发送后发送timming的命令是这样的，使用&dl参数或'dp'参数将timming附加到ajax页面。

ga('send', {
  hitType: 'timing',
  '&plt': 1,
  '&pdt': 1,
  '&dns': 1,
  '&rrt': 1,
  '&srt': 1,
  '&dit': 1,
  '&clt': 1,
  '&dl': 'http://cl.edreams.com/',
});

现在所有值“1”都需要更新为正确的值，现在如何确定每个参数的时间完全不确定。另请记住，默认情况下仅对 1% 的会话进行采样，仅在少数情况下发送此匹配。

免责声明：这是一个非常实验性的实现，我们正在强制 Js 发送意外信息。在将其传递给最终项目之前对其进行充分测试

问候