这一篇介绍如何用Google Tag Manager采集连接服务器和资源加载时间。
原理
原理是，页面打开的时候，用自定义JavaScript从浏览器获取页面打开过程中的各个时间，然后通过DataLayer发送出去，再GTM上触发，发送给Google Analytics 4
GTM配置过程
GTM上配置监听代码
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义HTML」，然后命名为“THML time”，做如下设置：
这段代码的作用是页面加载的时候，从浏览器获取页面加载时间数据。
源码：
<script>
(function() {
var siteSpeedSampleRate = 100;
var gaCookiename = '_ga';
var dataLayerName = 'dataLayer';
// No need to edit anything after this line
var shouldItBeTracked = function(siteSpeedSampleRate) {
// If we don't pass a sample rate, default value is 1
if (!siteSpeedSampleRate)
siteSpeedSampleRate = 1;
// Generate a hashId from a String
var hashId = function(a) {
var b = 1, c;
if (a)
for (b = 0,
c = a.length - 1; 0 <= c; c--) {
var d = a.charCodeAt(c);
b = (b << 6 & 268435455) + d + (d << 14); d = b & 266338304; b = 0 != d ? b ^ d >> 21 : b
}
return b
}
var clientId = ('; ' + document.cookie).split('; '+gaCookiename+'=').pop().split(';').shift().split(/GA1\.[0-9]\./)[1];
if(!clientId) return !1;
// If, for any reason the sample speed rate is higher than 100, let's keep it to a 100 max value
var b = Math.min(siteSpeedSampleRate, 100);
return hashId(clientId) % 100 >= b ? !1 : !0
}
if (shouldItBeTracked(siteSpeedSampleRate)) {
var pt = window.performance || window.webkitPerformance;
pt = pt && pt.timing;
if (!pt)
return;
if (pt.navigationStart === 0 || pt.loadEventStart === 0)
return;
var timingData = {
"page_load_time": pt.loadEventStart - pt.navigationStart,
"page_download_time": pt.responseEnd - pt.responseStart,
"dns_time": pt.domainLookupEnd - pt.domainLookupStart,
"redirect_response_time": pt.fetchStart - pt.navigationStart,
"server_response_time": pt.responseStart - pt.requestStart,
"tcp_connect_time": pt.connectEnd - pt.connectStart,
"dom_interactive_time": pt.domInteractive - pt.navigationStart,
"content_load_time": pt.domContentLoadedEventStart - pt.navigationStart
};
// Sanity Checks if any value is negative abort
if (Object.values(timingData).filter(function(e) {
if (e < 0) return e; }).length > 0)
return;
window[dataLayerName] && window[dataLayerName].push({
"event": "performance_timing",
"timing": timingData
})
}
}
)()
</script>
GTM上配置GA4事件跟踪
接下来是先配置获取数据层里的数据层变量和自订事件，然后配置代码。
配置变量
数据层变量有 page_load_time、page_download_time、dns_time、redirect_response_time、server_response_time、tcp_connect_time、dom_interactive_time、content_load_time
以为page_load_time为例，在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，然后命名为“page_load_time”，做如下设置：
同理配置其他几个数据层变量：
配置触发器
自定义事件只要一个，是performance_timing
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，然后命名为“performance_timing”，做如下设置：
配置代码
最后就是配置GA4事件，在GTM中点击「变量」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics（分析）：GA4 事件」，然后命名为“GA Page performance_timing”，做如下设置：
事件名称命名为“performance_timing”，事件参数都是数据层变量里的。
预览调试
配置好后，在GTM上预览调试，调试没问题就可以发布出去收集数据。
GA4上注册事件参数
事件参数里的所有参数都需要在GA4里注册，才可以使用。
以page_load_time为例，在GA4中点击「管理」——「自定义设置」——「自定义指标」——「创建自定义维度」，然后做如下设置：
需要注意，这里的衡量单位是毫秒。
同理注册其他的事件参数即可。
查看数据
可以在探索里查看数据：
这里的单位是毫秒，数值是加总的，如果要看页面平均时间是多少秒，需要用总时间除以事件数，再除以1000。
