javascript 利用Image对象实现的埋点(某处的点击数)统计

130 阅读 0 评论 86 点赞

我是靠谱客的博主优美板栗，最近开发中收集的这篇文章主要介绍javascript 利用Image对象实现的埋点(某处的点击数)统计，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求：统计用户页面某处的点击数或者执行到程序中某个点的次数
特点：根据实际情况，创建多个Image对象，原则谁空闲谁做事。解决因过快发送埋点数据导致部分埋点缺失的问题。
实现：（注下面的代码依赖jQuery）

复制代码代码如下:

 
var Statistic= { 
arrImg:[], 
log:function(from){ 
//如果参数为空，则不处理 
if(typeof(from)=="undefined" || from=="") return; 
var me=this,img,imgHandler,arrImg,len=0,index=-1; 
arrImg=me.arrImg; 
len=arrImg.length; 
//查询可用的Image对象 
for(var i=0;i<len;i++){ 
if(arrImg[i].f==0){ 
index=i; 
break; 
} 
} 
//取出或者生成Image对象 
if(index==-1){ 
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; 
} 
}; 
img.unbind().load(imgHandler).error(imgHandler); 
var arr = [],ref,url="http://z.ccccccc.com/beacon.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); 
$(img).attr("src",url+ arr.join('&')); 
} 
}; 