使用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中设置自定义指标。

转到管理员＆gt;物业＆gt;自定义定义＆gt;自定义指标。

创建一个新的自定义指标，其范围为Hit，格式类型为time。 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。 E.g：

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加载时间。您可以使用该命令作为官方文档，但如果您使用它，您会注意到不同的命中（我必须仔细检查）。其他选项是使用“发送”命令手动发送。并附上欲望信息。检查您的综合浏览量命中结构，确保您的调整实际上附加到您之前的点击。

发送网页浏览后发送修改的命令将是这样的，使用＆amp; dl参数或＆＃39; dp＆＃39;将调整附加到ajax页面的参数。

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

现在所有价值观＆＃39; 1＆＃39;需要更新正确的，现在如何确定每个参数的时间根本不确定。还要记住，默认情况下，采样仅适用于1％的会话，仅在少数情况下发送此命中。

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

问候