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>

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

我查看了Google的ga.js，并建议他们使用某种阻止而不是事件处理和回调。但话说回来，他们的代码有意难以理解。

我的问题是：

我可以确定在浏览器跟踪链接之前触发了onclick事件中使用新Image（）。src的请求，还是需要使用延迟？
浏览器和浏览器版本之间的这种行为是否有所不同？
是否有“最佳实践”方式进行我尚未找到的点击跟踪？

编辑：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。这样，如果没有一个事件在预期的时间内发生，那么你就有了最终的后备。

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

1 个答案: