JS实现网站点击事件的统计功能。
点击事件上报，分为立即上报和延时上报，延时上报通过cookie存储。
参数名称 类型 默认值 说明
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延时，其他不延时。
增加参数。 标签参数，使用前缀_rp_定义，上报的时候会将所有_rp_开头的参数上报。参数的格式分为两种，1种纯字符，1中回调函数。 1，纯字符，直接定义字符，表示需要上传参数的值。 2，回调函数，以javascript:开头。只需定义函数体，在函数体中返回参数的值。 如，提问
标签属性_delay是否指定为true，如果是表示延迟上报。 标签，如a标签本窗口打开（target等于"_self"或空），submit按钮。
支持：需要依赖jQuery插件。
// 获得对象 // 获得标签中的参数 } // 清空参数 // 是否立即上报，如果@R420404@面，则计入延时上报 // 加入cookie，下次上报 // 上报cookie // 上报 // js上报函数 //解析外部配置 //解析外部参数 // 提供外部js函数 // cookie中的上报 // 初始化信息 以上这篇JS实现点击事件统计的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。1，引入JS
2，定义选择器和上传参数
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;
}
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();
}
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,'',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();
}
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];
}
}
$.rpComm = function(obj) {
rpComm(obj);
}
$.fn.rpComm = function() {
rpComm($(this));
}
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));
});
})();
