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)); }); })();
以上这篇JS实现点击事件统计的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phpstudy。
本文地址:https://www.stayed.cn/item/14654
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我