JS实现点击事件统计

JS实现网站点击事件的统计功能。

/**
 * 点击事件上报，分为立即上报和延时上报，延时上报通过cookie存储。
 * 
 * 一、配置参数，主要用于定义上报的一些配置信息。通过在外部定义_clickc对象重置参数。
 *     参数名称       类型          默认值             说明
 *     selector:      string        '_click_rp'        点击触发的选择器，支持ID、class
 *     prefix:        string        '_rp_'             需要上报的参数属性名前缀，如_rp_type，表示要上报type参数的值
 *     cookie:        string        '_click_rp'        延迟上报时的cookie名称
 *     domain:        string        '.skye.com'    cookie存储的域名（可以通过使用的网站来获得）
 *     delay:         boolean       false              是否延迟上报，延迟上报通过cookie实现
 *     delay_attr:    string        _delay             标签中指定是否延迟上报，优先级最高，ture延时，其他不延时。
 *     
 * 二、外部参数，主要用于定义上报的参数。通过在外部定义_clickq数组增加参数。
 *
 * 三、标签参数，使用前缀_rp_定义，上报的时候会将所有_rp_开头的参数上报。参数的格式分为两种，1种纯字符，1中回调函数。
 * <a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a>，表示上报时的参数为a=aa&b=bb
 * 1，纯字符，直接定义字符，表示需要上传参数的值。
 * 2，回调函数，以javascript:开头。只需定义函数体，在函数体中返回参数的值。
 * 如，<a href="/qa_question/press.html" id="ques_search_btn" class="_click_rp" _rp_act="javascript:if($('#ques_search_btn').text()=='提问'){return 'act_qa_ques';}else{return 'act_search';}"><span>提问</span></a>
 *
 * 四、延时上报，分为三种优先级，如下由高到低
 * 1，标签属性_delay是否指定为true，如果是表示延迟上报。
 * 2，是否为特定标签，如a标签本窗口打开（target等于"_self"或空），submit按钮。
 * 3，配置参数中指定的delay参数。
 * 
 * 五、支持：需要依赖jQuery插件。
 * 
 * 六、使用案列
 * 1，引入JS
 * var _clickq = _clickq || [];
 * _clickq.push(['param1', 'value1']);
 * var _clickc = {selector:'_click_rps'};
 * (function() {
 *  var click = document.createElement("script");
 *  click.src = "//cache.skye.com/js/lib/stat/click.js";
 *  var s = document.getElementsByTagName("script")[0]; 
 *  s.parentNode.insertBefore(click, s);
 * })();
 * 
 * 2，定义选择器和上传参数
 * 如，<a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a>
 */
