前端数据之美 -- 基础篇

随着 web 技术的蓬勃发展，前端的展现、交互愈来愈复杂，在用户的访问、操做过程当中产生了大量的数据。由此，前端的数据分析也变得尤其重要。固然，对于站长来讲，你可使用百度统计等各类已有的服务平台，可是，若是现有的统计平台不能知足你的须要，你想开发本身定制化的数据统计平台，或者你是一个纯粹的 geek，想了解背后隐藏的技术，又或者你对前端的数据统计感兴趣，本文就能知足你那颗好奇的心。下面就逐步描述前端有哪些数据、如何采集前端的数据、以及如何展现数据统计的结果。

有哪些？

前端的数据其实有不少，从大众广泛关注的 PV、UV、广告点击量，到客户端的网络环境、登录状态，再到浏览器、操做系统信息，最后到页面性能、JS 异常，这些数据均可以在前端收集到。数据不少、很杂，不进行很好的分类确定会致使统计混乱，也不利于统计代码的组织，下面就对几种广泛的数据需求进行了分类：

一、访问

访问数据是基于用户每次在浏览器上打开目标页面来统计的，它是以 PV 为粒度的统计，一个 PV 只统计一次访问数据。访问数据能够算做是最基础、覆盖面最广的一种统计，能够统计到不少的指标项，下面列出了一些较为常见的指标项：

• PV/UV：最基础的 PV（页面访问数量）、UV（独立访问用户数量）
• 页面来源：页面的 refer，能够定位页面的入口
• 操做系统：了解用户的 OS 情况，帮助分析用户群体的特征，特别是移动端，iOS 和 Android 的分布就更有意义了
• 浏览器：能够统计到各类浏览器的占比，对因而否继续兼容 IE六、新技术（HTML五、CSS3 等）的运用等调研提供参考价值
• 分辨率：对页面设计提供参考，特别是响应式设计
• 登陆率：百度也开始看重登录，登录用户具备更高的分析价值，引导用户登录是很是重要的
• 地域分布：访问用户在地理位置上的分布，能够针对不一样地域作运营、活动等
• 网络类型：wifi/3G/2G，为产品是否须要适配不一样网络环境作决策
• 访问时段：掌握用户访问时间的分布，引导消峰填谷、节省带宽
• 停留时长：判断页面内容是否具备吸引力，对于须要长时间阅读的页面比较有意义
• 到达深度：和停留时长相似，例如百度百科，用户浏览时的页面到达深度直接反映词条的质量

二、性能

页面 DOM 结构愈来愈复杂，可是又要追求用户体验，这就对页面的性能提出了更高的要求。性能的监控数据主要是用来衡量页面的流畅程度，也有一些主要的指标：

• 白屏时间：用户从打开页面开始到页面开始有东西呈现为止，这过程当中占用的时间就是白屏时间
• 首屏时间：用户浏览器首屏内全部内容都呈现出来所花费的时间
• 用户可操做时间：用户能够进行正常的点击、输入等操做
• 页面总下载时间：页面全部资源都加载完成并呈现出来所花的时间，即页面 onload 的时间
• 自定义的时间点：对于开发人员来讲，彻底能够自定义一些时间点，例如：某个组件 init 完成的时间、某个重要模块加载的时间等等

这里只是解释了这些指标的含义，具体的判断、统计方式在后续发出的文章中会详细介绍。

三、点击

在用户的全部操做中，点击应该是最为主要的一个行为，包含了：pc 端鼠标的 click，移动端手指的 touch。用户的每次点击都是一次诉求，从点击数据中能够挖掘的信息其实有不少，下面只列出了咱们目前所关注的指标：

• 页面总点击量
• 人均点击量：对于导航类的网页，这项指标是很是重要的
• 流出 url：一样，导航类的网页，直接了解网页导流的去向
• 点击时间：用户的全部点击行为，在时间上的分布，反映了用户点击操做的习惯
• 首次点击时间：同上，可是只统计用户的第一次点击，若是该时间偏大，是否就代表页面很卡致使用户长时间不能点击呢？
• 点击热力图：根据用户点击的位置，咱们能够画出整个页面的点击热力图，能够很直观的了解到页面的热点区域

四、异常

这里的异常是指 JS 的异常，用户的浏览器上报 JS 的 bug，这会极大地下降用户体验，对于浏览器型号、版本满天飞的今天，再 NB 的程序员也不免会有擦枪走火的时候，固然 QA 可以覆盖到大部分的 bug，但确定也会有一些 bug 在线上出现。JS 的异常捕获只有两种方式：window.onerror、try/catch，关于咱们是如何作的将在后续的文章中有详细的描述，这里只列出捕获到异常时，通常须要采集哪些信息（主要用来 debug 异常）：

