用户行为日志-js埋点（二） 实现细节
需求：统计用户页面某处的点击数或者执行到程序中某个点的次数
特点：根据实际情况，创建多个Image对象，原则谁空闲谁做事。解决因过快发送埋点数据导致部分埋点缺失的问题。
实现：（注下面的代码依赖jQuery）
var CA = {
hasInit:0,//是否初始化页面标签data-ca属性
arrImg:[],//用于工作的Image对象以及状态
maxLength:4,//同时工作的Image对象最大个数
taskQueue:[],//需要排队等候的任务
//初始化：监听body的mousedown事件，发送符合规则的埋点信息
//仅作用于一个带有data-ca属性的节点（被点击的节点或者最靠近其的父节点）。
init:function(){
var me=this;
if(me.hasInit || $("body").size()==0) return;
$("body").bind("mousedown",function(e) {
var o = $(e.target);
while (o.length > 0) {
if (o[0] == $("body")[0]) break;
//点击object标签会引发异常
try {
var name = o.attr("data-ca");
if (name) {
me.q(name);
me.log(name,"click",{page:location.href});
return true;
}
} catch(err) {}
o = o.parent();
}
});
me.hasInit=1;
},
//发CC，简单的埋点统计方式
q:function(name){
//如果参数为空，则不处理
if(typeof(name)=="undefined" || name=="") return;
var me=this,arr = [],ref,url="http://z.t.sohu.com/cc.gif?";
ref = document.referrer;
if (ref) {
ref=encodeURIComponent(ref);
}else{
ref=''
}
//必须严格按照以下的先后顺序：t,r,from,version
arr.push('t='+ (new Date()).getTime());
arr.push('r='+ref);
arr.push('from='+ name);
arr.push("version=1.5");
me.send(url+ arr.join('&'));
},
/**
* 记录统计数据——发CA,复杂的埋点统计方式
* @param {String}posi 位置
* @param {String}operate 操作
* @param {Json}details 细节信息
* @param {String}serverUrl(opt) 统计服务器地址, 可选
*/
log : function(posi, operate, details, serverUrl){
var me=this,p, v, detailData = [], logUrl = (serverUrl || "http://z.t.sohu.com/ca.gif");
if(details != null){
for(p in details){
if(details.hasOwnProperty(p)){
v = details[p];
detailData.push(
('"' + p + '":')
+ (typeof v === "string" ? '"' + v + '"' : v)
);
}
}
}
me.send(
logUrl
+ "?t=" + (new Date().getTime())
+ "&position=" + encodeURIComponent(posi)
+ "&operation=" + encodeURIComponent(operate)
+ "&details=" + encodeURIComponent(detailData.join(','))
);
},
send:function(url){
//如果参数为空，则不处理
if(typeof(url)=="undefined" || url=="") return;
var me=this,img,imgHandler,arrImg,len=0,index=-1;
arrImg=me.arrImg;
len=arrImg.length;
//查询可用的Image对象
for(var i=0;i if(arrImg[i].f==0){ index=i; break; } } //取出或者生成Image对象 if(index==-1){ if(len==me.maxLength){ me.taskQueue.push(url); return ; } img=$(new Image()); arrImg.push({f:1,img:img}); index=(len==0?0:len); }else{ img=arrImg[index].img; } //标记Image对象为正在使用状态 arrImg[index].f=1; //记录所使用的Image对象的位置 img.data("vid",index); imgHandler = function(){ var vid=$(this).data("vid"); if(vid>=0){ arrImg[vid].f=0; } if(me.taskQueue.length>0){ me.send(me.taskQueue.shift()); } }; img.unbind().load(imgHandler).error(imgHandler); $(img).attr("src",url); } }; 原文地址：http://blog.csdn.net/hxyascx/article/details/53373975