Google Analytics 4 中跟踪页面加载时间

更新时间：2024年4月26号

由于目前Google Analytics 4里没有页面加载时间的报告，如果要看页面加载时间，需要自行做事件跟踪，延伸阅读：如何在Google Analytics 4 中对页面加载时间做跟踪，这是用一个单独的事件去跟踪，会增加很多的请求。

这一篇介绍另一种方式：直接在默认PageView里增加一个页面加载时间的事件参数，页面加载时间是用自定义JS通过浏览器API获取页面加载时间。

这种方式有两个注意点：

• 触发器需要基于窗口已加载，而不是默认网页浏览器，因为默认网页浏览器可能页面还没加载完，会导致获取不到页面加载时间，而窗口已加载，就一定是已经加载完，可以获取到页面加载时间。页面浏览过程中，触发器的执行顺序是：用户意见征求初始化>初始化页面浏览>DOM已准备就绪>窗口已加载。
• 窗口已加载之前不要触发事件，因为如果事件比PageView更快触发，会影响归因。

变量：自定义 JavaScript

在GTM里新建一个自定义JavaScript，做如下设置：

这段代码的作用是通过浏览器API获取页面加载时间，

源码：

function(){
  var timing = performance.getEntriesByType('navigation')[0] || performance.timing;

var load_time = ((timing.loadEventStart-timing.fetchStart)/1000).toFixed(2);

if(load_time>0){
	return load_time;
 }
}

代码：默认页面跟踪

在默认页面跟踪的代码新增事件参数page_load_time

将触发器改为基于窗口已加载：

预览

然后再GTM里预览调试，page_load_time是4.43秒：

注册事件参数

在GA4中点击「管理」——「自定义设置」——「自定义指标」——「创建自定义指标」，然后做如下配置：

这样就可以。

探索：数据验证

收集一些数据后，就可以在探索里用自由表格去验证：

这里显示的Page Load Time 是多个页面加总的，如果要看平均的，可以用自订指标，公式是{Page Load Time}/{事件数}，报告如：

可以看到页面平均加载时间是10秒，太长时间，比较常用的方法有：

• 优化图片和媒体：将图片转为WebP格式
• 使用内容分发网络（CDN）：将静态资源（如图片、CSS、JavaScript）托管在CDN上，以减少地理位置导致的延迟。
• 优化代码：最小化和压缩CSS、JavaScript，移除未使用的代码，异步加载JavaScript