快速教程-GA4中监测页面加载速度

马老师曾经说过GA4的问题不仅仅在于界面难用，更大的问题是明明许多应该默认有而且之前版本也有的维度、指标也缺失。这就需要我们心美手巧的Digital Marketer自己来搭建。本篇马老师就快速讲解如何复原旧GA版本中的网页加载速度相关的指标。

浏览器的Performance Timing API

目前主流的浏览器都支持了这个API。我们打开Chrome的DevTools（按F12），在Console中输入

window.performance.timing

便可以获得各个时间点的时间戳。这些时间戳对应我们之前讲过的各个页面载入节点。

你可以通过两个时间戳相减来获得各个页面载入时间指标，这个可以用于GA4中的复刻。

• Page Load Time:   loadEventStart – navigationStart
• Page Download Time:   responseEnd – responseStart
• DNS Time:   domainLookupEnd – domainLookupStart
• Redirect Response Time:   fetchStart – navigationStart
• Server Response Time:   responseStart – requestStart
• TCP Connect Time:   connectEnd – connectStart
• DOM Interactive Time:   domInteractive – navigationStart
• Content Load Time:   domContentLoadedEventStart – navigationStart
• DOM Load Time:   domContentLoadedEventStart – responseEnd

本篇教程，我们就使用Tag Manager来复刻GA4上的Page Load Speed。

使用Google Tag Manager建立页面载入时间指标

第一步：我们在Tag Manager中建立一个Custom JavaScript变量，把下面的JavaScript代码贴入到文本框中。

function(){ 
  return Math.round((((window.performance.timing.loadEventEnd - window.performance.timing.navigationStart) / 1000) + Number.EPSILON) * 100) / 100;
}

注意到我们上面用了loadEventEnd，这个和loadEventStart没差，同一时刻发生。这样我们就可以记录页面载入的整个时间长度，并且以秒为单位记录下来。

第二步：新建一个GA4 Event标签将刚才我们捕获的秒数推送给GA4。具体设置如下图，注意我们设置了Once per page的限制，每个页面只推送一次。

第三步：建立一个触发器。触发器类型为Page View – Window Loaded。当Page Load Time这个变量不为0则触发。

我们接下来可以Preview预览一下，并在GA4的DebugView中看到开始收数。

第四步：在GA4中新建Metrics。在Custom definitions – Custom metrics中新增一个Metric叫做Page Load Time，单位为Seconds。同时，新建一个Calculated metric，叫做Avg. Page Load Time，公式为

{Page Load Time}/{Views}

接下来我们就可以等几天收数了。

第五步：建立报表。我们在Explore中新建一个报表，METRICS旁边的+点一下可以Import我们刚刚新建的指标。此处仅为演示，实际只需Avg. Page Load Time这个指标。

最后，我们可以建立这样的报表：

以上就是本篇教程的全部内容，如果还有什么不清楚的，请通过微信后台或留言提问。