如何使用Google Analytics跟踪单页应用的AJAX性能？

关于GA虚拟页面无加载时间统计的问题 #

GA默认的平均页面加载时间指标依赖浏览器原生Navigation Timing API，仅在真实页面重载时自动触发采集。虚拟页面浏览是JS手动触发的自定义上报行为，没有对应真实页面加载的浏览器计时事件，因此默认不会上报该类数据，属于GA本身的机制限制，不是配置遗漏导致的问题。

如果需要统计SPA虚拟页面的加载耗时，可手动调用GA的用户计时接口上报自定义计时数据，示例代码如下：

// 虚拟路由切换/页面资源加载开始时记录起始时间
const start = Date.now();
// 页面所有资源、AJAX请求加载完成后计算耗时
const pageLoadTime = Date.now() - start;
// 上报自定义计时数据到GA
ga('send', {
  hitType: 'timing',
  timingCategory: 'SPA虚拟页面',
  timingVar: '页面加载耗时',
  timingValue: pageLoadTime,
  timingLabel: location.pathname
});

上报完成后可在GA后台「行为-网站速度-用户计时」板块查看对应统计数据。

其他AJAX性能跟踪工具推荐 #

• GA4：相比旧版UA对SPA场景适配更好，支持自定义事件携带性能参数，无需单独配置虚拟页面浏览即可实现性能数据统计
• 商用前端APM工具：阿里云ARMS、腾讯云RUM等，可自动采集所有AJAX请求的耗时、成功率、错误率等指标，对SPA场景原生支持，埋点成本极低
• 开源工具：Sentry，除错误监控外也支持前端性能跟踪，可自动采集路由切换、AJAX请求的性能数据，自定义程度高

内容的提问来源于stack exchange，提问作者Apiwat Jarruwattanachai