Web Analytics JS code placement – Top or Bottom of a page?

August 31, 2009 – 10:48 am

This is one area many get confused – where should the web analytic JavaScript code to paste should go on a page.

There are many places where it can be placed actually, and in fact they are correct to the scenario for that particular page!

Let me explain each placement location in detail

Bottom of the page, just above closing </body> tag: This is the most widely used placement for JS based web analytic solutions. It has its own advantage and disadvantage.Your page might contain a number of elements. The sequence on which these elements are loaded are based on the position at which they are included on a page. The elements (images, scripts etc) on the top portion of a page load prior to the one at the bottom.Consider that you have placed the web analytics code on top portion of the page immediately after opening <body> tag and assume that you are using Google Analytics. Since Google Analytics is free, many users will be using it, and thus provides a heavy load on the server most of the time. Google is a great company who know to tackle these situation, but consider a worst case – server is overloaded and the requests are queued at the server. Your web page will wait for the Google Analytics tracking code to load and since it is at the start of the page, it will give an empty page to the visitor which is struggling to load the contents!Is that a good thing you would like to see as a visitor to a web page? I am sure you will be impatient.On the other side if you have the code at the bottom of the page, the visitor is provided with the page content before the web analytics code is being loaded. So this placement – at the bottom of the page evolved from the usability perspective.Disadvantage:  As mentioned, the web analytics data capture begins after the page is loaded. This gives us the risk of the visitor closing the browser or navigating to another page by clicking a link. Result: web analytics data isn’t captured for that particular page / visitor.
Top of the page, inside <body> element: You have the potential risk of having a slow loading web page in this kind of implementation, but here you tend to get a bit more web analytics data being captured compared to the method mentioned above. User sees the page after it is been tracked. This placement is widely used in eCommerce shopping carts and checkout pages. If you are using Google Analytics and capturing eCommerece transactions, you must use this placement to make proper calls to eCommerce tracking methods of GA.

Inside <header> of a page: This is not a widely used method, but can be handy in certain situations. Imagine you have another set of JavaScript code which accidentally has a variable name or a function name same as Google Analytics which you are using as the web analytics tool. Here you will have a conflict and either one or both of the code snippets malfunction. If you place the web analytics tracking code inside <head> and above rest of the JS, you might eliminate this risk. Please Note: This particular method is suggested for Google Analytics. If you are using other web analytic solutions, please contact your vendor before using this method!

I would like to repeat, the most widely used JS tracking code placement is at the bottom of the page, just above </body>. Tracking all visitors isn’t important most of the time, but to make the website function well to the visitor is the first and foremost criteria – which need not be forgotten!

  1. One Response to “Web Analytics JS code placement – Top or Bottom of a page?”

  2. Excellent overview – personally, I think having as little js as possible on page is the solution — and the js on page should be at the bottom of the code – above the tag…

    By Glenn Friesen on Jun 28, 2010

Post a Comment