（1）格式协议
前端上传的数据格式:
首先生成一个唯一id的cookie，标识用户uuid。

针对页面浏览形的数据，数据格式如下:

{
    "system":"ios",
    "user_agenet":"",
    "browser_type":"chrome",
    "browser_version":"24.01",
    "refer":"www.baidu.com",
    "refer_params":{"a":1,"b":2},
    "uuid": "2b8c376e-bd20-11e6-9ebf-525499b45be6",
    "event_time": "2016-12-08T18:08:12",
    "page": "www.example.com/poster.html",
    "page_params": {
        "id": "123"
    },
    "user_agent": "Mozilla",
    "ip": "59.174.196.123",(根据ip库可以推算出访客的城市)
    "event_type": 0,(浏览/点击/退出)
    "stay_times":120(页面停留时长)
    "event_id": 12(用来后期给运营看报表的时候看的)
    "event_name": "注册页面浏览"
    "refer":"页面的上一级refer"
}

然后传到后端api接口的时候，再加上几个其他的参数，如下:

{
    "uid":1
}

另一个数据格式:点击事件。数据格式如下:

{
    "system":"ios",
    "user_agenet":"",
    "browser_type":"chrome",
    "browser_version":"24.01",
    "refer":"www.baidu.com",
    "refer_params":{"a":1,"b":2},
    "uuid": "2b8c376e-bd20-11e6-9ebf-525499b45be6",
    "event_time": "2016-12-08T18:08:12",
    "page": "www.example.com/poster.html",(当前浏览页面)
    "page_params": {
        "title": "test",
        "user_id": 1234
    },
    "element": "register",
    "relationData":[
        {"r_ask_element":"answer", "r_ask_text":"hahaha"}
        {"r_my_element":"my", "r_my_text":"wwwww"}
    ],
    "coordinate":"123,1333"(点击时的坐标),
    "screen_scale":"100,200"(窗口长高)
    "user_agent": "Mozilla",
    "ip": "59.174.196.123",
    "client_type": 0,(Web/Android/IOS)
    "event_type": 1,(浏览/点击)
    "event_id": 13(用来后期给运营看报表的时候看的)
    "event_name": "提交注册",
    "refer":"页面的上一级refer"
}

在底层绑定了一个cick事件，只要有click就上报。传递到后端的时候，数据格式如下:

{
    "uid":1
}

此外说明:
页面停留时长的计算方法:
页面加载事件(跟pv有关) 设置一个cookie: uuid.页面id.页面开始访问时间.页面离开时间(开始访问和离开时间均相同)
页面离开事件(统计页面停留时间) 更新这个cookie: uuid.页面id.页面开始访问时间.页面离开时间(更新离开时间)

(2) 可以实现的需求
1. pv
2. uv
3. 转化率(关键路径的漏斗模型)
4. 页面停留时长
5. 用户分布
6. 页面热图分析(需求记录所以点击事件，是否需要??)
7. 页面访问来源分析
8. 推广渠道的访问率

(3) 前端采集伪代码:
html:

<div>    
    <div>
        <textarea id="answer" cols="30" rows="10" user_action_relation="answer-submit"></textarea>
    </div>
    <button user_action_id="answer-submit">提 交</button>
</div>

js:

$(d).ready(function() {
    // 页面浏览上报
    pvUpload({page: getPageUrl()},
             $.extend({title: getTitle()}, getUrlParams()));
    // 绑定点击事件
    $(d).bind('click', function(event) {
        var $target = $(event.target);
        // 查找是否是需要上报的元素
        var $ua = $target.closest('[user_action_id]');
        if ($ua.length > 0) {
            var userActionId = $ua.attr('user_action_id');
            var userActionRelation = $("[user_action_relation=" + userActionId + "]");
            var relationData = [];
            // 查找相关联的元素的数据信息
            if (userActionRelation.length > 0) {
                userActionRelation.each(function() {
                    var jsonStr = JSON.stringify({
                            "r_placeholder_element": $(this).get(0).tagName,
                            'r_placeholder_text': $(this).text()
                        });
                    jsonStr = jsonStr.replace(/\placeholder/g, $(this).attr('id'));
                    jsonStr = JSON.parse(jsonStr);
                    relationData.push(jsonStr);
                });
            }
            // 点击事件上报
            clickUpload({page: getPageUrl(), element: userActionId},
                        $.extend({title: getTitle()}, getUrlParams(), relationData));
        }
    });
    // 页面跳转/跳出/计算页面停留时长
    windows.ubload(function(){
        pvUpload({page: getPageUrl(), stay_times:120},
             $.extend({title: getTitle()}, getUrlParams()));
    })
});

（4）流程图