在实践的过程中我们抽离了一套用于前端统计的框架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。下面列举几个常见的数据展示方式：
浏览器的占比情况：
用户的登陆情况
用户的地理位置分布
有些时候需要看多天的波动情况，例如浏览器的多天占比波动情况
还有些时候你可能需要使用一些表格来展示：
总结
前端的数据有很多的分析价值，它是线上用户的真实反馈，直接体现着产品的用户体验。根据文中描述的步骤，你完全可以搭建自己的前端数据平台。