• 异常的提示信息：这是识别一个异常的最重要依据，如：’e.src’ 为空或不是对象
• JS 文件名
• 异常所在行
• 发生异常的浏览器
• 堆栈信息：必要的时候须要函数调用的堆栈信息，可是注意堆栈信息可能会比较大，须要截取

五、其余

除了上面提到的 4 类基本的数据统计需求，咱们固然还能够根据实际状况来定义一些其余的统计需求，如用户浏览器对 canvas 的支持程度，再好比比较特殊的 – 用户进行轮播图翻页的次数，这些数据统计需求都是前端可以知足的，每一项统计的结果都体现了前端数据的价值。

如何采集？

在前端，经过注入 JS 脚本，使用一些 JS API（如：!!window.localStorage 就能够检验浏览器是否支持 localStorage）或者监听一些事件（如：click、window.onerror、onload 等）就能够获得数据。捕获到这些数据以后，须要将数据发送回服务器端，通常都是采用访问一个固定的 url，把数据做为该 url 的 query string，如：http://www.baidu.com/u.gif?data1=hello&data2=hi。

在实践的过程当中咱们抽离了一套用于前端统计的框架alog，方便开发者书写本身的统计脚本，具体的使用方法和 API 见github。下面就使用 alog 来简单说明如何进行前端数据的采集：

例如：你须要统计页面的 PV，顺便加上页面来源（refer）

// 加载 alog，alog 是支持异步的
void function(e,t,n,a,o,i,m){
e.alogObjectName=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=e[o].l||+new Date,i=t.createElement(n),i.asyn=1,i.src=a,m=t.getElementsByTagName(n)[0],m.parentNode.insertBefore(i,m)
}(window,document,"script","http://uxrp.github.io/alog/dist/alog.min.js","alog");

// 定义一个统计模块 pv
alog('define', 'pv', function(){ 
   var pvTracker = alog.tracker('pv');
   pvTracker.set('ref', document.referrer); // 设定 ref 参数
   return pvTracker;
});

// 建立一个 pv 统计模块的实例
alog('pv.create', {
    postUrl: 'http://localhost/u.gif' // 指定上传数据的 url 地址
});

// 上传数据
alog('pv.send', "pageview"); // 指明是 pageview

在页面上部署上面的代码，浏览器将会发送下面的 http 请求：

http://localhost/u.gif?t=pageview&ref=yourRefer

再例如：JS 异常的采集，须要进行事件监听

// 加载 alog
void function(e,t,n,a,o,i,m){
e.alogObjectName=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=e[o].l||+new Date,i=t.createElement(n),i.asyn=1,i.src=a,m=t.getElementsByTagName(n)[0],m.parentNode.insertBefore(i,m)
}(window,document,"script","http://uxrp.github.io/alog/dist/alog.min.js","alog");

// 定义一个统计模块 err
alog('define', 'err', function(){ 
   var errTracker = alog.tracker('err');
   window.onerror = function(message, file, line) { //监听 window.onerror
        errTracker.send('err', {msg:message, js:file, ln:line});
    };
   return errTracker;
});

// 建立一个 err 统计模块的实例
alog('err.create', {
    postUrl: 'http://localhost/u.gif'
});

这时，只要页面中 JS 发生异常，就会发送以下面的 HTTP 请求

http://localhost/u.gif?t=err&msg=errMessage&js=jsFileName&ln=errLine

如何展现

采集到数据以后，通过一系列的数据处理、汇总等操做以后，咱们须要使用生动的图表来呈现数据，让用户（产品决策者、开发人员等）可以方便、快捷的看懂数据。咱们推荐使用百度的开源 javascript 图表库ECharts。下面列举几个常见的数据展现方式：

浏览器的占比状况：

用户的登录状况

用户的地理位置分布

有些时候须要看多天的波动状况，例如浏览器的多天占比波动状况

还有些时候你可能须要使用一些表格来展现：

总结

前端的数据有不少的分析价值，它是线上用户的真实反馈，直接体现着产品的用户体验。根据文中描述的步骤，你彻底能够搭建本身的前端数据平台。

该文写在w3ctech的走进名企 - 百度前端 FEX 专场以后，分享时的 PPT 在这里，视频在这里。