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

转至管理>属性>自定义定义>自定义度量标准。

创建一个新的自定义度量标准，具有Hit的范围和格式化的时间类型。 注意：以秒为单位指定时间，但在报告中显示为hh：mm：ss。

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 /收集/ analyticsjs /用户定时

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

发送页面视图后发送调整的命令将是这样的，使用＆dl参数或'dp'参数将调整附加到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发送意外信息。 在将其传递给最终项目之前进行测试

问候