Generate DoubleClick Spotlight web bugs using valid XHTML

I made this 4 years 32 weeks ago

Lots of sites use tracking code like DoubleClick's for tracking.
As XHTML sites start to become served as application/xhtml+xml then this code will stop working.
Which may or may not be a bad thing, depending on your point of view.

Anyway, here is how to make their (pretty nasty) code work.

Note: this applies to other tracking systems too, although I've only done it for the DoubleClick Spotlight web bugs.

Why bother?

If you serve your XHTML pages as application/xhtml+xml then document.write will not work [1].

Here's an example

Because these web bugs are usually 1 pixel high and transparent, I've scaled it to 50 pixels and put a coloured border around it.

The script-generated web bug is coloured green, and the <noscript> web bug is red.

How it works

The script uses the DOM method createElement to create an image.
Call it like this :- 

<script type="text/javascript">generateSpotlightTags("tracking", "http://ad.uk.doubleclick.net/activity;src=123456;type=nov12345;cat=abcdefgh;ord=1;num=" + (Math.random() * 10000000000000));</script>
<noscript>
	<div><img src="http://ad.uk.doubleclick.net/activity;src=123456;type=nov12345;cat=abcdefgh;ord=1;num=1?" width="1" height="1" alt="DoubleClick Spotlight tracking image" class="noscript" /></div>
</noscript>

The javascript is shown below. Download the javascript file. 

/*code to generate doubleclick spotlight tags using valid XHTML*/

function generateSpotlightTags(container, url)
{
	//is url valid
	if (url != "" && url != null)
	{
		//does browser support DOM scripting?
		if (document.getElementById)
		{
			//find the container
			var _con = document.getElementById(container);
			if (_con != null)
			{
				//create a new <image> element
				var _img = document.createElement('img');
				
				_img.setAttribute('alt', 'DoubleClick Spotlight tracking image');
				_img.setAttribute('src', url);
				_img.setAttribute('width', "1");
				_img.setAttribute('height', "1");
				
				//attach <img> to container
				_con.appendChild(_img);
			}			
		}
		//does browser support document.images?
		else if (document.images)
		{
			var _img = new Image();
			_img.src = url;
		}
		//does browser support document.write?
		else if (document.write)
		{
			document.write("<img src=\"" + url + "\" alt=\"\" width=\"1\" height=\"1\" />");
		}
	}
}

Notes

[1] - document.write will not work...

I've tested and observed this in the following (Windows) browsers :-

  • Opera 8.5
  • Firefox 1.5
  • Netscape 8.05
  • Netscape 7.2
  • Netscape 6.2