用Google Tag Manager采集连接服务器和资源加载时间

Google Tag Manager Haran 7年前 (2017-06-13) 4196次浏览 0个评论

这次分享的是通过GTM采集服务器连接时间和资源加载时间。

前段时间客服反映有不少用户投诉某个核心页面加载慢和闪退,这个页面是基于Flash的。Google Analytics里面有个网站加载时间的报告,这个报告默认是抽样的,已经设置成不抽样的,可以看到页面的时间加载时间只有3.21秒,应该说还是不错的。
用Google Tag Manager采集连接服务器和资源加载时间
GA里面虽有关页面加载时间的报告,但是个均值,你不知道时间的具体分布,不好定位问题,所以还是有需要采集页面的实际加载时间,在这里讲采集的时间分成三个阶段:flash基础环境加载,连接服务器时间,资源加载,其中资源加载选取了页面上三个主要资源。

原理:在不同的加载开始和完成事件阶段主动push数据层去,GTM接受到后开始记录GTM此时的时间,如flash基础环境加载push event1,GTM接受到event1后记录time1,GTM加载完成后push event2,GTM接收到event2后记录time2后计算时间差,这个就是耗时了。

上面的这个方案有些问题,就是没有考虑到网络延时的问题,会导致所得到的时间包含了网络延时,这个数据不是精准的,所以改为采用服务器时间,将服务器上开始和结束的时间长度记录下来通过push出去。
过程:
1、页面端主动push开始时间节点到数据层
ExternalInterface.call(‘dataLayer.push’,{‘event‘:gtm_flash_event,’gtm_flash_action’:1});

2、用自定义接受事件起始时间信号
用Google Tag Manager采集连接服务器和资源加载时间

3、如起始时间信号触发就获取GTM时间,并push到数据层

4、数据层接受GTM push的时间

5、页面端主动push结束时间节点到数据层
ExternalInterface.call(‘dataLayer.push’,{‘event‘:gtm_flash_event,’gtm_flash_action’:2});

6、用自定义接受事件结束时间信号

7、结束时间点减去起始时间点计算时间长,并push到数据层

8、接收数据层时间长度

9、设置tag,向GA收集数据

如果采用第二种方法就简单的多了,只需要在GTM push连个数据层变量,一个作为触发器条件,一个是时间长度:
ExternalInterface.call(‘dataLayer.push’,{‘event‘:gtm_flash_event,’gtm_flash_action’:2,’time’:time});

通过收集的数据分析知道耗费主要是在连接服务器上,有超过25%的都是X秒,定位到原因,下一步就好解决了。

通过收集的数据对比发现,GA里面的那个时间报告貌似不准确的,链接服务器显示的时间是很短的,但实际上收集到的数据基本都是大于1秒的,这很不合理。GA的时间计算原理是通过时间戳来计算,每次都有hits,上面带时间,但是在一个页面打开的过程中,在没有做事件部署的前期下就只有一个hits,那么怎么可能计算得了链接服务器到最终页面完整展示的整个过程的不同阶段的时间呢?

发现这种用来做异常定位还蛮快,如果是自己做,需要向数据推送出去,要有数据库去存储,要入库,要维护,事情就变得多了。

这种监控的原理还可以用在网页游戏上,以及其他在页面首次发开需要加载比较多的资源的页面。


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址