How do you protect web pages against slow ad tracking web beacons ?

Question

I work for a large website. Our marketing department asks us to add ever more web ad tracking pixels to our pages. I have no problem with tracking the effectiveness of ad campaigns, but the servers serving those pixels can be unreliable. I'm sure most of you have seen web pages that refuse to finish loading because a pixel from yieldmanager.com won't finish downloading.

If the pixel never finishes downloading, onLoad never fires, and, in our case, the page won't function without that.

We have the additional problem of Gomez. As you may know they have bots all over the world that measure site speed, and it's important for us to look good in their measurements, despite flaws in their methodology. Their bots execute onLoad handlers. So even if I use a script that runs onLoad to add the pixels to the page after everything else finishes, we can still get crappy Gomez scores if the pixel takes 80 seconds to load.

My solution was to add the pixels to the page via an onMouseMove handler, so only humans will trigger them. Do you guys have any better ideas ?

Answer 1

jQuery and other JavaScript frameworks can help handle the problem by using a method such as the" document ready" function, which fire when the document is ready and don't need to wait for all the images.

I'll quote direct from the jQuery tutorial:

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this: window.onload = function(){ alert("welcome"); } Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is due to the fact that the HTML 'document' isn't finished loading yet, when you first try to run your code. To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

 $(document).ready(function(){
   // Your code here
 });

You could use this event to load those problematic images.

See this link for further info.

http://docs.jquery.com/Tutorials:How_jQuery_Works

Answer 2

I also work for a large website and here is what we did:

1. Moved the ad calls to the bottom of the page, so the content would show up first (because JS is synchronous).

2. Loaded the ads using Ajax Calls (to allow the page to be usable while the ads are loading) into a hidden element.

3. The position is moved to the correct place in the DOM and "unhidden."

   • Depending upon the page, we either wait for the ad to finish loading before move the position, or we move the position immediately.