The other week I added Google Analytics to all the web-facing applications I'd produced for a customer. They then asked if I'd mind adding it to a copy of DominoWiki they used. "Not at all" I said, knowing it to be a two minute copy-paste task.

The trouble is it turned in to a two hour job!

Google Analytics adds itself to a page using this line of code:

This adds a Script tag to the document and loads the required code from Google's site. That's the idea. On the DominoWiki page it didn't add a tag though. It just wrote the escaped string to document itself as visible text.

The first thing I did was add some more JavaScript lines to test the result of escape('<'), which it bizarrely returned as '&lt;'. Since when did escaping do that!?

After about an hour of messing about with charset settings and whatnot I started to reverse engineer the page to the point where I found that removing the reference to the wiki.js file solved the problem. Looking about in that file I found the following function:

/*
        unescape
        Decode an XML string
*/
function unescape(s)
{
        var n = s;
        n = n.replace(/&lt;/g, "<");
        n = n.replace(/&gt;/g, ">");
        n = n.replace(/&quot;/g, "\"");
        n = n.replace(/&amp;/g, "&");
        
        return n;
}

Whoever coded this part of the Wiki had re-written the built-in escape/unescape JavaScript functions. I'm sure I don't need to tell you how naughty that is. Not only bad practice but just plain annoying for the likes of me who come in afterward to do anything and spend half their morning struggling to work it all out.

The fix is simple enough. Just add the following two lines to the unescape() function in wiki.js:

//Following two lines required for Google Analytics to work
n = n.replace(/%3C/g, "<");
n = n.replace(/%3E;/g, ">");

Here's a massive list of "reserved" words you should avoid using in your own code as variables or function names.

var Wiki = {};

Wiki.unescape = function(s)
{
        var n = s;
        n = n.replace(/&lt;/g, "<");
        n = n.replace(/&gt;/g, ">");
        n = n.replace(/&quot;/g, "\"");
        n = n.replace(/&amp;/g, "&");
        
        return n;
}

There's then little to no chance of the code conflicting. Not just with others developers code but also with the inbuilt code of the browser.

Right then, back to what I should have been doing...