数据统计之代码埋点

一  引言

数据统计平台，一般由数据采集，数据处理，数据存储，数据可视化，数据分析等部分组成，其中数据采集与处理是重中之重，只有及时，高效，准确的获取数据信息，才能正确的了解一个网站，一个软件的使用情况，做出可靠决策。

数据采集，因各个公司需求不同，其实现亦有所差异，不过，大体上可分为三种方案：

1、代码埋点——即在目标页面或事件中添加一小段js代码，向后端脚本异步发出伪请求，以实现基础信息统计。该方案简洁方便，能实现基本需求，而且在市场上也有百度统计，友盟这样方便的三方服务商，是绝大多数公司采用方案。

2、可视化埋点——即通过可视化工具配置采集节点，在前端自动解析配置并上报埋点数据，从而实现所谓的“无痕埋点”， 代表方案是已经开源的Mixpanel；

3、无埋点——它并不是真正的不需要埋点，而是前端自动采集全部事件并上报埋点数据，在后端数据计算时过滤出有用数据，代表方案是国内的GrowingIO

数据处理，是指针对公司业务，指定需要存储的数据和对应数据格式，以实现数据有效，直观，易于分析。

数据存储，由于统计数据存储量大，不宜采用常规数据库来存储，可采用hadoop实现。

数据可视化，换个名词，报表系统，更易于理解，可采用echart等三方实现。

数据分析，运维人员需要注意的事了，为公司战略指向提供可靠数据支持。

二、代码埋点

2.1 基于百度统计

第一步、注册或登录百度统计，并创建应用

第二步、获取代码，织入项目中

第三步、检测代码是否安装成功

第四步、查看数据分析

2.2 自实现

步骤：

1、通过浏览器内置javascript对象收集信息，如页面title（通过document.title）、referrer（上一跳url，通过document.referrer）【referrer 属性可返回载入当前文档的文档的 URL】、用户显示器分辨率（通过windows.screen）、cookie信息（通过document.cookie）以及一些公司需求信息(如用户信息，商品信息，访问接口等)。
           2、创建一个最基本的发送统计的发送函数，用于创建img(实现跨域)，发送统计请求到数据采集平台（后台）。

3、解析http请求参数的信息，从服务器（WebServer）中获取一些客户端（前端）无法获取的信息，如访客ip等。然后将信息按格式写入log。最后生成一副1×1的空gif图片作为响应内容并将响应头的Content-type设为image/gif（可能需要在响应头中通过Set-cookie设置一些cookie信息）。

代码：

1、js埋点代码

<script type="text/javascript"> 
    var _maq = _maq || [];
    //添加所需统计信息
    _maq.push(['_setAccount', '网站标识']);
    (function() {
        var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true;
        //设置统计函数路径
        ma.src = ('https:' == document.location.protocol ? 'https://www' : 'http://www') + '.xxx.xxx/ma.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s);
    })();     
</script>

2、统计函数

(function () {
    var params = {};

    //Document对象数据    
    if(document) {
        params.domain = document.domain || ''; 
        params.url = document.URL || ''; 
        params.title = document.title || ''; 
        params.referrer = document.referrer || ''; 
    }   

    //Window对象数据     
    if(window && window.screen) {
        params.sh = window.screen.height || 0;
        params.sw = window.screen.width || 0;
        params.cd = window.screen.colorDepth || 0;
    } 
  
    //navigator对象数据     
    if(navigator) {
        params.lang = navigator.language || ''; 
    }  
 
    //解析_maq配置     
    if(_maq) {
        for(var i in _maq) {
            switch(_maq[i][0]) {
                case '_setAccount':
                    params.account = _maq[i][1];
                    break;
                default:
                    break;
            }   
        }   
    }   

    //拼接参数串     
    var args = ''; 

    for(var i in params) {
        if(args != '') {
            args += '&';
        }   
        args += i + '=' + encodeURIComponent(params[i]);
    }   

    //通过Image对象请求后端脚本     var img = new Image(1, 1); 
    img.src = '后端脚本地址?' + args;
})();