(function () {
    // 默认参数
    var options = {
        selector: '_click_rp',
        prefix: '_rp_',
        cookie: '_click_rp',
        domain: '.skye.com',
        delay: false,
        delay_attr: '_delay'
    };

    var params = {};
    var _params = {};
    var clickObj = null; // 当前点击对象

    // 获得对象
    var getObject = function(selector) {
        if (typeof(selector) == 'object') {
            return selector;
        } else {
            var obj = $('#'+selector);
            if (obj.length) {
                return obj;
            }
            obj = $('.'+selector);
            if (obj.length) {
                return obj;
            }
            return null;
        }
    }
    // 获得选择器
    var getSelector = function(selector) {
        return '#' + selector + ',.' + selector;
    }
    // 操作cookie函数
    var getCookie = function(c_name) {
        if (document.cookie.length>0) {
            c_start = document.cookie.indexOf(c_name + "=")
            if (c_start!=-1) { 
                c_start=c_start + c_name.length+1 
                c_end=document.cookie.indexOf(";",c_start)
                if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
            }
        }
        return "";
    }
    var setCookie = function(c_name,value,expiredays,path,domain) {
        var exdate = new Date()
        exdate.setDate(exdate.getDate()+expiredays)
        var cookie = c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
        if (path) cookie = cookie + ";path=" + path;
        if (domain) cookie = cookie + ";domain=" + domain;
        document.cookie = cookie;
    }

    // 获得标签中的参数
    var getAttrParam = function() {
        if ( clickObj ) {
            var attrs = clickObj.get(0).attributes;
            $.each(attrs, function(i) {
                var name = attrs[i].name;
                if ( name.indexOf(options.prefix) == 0 ) {
                    name = name.replace(options.prefix, '');
                    var value = attrs[i].value;
                    if ( value.indexOf('javascript:') == 0 ) {
                        // 执行js获得参数值
                        value = value.replace('javascript:', '');
                        eval('var valFun = function() {'+ value +'};');
                        value = valFun();
                    }
                    params[name] = value;
                }
            });
        }
    }
    // 获得默认参数
    var getDefaultParam = function() {
        if(document) {
            params.url = document.URL || '';
            params.referrer = document.referrer || '';
        }
        // 时间
        var date = new Date();
        params.ltime = date.getTime() / 1000;

        // 时间戳
        params.t = date.getTime();
    }
    var getParamStr = function() {
        getAttrParam();
        getDefaultParam();
        // 合并配置参数
        for(var key in _params) {
            params[key] = _params[key];
        }
        //拼接参数串
        var args = ''; 
        for(var i in params) {
            if(args != '') {
                args += '&';
            }   
            args += i + '=' + encodeURIComponent(params[i]);
        }
        return args;
    }

    // 清空参数
    var clearParam = function() {
        params = {};
    }

    // 是否立即上报，如果跳转页面，则计入延时上报
    var getIsDelay = function() {
        if ( clickObj ) {
            // 有具体指定
            if ( clickObj.attr(options.delay_attr) == 'true' ) {
                return true;
            }
            // 特定标签
            // a标签
            if ( clickObj.is('a') ) {
                if ( clickObj.attr('href').indexOf('javascript:') == 0 ) {
                    return false;
                }
                if ( clickObj.attr('target') && clickObj.attr('target') != '_self' ) {
                    return false;
                }
                return true;
            }
            // submit按钮
            if ( (clickObj.is('input') || clickObj.is('button')) && clickObj.attr('type') == 'submit' ) {
                return true;
            }
        }
        return options.delay;
    }
    
    // 加入cookie，下次上报
    var setDelayCookie = function() {
        // 获得参数
        var args = getParamStr();
        var cookieStr = getCookie(options.cookie);
        if ( cookieStr == '' ) {
            cookieStr = args;
        } else {
            cookieStr = cookieStr + ',' + args;
        }
        setCookie(options.cookie, cookieStr, 7, '/', options.domain);
        clearParam();
    }

    // 上报cookie
    var rpCookie = function() {
        // 获得cookie，循环操作
        var cookieStr = getCookie(options.cookie);
        if ( cookieStr ) {
            var cookieArr = cookieStr.split(',');
            for(var key in cookieArr){  
                rpClick(cookieArr[key]);
            }  
            setCookie(options.cookie, '', 7, '/', options.domain);
        }
    }

    // 上报
    var rpClick = function(args) {
        if ( args == undefined ) {
            args = getParamStr();
        }
        var img = new Image(1, 1);
        img.src = 'http://data.skye.com/stat/click?' + args;
        console.info(img.src);
        clearParam();
    }

    // js上报函数
    var rpComm = function(obj) {
        console.info('click');
        clickObj = obj;
        if ( getIsDelay() ) {
            setDelayCookie();
        } else {
            rpClick();
        }
    }

    //解析外部配置
    if(_clickc) {
        for(var i in _clickc) {
            options[i] = _clickc[i];
        }   
    }
    
    //解析外部参数
    if(_clickq) {
        for(var i in _clickq) {
            _params[_clickq[i][0]] = _clickq[i][1];
        }
    }

    // 提供外部js函数
    $.rpComm = function(obj) {
        rpComm(obj);
    }
    $.fn.rpComm = function() {
        rpComm($(this));
    }

    // cookie中的上报
    rpCookie();

    // 初始化信息
    var _time = new Date().valueOf();
    var selector = getSelector(options.selector);
    $('body').delegate(selector,'click',function() {
        // 连续点击限制
        if(new Date().valueOf() - _time < 300) {
            return;
        }
        _time = new Date().valueOf();
        rpComm($(this));
    });
})();