Is it safe to use the new image () for click tracking?

Question

I am developing a click tracking system to track the use of my product on external (client) sites. I would like my clients to simply put a javascript call on any element using onclick.

My current approach uses an Image () object to create a request to my tracking server. This works great, but I have some doubts as to whether it is safe. If I put this in a link, can I be sure that my request is sent before the browser clicks on the link? My testing shows that I can’t.

So, I tried to use onclick = "return MyFunction ()", which returns true if and only if the image has finished loading. However, I cannot load the image by blocking the stream in Myfunction (), since javascript only works on one stream. Therefore, I have to use a blocking call that blocks the request for 500 ms, which will reduce the risk of sending the request, but will decrease the performance on the site.

Another approach would be to use callbacks or the like to handle the page switcher after loading the image. Sort of:

<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> 

This will require my clients to implement the function as above. Moreover, if for some reason the image does not load (if, for example, my server is unavailable), the client site will break.

I checked google ga.js and it says that they are using some kind of lock, not event handling and callbacks. But then again, their code is intentionally hard to understand.

My questions:

• Can I be sure that the request is using the new Image (). Does src in the onclick event fire before the browser clicks the link, or will I need to use a delay?

• Does this behavior differ between browsers and browser versions?

• Is there a “best practice” method for click tracking that I haven't found yet?

EDIT: 4. Does anyone know how Google Analytics does this? They seem to use the onclick = MyFunction () approach, with no return or callback statements.

Answer 1

Following @Gaby's comment, you should use some way to avoid cached requests, you can use a Date object to do this. You must also implement onerror in the same way, so you are not breaking the site. The code should look something like this:

 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; } 

Thus, if your server does not work, it will not record the user's click, but the site behaves normally. Adding a unique query string to the image URL will prevent cached requests.

If onload or onerror are not executed due to browser incompatibility, you can also use setTimeout to redirect the page to the desired URL. Thus, if none of the events light up at the expected time, you will receive a final supply.