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

Google Analytics 4 黄业忠 6年前 (2016-10-19) 6334次浏览 7个评论

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

原理

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

配置过程

GTM上配置监听代码

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义HTML」,然后命名为“THML time”,做如下设置:

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

这段代码的作用是页面加载的时候,从浏览器获取页面加载时间数据。

源码:

<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”,做如下设置:

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

同理配置其他几个数据层变量:

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

配置触发器

自定义事件只要一个,是performance_timing

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」,然后命名为“performance_timing”,做如下设置:

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

配置代码

最后就是配置GA4事件,在GTM中点击「变量」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics(分析):GA4 事件」,然后命名为“GA Page performance_timing”,做如下设置:

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

事件名称命名为“performance_timing”,事件参数都是数据层变量里的。

预览调试

配置好后,在GTM上预览调试,调试没问题就可以发布出去收集数据。

 

GA4上注册事件参数

事件参数里的所有参数都需要在GA4里注册,才可以使用。

以page_load_time为例,在GA4中点击「配置」——「自定义设置」——「自定义指标」——「创建自定义维度」,然后做如下设置:

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

 

需要注意,这里的衡量单位是毫秒。

同理注册其他的事件参数即可。

 

查看数据

可以在探索里查看数据:

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

 

这里的单位是毫秒,数值是加总的,如果要看页面平均时间是多少秒,需要用总时间除以事件数,再除以1000。

 


GA小站, 版权所有丨如未注明 , 均为原创

转载请注明标题:Google Analytics 4 中对页面加载时间做跟踪
链接:https://www.ichdata.com/gets-the-exact-load-time-of-the-page-google-analytics.html

喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. {{url}}是你自定义的变量吗? 我只看到默认有{{page url}}
    leo lei2018-10-18 17:05 回复 Windows 7 | Chrome 68.0.3440.106
    • 都行
      GA小站2018-10-18 17:09 回复 Mac OS X | Safari浏览器 604.1
      • 噢 谢谢 我再GTM预览模式下 可以看到事件已经被触发(如下)但是在GA的时事报告的events里看不到数据 不知是为何? Window Loaded Tags Fired On This Event 网页加载时间 Google Analytics – Universal Analytics - Still running
        leo lei2018-10-18 17:47 回复 Windows 7 | Chrome 68.0.3440.106
        • 实时里面看的,事件报告是过段时间才看得到
          GA小站2018-10-20 14:22 回复 Mac OS X | Chrome 69.0.3497.100
          • 好的 谢谢 也有可能是我设置出了问题
            leo lei2018-10-22 10:48 Windows 7 | Chrome 68.0.3440.106
  2. 第4步的结果是从哪里看的?可以详细告知一下不,找了好久没有找到
    小九2018-10-09 17:24 回复 Windows 7 | Firefox浏览器 62.0
    • GA里面的实时报告
      GA小站2018-10-09 23:59 回复 Windows 7 | Chrome 65.0.3325.52