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中回调函数。
<aclass="_click_rp"href=""_rp_a="aa"_rp_b="bb">a</a>，表示上报时的参数为a=aa&b=bb
1，纯字符，直接定义字符，表示需要上传参数的值。
2，回调函数，以javascript:开头。只需定义函数体，在函数体中返回参数的值。
如，<ahref="/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(){
varclick=document.createElement("script");
click.src="//cache.skye.com/js/lib/stat/click.js";
vars=document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(click,s);
})();
2，定义选择器和上传参数
如，<aclass="_click_rp"href=""_rp_a="aa"_rp_b="bb">a</a>
(function(){
//默认参数
varoptions={
selector:'_click_rp',
prefix:'_rp_',
cookie:'_click_rp',
domain:'.skye.com',
delay:false,
delay_attr:'_delay'
};
varparams={};
var_params={};
varclickObj=null;//当前点击对象
//获得对象
vargetObject=function(selector){
if(typeof(selector)=='object'){
returnselector;
}else{
varobj=$('#'+selector);
if(obj.length){
returnobj;
}
obj=$('.'+selector);
if(obj.length){
returnobj;
}
returnnull;
}
}
//获得选择器
vargetSelector=function(selector){
return'#'+selector+',.'+selector;
}
//操作cookie函数
vargetCookie=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
returnunescape(document.cookie.substring(c_start,c_end))
}
}
return"";
}
varsetCookie=function(c_name,value,expiredays,path,domain){
varexdate=newDate()
exdate.setDate(exdate.getDate()+expiredays)
varcookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());
if(path)cookie=cookie+";path="+path;
if(domain)cookie=cookie+";domain="+domain;
document.cookie=cookie;
}
//获得标签中的参数
vargetAttrParam=function(){
if(clickObj){
varattrs=clickObj.get(0).attributes;
$.each(attrs,function(i){
varname=attrs[i].name;
if(name.indexOf(options.prefix)==0){
name=name.replace(options.prefix,'');
varvalue=attrs[i].value;
if(value.indexOf('javascript:')==0){
//执行js获得参数值
value=value.replace('javascript:','');
eval('varvalFun=function(){'+value+'};');
value=valFun();
}
params[name]=value;
}
});
}
}
//获得默认参数
vargetDefaultParam=function(){
if(document){
params.url=document.URL||'';
params.referrer=document.referrer||'';
}
//时间
vardate=newDate();
params.ltime=date.getTime()/1000;
//时间戳
params.t=date.getTime();
}
vargetParamStr=function(){
getAttrParam();
getDefaultParam();
//合并配置参数
for(varkeyin_params){
params[key]=_params[key];
}
//拼接参数串
varargs='';
for(variinparams){
if(args!=''){
args+='&';
}
args+=i+'='+encodeURIComponent(params[i]);
}
returnargs;
}
//清空参数
varclearParam=function(){
params={};
}
//是否立即上报，如果跳转页面，则计入延时上报
vargetIsDelay=function(){
if(clickObj){
//有具体指定
if(clickObj.attr(options.delay_attr)=='true'){
returntrue;
}
//特定标签
//a标签
if(clickObj.is('a')){
if(clickObj.attr('href').indexOf('javascript:')==0){
returnfalse;
}
if(clickObj.attr('target')&&clickObj.attr('target')!='_self'){
returnfalse;
}
returntrue;
}
//submit按钮
if((clickObj.is('input')||clickObj.is('button'))&&clickObj.attr('type')=='submit'){
returntrue;
}
}
returnoptions.delay;
}
//加入cookie，下次上报
varsetDelayCookie=function(){
//获得参数
varargs=getParamStr();
varcookieStr=getCookie(options.cookie);
if(cookieStr==''){
cookieStr=args;
}else{
cookieStr=cookieStr+','+args;
}
setCookie(options.cookie,cookieStr,7,'/',options.domain);
clearParam();
}
//上报cookie
varrpCookie=function(){
//获得cookie，循环操作
varcookieStr=getCookie(options.cookie);
if(cookieStr){
varcookieArr=cookieStr.split(',');
for(varkeyincookieArr){
rpClick(cookieArr[key]);
}
setCookie(options.cookie,'',7,'/',options.domain);
}
}
//上报
varrpClick=function(args){
if(args==undefined){
args=getParamStr();
}
varimg=newImage(1,1);
img.src='http://data.skye.com/stat/click?'+args;
console.info(img.src);
clearParam();
}
//js上报函数
varrpComm=function(obj){
console.info('click');
clickObj=obj;
if(getIsDelay()){
setDelayCookie();
}else{
rpClick();
}
}
//解析外部配置
if(_clickc){
for(variin_clickc){
options[i]=_clickc[i];
}
}
//解析外部参数
if(_clickq){
for(variin_clickq){
_params[_clickq[i][0]]=_clickq[i][1];
}
}
//提供外部js函数
$.rpComm=function(obj){
rpComm(obj);
}
$.fn.rpComm=function(){
rpComm($(this));
}
//cookie中的上报
rpCookie();
//初始化信息
var_time=newDate().valueOf();
varselector=getSelector(options.selector);
$('body').delegate(selector,'click',function(){
//连续点击限制
if(newDate().valueOf()-_time<300){
return;
}
_time=newDate().valueOf();
rpComm($(this));
});
})();
以上这篇JS实现点击事件统计的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。