前端数据打点（埋点）

一、埋点概念：

埋点就是在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑，包括访问数（Visits），访客数（Visitor），停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）。这样的信息收集可以大致分为两种：页面统计（track this virtual page view），统计操作行为（track this button by an event）。

1、现在埋点的主流有两种方式：

• 第一种：自己公司研发在产品中注入代码统计，并搭建起相应的后台查询。
• 第二种：第三方统计工具，如友盟、神策、Talkingdata、GrowingIO等。

2、

1. PV：Page View，页面访问次数。

2. UV：Unique Visitor，页面独立的访问次数，通过Cookie区分不同的人。

3、关键指标：

访问与访客、停留时间、跳出率、退出率、转化率、参与度

二、埋点内容

（一）、统计访问页面的情况

（二）、统计页面内的操作情况

三、埋点方案

（一）、确定收集行为

1、统计点击某按钮的次数     $('#btn').click(function(){ count++; })

2、统计停留在某一个页面的时间    

    //方法一： 
    // 解决刷新问题 ----->1、页面刷新时不会触发visibilitychange、onblur和onfocus！ 
    let strat_data = new Date().valueOf(), end_data = 0;
    // window 失去焦点
    window.onblur = function () {
        end_data = new Date().getTime();
        console.log('onblur');
        console.log('end_data-strat_data', (end_data - strat_data) / 1000);
    };

    // window 获得焦点
    window.onfocus = function () {
        console.log('onfocus');
        strat_data = new Date().getTime()
    }


    //方法二：
    let strat_data = new Date().valueOf(), end_data = 0;
    document.addEventListener("visibilitychange", function () {
        // console.log(document.visibilityState);
        if (document.visibilityState == "hidden") {
            end_data = new Date().valueOf() //当前时间戳
            console.log('隐藏');
            console.log('end_data-strat_data', (end_data - strat_data) / 1000);
        } else if (document.visibilityState == "visible") {
            strat_data = new Date().valueOf() //当前时间戳
            console.log('显示')
        }
    });

3、获取手指移动/鼠标移动的起始位置

4、表单获取焦点的行为

5、用户键盘输入的行为

document.addEventListener('keypress',function(e){
        console.log('key',e.key);
    })

6、点击的位置

（二）、确定上报方式

将行为数据提交到一个后端接口进行记录。为了避免实时的提交数据，造成性能损耗，可将行为数据存到一个列表中，每隔一段时间，将列表数据传到后端接口。

用户行为数据可能会比较多，选择间隔时间提交固定数量的行为数据后，可能会有部分数据在用户离开页面之前，无法有效的提交到后端。这时候，需要在用户离开页面之前，将剩下未提交的数据全部都一起提交了。但是有个问题，用户离开页面的时候，如果再触发 ajax 去提交数据，ajax 很大概率会被中断，导致数据提交失败。所以这里采用的方案是，在 window 的 unload 事件里把剩下的行为数据存储到 localStorage 之中。然后再访问下一个页面，或者下次访问同域的页面的时候，在用户第一次触发点击行为的时候合并 localStorage 里的数据一次性提交到后端。
不过存放到 localStorage 的方式也无法保障能提交所有的数据。在用户关闭浏览器 tab，或者浏览器 crash 的时候，window 的 unload 是不会触发的。并且不是所有浏览器都支持 window unload 事件。支持请见http://w3help.org/zh-cn/causes/SD9026
为了通用性，提交数据可以使用跨域支持的 new Image() 方式

（三）、确定数据存储格式

前面提到要将数据存储到列表中，所以需要确定下数据存储格式。
点击和移动需要记录点击事件的 screenX, screenY, pageX, pageY 还有时间和事件名。