Abstracting Analytics, Part 2

by Guillermo A. Fisher

Since the relaunch of the site, I’ve been work­ing with cer­tain ele­ments of the JavaScript to improve per­for­mance and keep things clean. In the past, I talked about cre­at­ing a brand new JavaScript library that I’d use here; and I started to do write it, look­ing to jQuery, Pro­to­type, and DOMAs­sis­tant for inspi­ra­tion. But, in the end, I decided that I didn’t want to add a bunch of bloat to the library (which is what ended up hap­pen­ing in my first attempt). So instead of wor­ry­ing about com­pli­cated clo­sures, unnec­es­sary abstrac­tion, and weird OOP imple­men­ta­tions, I decided to only put in what was needed; and the result, thus far, is some­thing lean and devoid of dol­lar sign func­tions, used pri­mar­ily for adding ana­lyt­ics and ads to the UI.

Right now, I’m using the OOR (Out Of Repose) name­space. If you’re look­ing at the file at the time of this writ­ing (check the date), you’ll only see 3 actual func­tions in the base object:

The first 2 func­tions are pretty self-explanatory, but my approach to wid­gets could use an explanation.

My Wid­gets

To reg­is­ter a wid­get in the OOR.widget name­space, I’m using the fol­low­ing con­ven­tion: OOR.register('widgetName', vendors);, where vendors is a JSON object of func­tions that hold code for dif­fer­ent wid­get “ven­dors”. A ven­dor — again, as I’m defin­ing it — is just an imple­men­ta­tion (or “ver­sion”, or “type”) of a wid­get. A wid­get ‘Foo’, for exam­ple, which dis­plays an image on a site, could have dif­fer­ent ven­dors: ‘Red’, ‘White’, ‘Blue’. The reg­is­tra­tion code for that wid­get would look some­thing like this:

// simple example
OOR.register('Foo', {
Red: function(options){
document.write('<img src="red.gif" alt="' + options.description + ' and I hope you like it." />');
},
White: function(options){
document.write('<img src="white.gif" alt="' + options.description + ' and you are on my site." />');
},
Blue: function(options){
document.write('<img src="bluegif" alt="' + options.description + ' and you are looking at it." />');
}
});

This would cre­ate a new func­tion — OOR.widget.Foo() — which, when called, would need 2 para­me­ters: the desired ven­dor and it’s options (you’ll notice that each of the above ven­dors takes an “options” para­me­ter, which is also a JSON object). So, if I wanted to dis­play a red image on the site, I would make the fol­low­ing call, wrapped in a script tag, some­where in the body of the page:

new OOR.widget.Foo('Red', { description: 'This is a red image' });

Accord­ing to the reg­is­tra­tion code, the above call would dis­play “red.gif”, and it’s alt tag would read: “This is a red image and I hope you like it.”

More to come

The next steps here are to mod­ify the OOR.register() func­tion to allow me to reg­is­ter sin­gu­lar wid­gets whose func­tion­al­ity is not ven­dor depen­dent, mak­ing the code look like this:

// register the widget and it's functionality...
OOR.register('Foo', function(options){
// some code
});
// the implementation code will read as follows...
new OOR.widget.Foo({foo:'sample'});

I’ll also need to make the options para­me­ter optional, so that in cases where the ven­dor code doesn’t require any con­fig­urable options, none need to be passed. Oh, and I’ll need to write some­thing to han­dle con­flict­ing namespaces.

What this has to do with Ana­lyt­ics

Here’s what Google Ana­lyt­ics looks like on my pages:

new OOR.widget.Analytics('Google', 'UA-9999999');

Nice and neat, eh? Hope this was nerdy enough for ya.

Your Feedback Civil & constructive, please.

One Response to “Abstracting Analytics, Part 2”

  1. Google Woes at guillermo, out of repose says:
    November 9, 2009 at 1:35 PM

    […] javascript.Since imple­ment­ing the changes to my Google Ana­lyt­ics instal­la­tion as detailed in my last post, I’ve noticed a sharp decrease in page views: none recorded. I put the default code back on […]

Leave a Reply