公司为了精准的了解自己产品的用户使用情况,通常会对用户数据进行统计分析,获取pv、uv、页面留存率、访问设备等信息。与之相关的就是客户端的数据采集,然后上报的服务端。为了保证数据的准确性,就需要保证数据上报不会有差错。

常见方案缺陷

数据发回服务器的常见做法是,将收集好的用户数据,放在unload事件里面,用 AJAX 请求发回服务器。但是这种方法有个弊端,因为AJAX通常应用的场景是异步发送请求,在 unload 事件中,使用 XHR 异步发送数据。这种做法有可能导致服务端未收到数据,浏览器就已经断开连接,数据就会丢失。虽然AJAX支持同步请求,但这种做法会阻塞页面的跳转,影响用户体验。

解决方案

Beacon API 的出现就是为了解决这个问题的。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题:数据可靠,传输异步并且不会影响下一页面的加载。

使用方法

使用方式也很简单:navigator.sendBeacon(url, data)

  • url参数表明 data 将要被发送到的网络地址。
  • data 参数是将要发送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的数据
  • return: 当用户代理成功把数据加入传输队列时,sendBeacon() 方法将会返回 true,否则返回 false。
    例如:
window.addEventListener('unload', logData, false);

function logData() {
navigator.sendBeacon("/log", analyticsData);
}

兼容性

beacon api 的兼容性如下:

在不支持的浏览器中,可以使用以下 fallback 代码解决浏览器不支持 Beancon API 的问题(仅实现了 GET 方法)。

function sendBeacon (url) {
if (typeof navigator !== 'undefined' && navigator.sendBeacon) {
return navigator.sendBeacon(url);
} try {
var req = new window.XMLHttpRequest();
req.open('GET', url, false);
req.send();
} catch (e) {
// Fix IE9 cross-site error
var img = new window.Image();
img.src = url;
}
}

html5统计数据上报API:SendBeacon的更多相关文章

  1. 使用MTA HTML5统计API来分析数据

    使用MTA HTML5统计API来分析数据 在开发个人博客的时候,用到了腾讯移动分析(MTA),相比其他数据统计平台来说我喜欢她的简洁高效,易上手,同时文档也比较全面,提供了数据接口供用户调用. 在看 ...

  2. 埋点 & 数据上报 & 数据异常处理

    埋点 & 数据上报 & 数据异常处理 如何在用户关闭浏览器前面,发送请求 beforeunload unload https://developer.mozilla.org/en-US ...

  3. HTML5大数据可视化效果(二)可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  4. RandomUser – 生成随机用户 JSON 数据的 API

    RandomUser 是一个 API,它为您提供了一个或者一批随机生成的用户.这些用户可以在 Web 应用程序原型中用作占位符,将节省您创建自己的占位符信息的时间.您可以使用 AJAX 或其他方法来调 ...

  5. HTML5之本地文件系统API - File System API

    HTML5之本地文件系统API - File System API 新的HTML5标准给我们带来了大量的新特性和惊喜,例如,画图的画布Canvas,多媒体的audio和video等等.除了上面我们提到 ...

  6. HTML5 postMessage 和 onmessage API 具体应用

    HTML5 postMessage 和 onmessage API 具体应用 随着 HTML5 的发展.了解并熟悉 HTML5 的 API 接口是很重要的.postMessage(send) 和 on ...

  7. HTML5微数据

    本篇文章是一个纯搬运贴,原博主是在是做的太详细了 原贴地址:http://www.zhangxinxu.com/wordpress/2011/12/html5扩展-微数据-丰富网页摘要/ 一.微数据是 ...

  8. 生成统计数据并导出Excel

    需求:看如下表格的统计需求 生产调度中心部门需要从IT技术部门得到这些统计数据 步骤: (1)获取所有的子公司列表 (2)遍历所有的子公司,获取每个子公司的库存信息 (3)遍历所有的库存信息,并对库存 ...

  9. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

随机推荐

  1. sqlite3 FTS全文索引按照相关性排序

    PS.后来发现,以下代码并不准确.请大家不要试了. -------以下是原内容------------------------------------------------------------- ...

  2. SQLAlchemy的常用数据类型

    SQLAlchemy常用的数据类型 Column 代表数据库表中的一列 是创建对象时数据类型所依赖的对象,通过在Column对象中指明具体的数据类型来实现相应的数据库表中的列的格式自定义. Strin ...

  3. linux下apache和tomcat整合

    一 Apache与Tomcat比较联系 apache支持静态页,tomcat支持动态的,比如servlet等. 一般使用apache+tomcat的话,apache只是作为一个转发,对jsp的处理是由 ...

  4. 使用awk格式化输出文本

    注意:本文并不是一篇awk入门文章,而是偏重实例讲解 awk借鉴了c语法,因此awk在许多地方还保留有c语言的痕迹,比如printf语句:for,if的语法结构等 介绍 最简单地说,AWK 是一种用于 ...

  5. Spring5.0.x SSM项目中Json转换器 的配置

    json作为前后端交互的重要手段,在springMVC中有自带的转换器可以免去平时那些繁琐的事情: pom文件添加:spring5.0以上用Jackson2.9以上的版本 <dependency ...

  6. python基础语法7 闭包函数与装饰器

    闭包函数: 1.闭包函数必须在函数内部定义 2.闭包函数可以引用外层函数的名字 闭包函数是 函数嵌套.函数对象.名称空间与作用域 结合体. # 直接传参 def func(x): print(x) f ...

  7. 函数中,对形参做不加var的全局溢出赋值,可改变形参所指向的实参的本身值

    var formateNumArr = function(arr,defaultVal){     var a = [];     $.each(arr,function(i,v){          ...

  8. can总线学习网上资料汇总

    https://zhuanlan.zhihu.com/p/30247549?utm_source=wechat_session&utm_medium=social&utm_oi=280 ...

  9. cockroachdb docker-compose 本地集群运行以及prometheus监控

    cockroachdb 官方提供的是一个直接使用docker 运行的方式,但是使用docker-compose 会比较方便,可以快速搭建一个集群 同时官方也提供了prometheus 的metrics ...

  10. [SDOI2019]热闹又尴尬的聚会 构造,贪心

    [SDOI2019]热闹又尴尬的聚会 链接 luogu loj 思路 第一问贪心?的从小到大删除入度最小的点,入度是动态的,打个标记. 当然不是最大独立集. 第二问第一问的顺序选独立集,不行就不要.选 ...