前端页面业务中的埋点统计数据

1.背景
在H5的页面中有很多业务需要统计按钮的点击数与页面的打开数量统计以及客户是谁（多数是获取用户手机号），而统计数量的逻辑一般来说是在接口里进行以保证后台系统的查询，所以前端主要的方法便是用户点击或页面打开后调用后台的接口。但是为了方便跳转，所以按钮一般用a标签的形式，以一个简单的代码为例，上代码
2.html页面

<!--简单例子 a标签按钮-->
 <a href="javascript:;" id="egBtn" class="btn"></a>

3.js页面
我这里用的是移动端的zepto.js，跟JQ类似，都可以用“$”来选取元素。
开始之前，我这里的业务需要获取手机号，并判断是在微信还是在app里面(app里面镶嵌的H5页面)，代码里会有注释

$(function(){
    var apiURL = '';//一般来说都会有接口的basic地址，方便切换生产，测试环境
    var mobile = sessionStorage.getItem('mobile') || '';//获取到已经存入缓存的手机号
    var isWX = /micromessenger/.test(navigator.userAgent.toLowerCase());//判断是否在微信
    var page = {
        init: function() {
            if (isWX) {
                this.getMobile();
                //微信得到手机号的方法 
            } else {
               App.applymobile();
               //app得到手机号的方法
            }
            this.bindEvent();
        },
        bindEvent: function() {
            var self = this;
            //点击时的埋点方法并跳转，注意移动端这里最好使用tap方法
            $(document).on('tap', '#egBtn', function() {
                var href=""   //这里填写需要跳转的链接
                self.analysis('analysisName', href);
                return false;
            });

        },
         getMobile: function() {  //这里写获取手机号的方法
            if (mobile) {
                this.analysis('page-browsed');
                return;
            }
            var postData = {
                wxInx: "",//获取手机号所需参数
                code: "",//获取手机号所需参数
            };
            var durl ="";//获取手机号的接口
            $.ajax({
                url: durl,
                type: 'post',
                data: JSON.stringify(postData),
                dataType: 'json',
                contentType: 'application/json; charset=UTF-8',
                success: function (res) {
                    if(res.result == 'true' && res.errorcode == '00') {
                        //接口返回的mobile
                        mobile = res.mobile;
                        //获取到接口的数据 存如缓存
                        sessionStorage.setItem('mobile', mobile);
                        //进入页面的埋点
                        self.analysis('page-browsed');
                    } 
                },
                error: function (res) {

                }
            });
        },
        analysis: function(tag,href) {  //埋点方法
            var channel;
            var self = this;
            var durl = "" //埋点接口
            var postData = {
                mobile: mobile,
                businessId: '',//约定好的参数
                channelCode: '',//约定好的参数
                pageNo: '',//约定好的参数
                dataNo: channel + tag //约定好的参数，根据情况而变
            };
            if (tag == 'page-browsed') {
                //如果是进入页面的埋点，dataNo会是 "page-browsed，page-页面名称-browsed"的形式，这里也是看业务需求的字段
                postData.dataNo = channel + 'page-'+ self.getCurrentPage() +'-browsed'
            }
            $.ajax({
                url: durl,
                type: 'post',
                data: JSON.stringify(postData),
                dataType: 'json',
                contentType: 'application/json; charset=UTF-8',
                success: function() {
                    if (tag != 'page-browsed' && href) {
                    //点击按钮埋点成功之后 跳转
                        location.href = href;
                    }
                },
                error: function() {
                    helper.loading(false);
                }
            });
        }
    };
    //app里获取手机号，根据具体情况而定
    var App = {
        applymobile: function() {
            window.onApplyMobile = function (json) {
                if (json.mobile) {
                    mobile = json.mobile;
                    sessionStorage.setItem('mobile', mobile);
                    page.analysis('page-browsed');
                }
            }
        }
    };
    page.init();
});

主要的业务逻辑就是 进入页面– 获取手机号（同时根据手机号方法里埋点），点击按钮则是直接调用埋点方法。第一次发，有不足的还请各位多多指点。有问题也可以提出来，共同进步。
最后，缅怀近期因滴滴业务问题，乐清市女孩的不幸遭遇。愿逝者安息，凶手及间接的帮凶必将得到严惩。