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

Google Analytics 4 中没有页面的加载时间报告，但可以通过事件跟踪去实现。

原理

原理是，页面打开的时候，用自定义JavaScript从浏览器获取页面打开过程中的各个时间，然后通过DataLayer发送出去，再GTM上触发，发送给Google Analytics 4

配置过程

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。