A couple months ago I wrote an article on how to use Dojo to create a rich UI for websites. One of the key points of the article was how to support all users -- those with JavaScript enabled and those without. The purpose of this was to enable basic browsers like search engine spiders to go through your site without JavaScript, while enabling the rich interface for your regular users.

I had implemented this concept on a site I'm doing for a client when it hit me. There is another aspect to this that I hadn't covered, and that I needed to figure out ASAP. Sure, the UI looks all spiffy with things flying in left and right, and content fading in and out nicely, but to Google Analytics, all it sees are people hitting the site once and immediately leaving. This is not a good situation to be in if you want to track where your users go in a site or if they reach any goals.

I needed to figure out how to hook my AJAX calls into the Google Analytics API to let it know I had switched pages. At first thought, I was a bit nervous because I wasn't sure how much custom development I would have to do for this to work, so I asked Google. Thankfully, the answer showed up as the first result, and made me feel silly.

Since you are including the Google Analytics Javscript snippet, there is already a Google JavaScript object sitting on your page. All you have to do is simply call a method on that object that tells it what url to log. When I saw that, I was a combination of happy and a bit annoyed I didn't think of that sooner.

pageTracker._trackPageview("/pagefilename1");

Now that we have that out of the way, all that is left is to hook this call into every onclick event that changes navigation. If we are using the addCallbacks trick I outlined in my previous article, this next step is easy. Since this function is already dynamically adding code to the onclick event, we just need to add an additional line.

function addCallbacks(node, fcn)
{	
    dojo.query("a", node).forEach(function(qnode)
    {
        qnode.onclick = function(event)
        {
            fcn(qnode);
            //Google Analytics
            pageTracker._trackPageview(qnode.href);
            return false;
         };
    		
     });
}

Now, every time someone clicks on a link, JavaScript will tell Google Analytics that someone has clicked deeper within your site in addition to running the animation.

One thing to note just because it was brought up in the comments of my last article: This code will completely replace the onclick function with a new one, which was my intent. If you would rather add to the onclick event rather than replace it, you can use dojo.connect instead.

Happy Tracking!

Read more from John Barlow.