使用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 })