①对于a链接元素,存在一个很多人不知道的属性 —— ping 属性,只要设置了 ping 属性,用户点击此链接元素的时候,浏览器就会自动发送一个 POST 请求给 ping 属性值地址;
②ping 请求的 content-type 是 text/ping,包含了用户的 User-Agent,是否跨域,目标来源地址等信息,非常方便数据收集的时候进行追踪;
③ping 属性的优势:
无需 JavaScript 代码参与,网页功能异常也能上报;
不受浏览器刷新、跳转过关闭影响,也不会阻塞页面后续行为,这一点和 navigator.sendBeacon () 类似,可以保证数据上报的准确性;
支持跨域;
可上报大量数据,因为是 POST 请求;
语义明确,使用方便,灵活自主;
④ping 属性的劣势:
只能支持点击行为的上报,如果是进入视区,或弹框显示的上报,需要额外触发下元素的 click () 行为;
只能支持a链接元素,在其他元素上设置 ping 属性没有作用;
只能是 POST 请求,目前主流的数据统计还是日志中的 GET 请求,不能复用现有的基建;
适合在移动端项目使用,PC 端需要酌情使用(不需要考虑上报总量的情况下),因为目前 IE 和 Firefox 浏览器都不支持;
(参考:www.zhangxinxu.com/wordpress/2…