聊聊Google Analytics的数据传输的3种类型

Google Analytics Haran 6年前 (2018-01-05) 4886次浏览 0个评论

这节跟大家分享一下Google Analytics的数据传输机制。

聊聊Google Analytics的数据传输的3种类型

一般来说,我跟大家介绍Google Analyitcs的传输机制的时候,通常直接说是通过虚拟一像素的形式是实现数据的传输的,但是实际上,这个只是其中的一种形式,Google Analytics中实际是由3种向服务器发送数据的方式的,但另外两种很少用到,所以没怎么介绍,对于普通用户,知道用虚拟一像素去实现数据的传递就行了,这一节的内容是相对比较深入的。

默认情况下,analytics.js 会选择 HTTP 方法和传输机制以优化匹配的发送。使用这种机制时有三种选项,分别为:

  • image:使用 Image 对象
  • xhr:使用 XMLHttpRequest 对象
  • beacon:使用新的 navigator.sendBeacon 方法

Image

就是虚拟一像素的形式了,这是目前使用多的一种方式,反应在网络传输过程就是你可以看到一个带有collect字段的一个请求,这个大家应该很熟悉的了,传递的数据都是在url上,对url的长度是有限制的,如单hits是8K,多hits是16k。可以在浏览器中的network找到包含collect的请求:

聊聊Google Analytics的数据传输的3种类型

发送的方法是GET,请求的链接就是要传递的信息。

xhr

什么是 XMLHttpRequest 对象?
XMLHttpRequest 对象用于在后台与服务器交换数据。XMLHttpRequest 对象是开发者的梦想,因为你能够:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象,但旧的浏览器是不支持的。这是一种与服务交互数据的方式,能够传递更多数据,但是请求消耗会比较多。

这种方式在GA中的设置我是没找到的明显案例,但我觉得是在GTM中要设置的字段里面中将transport设置的xhr。

beacon

beacon是指通过浏览器向服务器异步地发送小的HTTP数据,使用 Beacon方法,将会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题:使它可靠,异步并且不会影响下一页面的加载。

当前浏览器对Beacon的支持情况:

  • Chrome 37+
  • Firefox (Gecko) 31+
  • Internet Explorer 不支持
  • Opera 24+
  • Safari 不支持
  • 手机端常用浏览器不支持:Android浏览器支持了,但是iOS尚无支持

beacon可以在谷歌分析设置变量中的更多设置的要设置字段里面去设置,有个useBeacon的字段,设置为true,你也可以用transport,然后将值是设置为beacon,这对于以下情况很有帮助:你希望在用户即将离开你的网站之前跟踪某个事件,同时不延迟用户的导航操作。如果浏览器不支持 navigator.sendBeacon,将以常规方式发送匹配。

如果你使用这种方式,你可以去看看network下发送的请求:

聊聊Google Analytics的数据传输的3种类型

这里方法是POST,而且传输的链接上面不显示一大串的信息。

analytics.js 会尝试根据匹配规模和浏览器功能来确定最佳方法。如果你指定了“beacon”,而用户的浏览器不支持“navigator.sendBeacon”方法,则 analytics.js 会转而使用 “image”或“xhr”,具体取决于匹配规模。

也即是如果你设置了beacon的方式传递数据,而你的浏览器支持,就走beacon的方式,如果不支持,就会走其他的方式将数据传递出去。

这几种方法可以说是为了解决页面unload时快速跳转的时候如果要上报当前数据,采用xhr的同步上报方式,会阻塞当前页面的跳转;使用Image有可能遇到阻止,导致无法成功发送。所以最好的方式是使用浏览器来提供发送保障的更简洁的sendBeacon方法。sendBeacon是异步的,不会影响当前页到下一个页面的跳转速度,且不受同域限制。

这种情况应该是不多的,对数据准确要求很高的需要注意这方面吧,至少我在实施过程中是没有这样去用的。


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

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

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