使用新的Image()进行点击跟踪是否安全？

Question

我正在开发一个点击跟踪系统来监控我公司产品在外部(客户)网站上的使用情况.我希望能够告诉我的客户只需使用onclick对任何元素进行javascript调用.

我目前的方法是使用Image()对象为我的跟踪服务器创建请求.这很好用,但我对这是否安全有疑问.如果我把它放在一个链接上,我可以确定我的请求是在浏览器跟随链接之前发送的吗？我的测试表明我做不到.

所以我尝试使用onclick ="return MyFunction()",当且仅当图像加载完毕时才返回true.但是我无法在Myfunction()中阻塞线程时加载图像,因为javascript只在一个线程上运行.所以我必须使用一个阻塞调用该块的请求说500毫秒这将减少未被发送的请求的危险性,但降低了网站性能.

另一种方法是在加载图像之后使用回调等来处理页面切换.就像是:

<a href="http://www.google.som" onclick="return MyFunction(this)">Link</a>

<script type="text/javascript">

function MyFunction(theLink)
{
var img  = new Image();
img.onload = function(){ location.href=theLink.href; }
img.src = "http://www.myserver.com/trackclick";

return false;

}

</script>

这将要求我的客户按上述要求实施该功能.此外,如果由于某种原因图像没有加载(例如我的服务器停机),客户站点将会中断.

我检查了谷歌的ga.js,它表明他们使用某种阻止而不是事件处理和回调.但话说回来,他们的代码有意难以理解.

我的问题是:

1. 在浏览器跟踪链接之前,我是否可以确定在onclick事件中使用新Image().src的请求,或者我是否需要使用延迟？

2. 浏览器和浏览器版本之间的这种行为有何不同

3. 是否有一种"最佳实践"方式来进行我尚未找到的点击跟踪？

编辑:4.有谁知道Google Analytics如何做到这一点？他们似乎使用onclick ="MyFunction()"方法,没有返回语句或回调.

Answer 1

关注@ Gaby的评论,您应该使用某种方法来避免缓存的请求,您可以使用Date对象.您还应该以相同的方式实现onerror,因此您不会破坏该站点.代码应该类似于:

function MyFunction(theLink){
   var img  = new Image();
   img.onload = img.onerror = function(){ location.href=theLink.href; }
   img.src = "http://www.myserver.com/trackclick?d=" + new Date().getTime();
   setTimeout(function{location.href=theLink.href; }, 350);
   return false;
}

这样,如果您的服务器关闭,它将不会记录用户的点击,但该网站的行为正常.向图像的URL添加唯一查询字符串将阻止缓存的请求.

如果由于浏览器不兼容而导致onload或onerror无法执行,您还可以使用setTimeout将页面重定向到所需的URL.这样,如果没有事件在预期时间内发生,那么你就有了最终的后备.