How to design website to be web analytics friendly?

-Akshay Ranganath

Last week, we received a few requests for implementing Analytics code on over 1000 pages of a client web site. It was while breaking our heads over the sheer amount of mundane task that we realized on the potential of making this process a lot more easier.

Now a days, almost everyone wants to have analytics code implemented on their site. Given that Google is offering it totally for free, who would not want to use it?

So, first thing to do is start with the assumption that your site is going to have an analytics implementation at some point of time. If you see various products out there, the basic things of most products are:

  1. a small javascript code asking for insertion of a vendor provided script. This will be s_code.js for Omniture SiteCatalyst. For Google Analytics, the file will be urchin.js
  2. another piece or a same piece of code that follows this initial include line for capturing the variable that needs to be reported on. For this purpose, you have multiple option, depending on the product being used:
    1. Omniture SiteCatalyst: Use the custom variables
    2. Google Analytics: I am yet to learn this!

I am assuming that you want to implement a basic analytics solution on the web site. This is the case of most people. (I know it is a generalization but, since this industry is in a nascent stage, there is a lot of information that can be gleaned even with this level of implementation).

To help accommodate this, the pages of the web site should have two important features:

  1. A include line at the top of the file, just after the <body> tag. This line in turn can insert the necessary JavaScript code needed for Google Analytis or Omniture SiteCatalyst.
  2. A shorter code snippet for pulling in the various custom parameters.

To explain this concept, I’ll use the example of Omniture SiteCatalyst. Suppose, you have a news publishing website and you need to measure the following:
1.Page name – s.pagename
2.Section Name –
3.Headline, if applicable – s.prop1
4.Name of author, if applicable – s.prop2
(Paramters after ‘-‘ are the Omniture SiteCatalyst variable)

What I would suggest is a simple implementation of placing the necessary information in a DOM accessible format on the rendered page. So, for example, if the details could be designed as follows:
1.<title></title> can contain the correct page name of the details could be put in <div></div> tags
So, my final rendered page had the details in a format like:

<div id='section'>Latest news: Sports</div>
<div id='headline'>Man U win Championship Leage – yet again!</div>
<div id='author'>John Brown</div>

Then, we could write a generic JavaScript to pull in the values. The possible pseudo-code would look like:

function getArticleName(article) {
if article requested is 'Section' then {
check if element called section exists
if yes, then return this value

The final page for could be rendered in a very generic format:

s.pagename = document.title = getParameterName('section');
s.prop1 = getParameterName('headline');
s.prop2 = getParameterName('author');

and so on..

Since this is a generic function, it can be easily added in all pages as it is. To ensure the correct usage, it would be a good idea to insert this code just before the tag.

Implementation example
Suppose you are using .Net then the master page concepts fits nicely into the scheme of things. Add the line for including the Javascript (s_code.js or urchin.js) in the master page.

Then, include this master page in all your ASPX pages. And that’s should get you a foundation.

Then, design a short javascript having the four lines mentioned about and include it in all your pages just before the end of body tag. As a worst case, the javascript could be empty and do nothing. Still, the pain of updating each page in future is resolved.

The other option could be to use a master footer page. This option would make life a lot more simple.

So, you see implementation of analytics, at least the basic one can be made a lot more easy and painless with a few bit of code designed into your system. Trying to do this after everything is done could be a bit of a pain and unnecessary wastage of effort.


Author: akshayrangananth

CDN Specialist, Web performance evangelist, and SEO tinkerer.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s