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

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

原理

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

GTM配置过程

GTM上配置监听代码

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

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

源码：

1. <script>
2. (function() {
3.  
4. var siteSpeedSampleRate = 100;
5. var gaCookiename = '_ga';
6. var dataLayerName = 'dataLayer';
7.  
8. // No need to edit anything after this line
9. var shouldItBeTracked = function(siteSpeedSampleRate) {
10. // If we don't pass a sample rate, default value is 1
11. if (!siteSpeedSampleRate)
12. siteSpeedSampleRate = 1;
13. // Generate a hashId from a String
14. var hashId = function(a) {
15. var b = 1, c;
16. if (a)
17. for (b = 0,
18. c = a.length - 1; 0 <= c; c--) {
19. var d = a.charCodeAt(c);
20. b = (b << 6 & 268435455) + d + (d << 14); d = b & 266338304; b = 0 != d ? b ^ d >> 21 : b
21. }
22. return b
23. }
24. var clientId = ('; ' + document.cookie).split('; '+gaCookiename+'=').pop().split(';').shift().split(/GA1\.[0-9]\./)[1];
25. if(!clientId) return !1;
26. // If, for any reason the sample speed rate is higher than 100, let's keep it to a 100 max value
27. var b = Math.min(siteSpeedSampleRate, 100);
28. return hashId(clientId) % 100 >= b ? !1 : !0
29. }
30.  
31. if (shouldItBeTracked(siteSpeedSampleRate)) {
32. var pt = window.performance || window.webkitPerformance;
33. pt = pt && pt.timing;
34. if (!pt)
35. return;
36. if (pt.navigationStart === 0 || pt.loadEventStart === 0)
37. return;
38. var timingData = {
39. "page_load_time": pt.loadEventStart - pt.navigationStart,
40. "page_download_time": pt.responseEnd - pt.responseStart,
41. "dns_time": pt.domainLookupEnd - pt.domainLookupStart,
42. "redirect_response_time": pt.fetchStart - pt.navigationStart,
43. "server_response_time": pt.responseStart - pt.requestStart,
44. "tcp_connect_time": pt.connectEnd - pt.connectStart,
45. "dom_interactive_time": pt.domInteractive - pt.navigationStart,
46. "content_load_time": pt.domContentLoadedEventStart - pt.navigationStart
47. };
48. // Sanity Checks if any value is negative abort
49. if (Object.values(timingData).filter(function(e) {
50. if (e < 0) return e; }).length > 0)
51. return;
52. window[dataLayerName] && window[dataLayerName].push({
53. "event": "performance_timing",
54. "timing": timingData
55. })
56. }
57. }
58. )()
59. </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。

Tags：GA4网页加载速度跟踪

转载：感谢您对Jerbo个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源Jerbo个人博客”。/dulizhanyunying/gg/112.html

很赞哦！ ()