Where Should The Google Analytics Tracking Code Be Placed?

Before I even start talking about this, let’s go to for the official recommendation on where someone should place their Tracking Code on their webpages…

The Analytics snippet is a small piece of JavaScript code that you paste into your pages. It activates Google Analytics tracking by inserting ga.js into the page. To use this on your pages, copy the code snippet below, replacing UA-XXXXX-X with your web property ID. Paste this snippet into your website template page so that it appears before the closing </head> tag.

We actually get people asking us about this a lot. It’s one of the first items in our audits that we look at. What version of the tracking code are you using, and where is it on the page. There are plenty of variations, but the most common one if it’s not completely up to date, is having non-Asynchronous (or ‘traditional’) tracking code, which is placed at the bottom of the page.  So when the first item in our audit says “We recommend you update to the Asynchronous tracking code, and move it’s placement into the <head> of your document, rather than at the end of the <body>” people get worried.

Is it bad to have the Google Tracking Code at the bottom of the page? I read that you should put it there at the bottom, rather than up in the head because it makes your site faster.

The less quick part of that answer is that it WAS bad to put the traditional Google Tracking Code in the head of your webpage in the past, so if you read some book or blog purporting to speed up your website extolling the virtues of putting the Google code at the bottom of the page, then they may have been correct once, but they aren’t anymore. The speed of the internet, and all that jazz.The quick and dirty answer is that yes it’s safe to put the new code really anywhere on the page, and for 99% of users, you’ll want to use the Asynchronous code and put it in the head of your document. There are a few exceptions/alterations which I’ll note in a minute.

Google released the Asynchronous Tracking code on December 1st, 2009. Prior to that point all we had was the traditional code, and it worked like most other basic JavaScript code. That is to say that it would go one line at a time. So when your browser loaded up a line of code, it would load that line only, and then wait till that line was fully loaded. Then, and only then, would it move to the next line, and then load that line, etc. Like a single conveyor belt. The problem with that design though, is that if you ran into a snag the entire page would hang. So if the Google Tracking Code back then was placed at the top of your webpage in the head of the document, then the speed your site loaded was partly determined by how quickly Google sent you that code. If it took Google 10 seconds to send you that code, that was 10 more seconds your visitor had to wait to view the page. That’s why it was recommended to put that code at the very bottom of the page. That way if it stalled in loading the files from Google, at least your page was loaded first.

The Asynchronous code though works differently. Rather than say a SINGLE conveyor belt, now there are multiple ones, and the rest of your page can load up regardless of how long it takes to retrieve data from Google. The tracking code loads up on its own conveyor, while the rest of your site loads on another.

And on top of that the Asynchronous code is designed to be downloaded only once from Google, and then it’s served from your cache (i.e. it’s saved on your computer and you won’t have to download it again), which makes it that much faster.