Where should you put your Google Analytics tag?

The big question: where should you put the Google Analytics tag in your page code?  

It used to be (now, years ago – as in before 2009!) that Google recommended placing the tag in the bottom of the <body>, right before the </body> tag.  So, for years, many people have done just that.  Why?  To protect the site from Google Analytics slowing it down or, if Google's network of servers were somehow totally inaccessible (and your website's server still able to be reached by some miracle), breaking the site entirely.  However, the "async" code version launched in 2009 is recommended to be placed in the <head>, right before the </head> tag.  

Despite having been around for about 3 years, many sites still don't use the asynchronous tag version and the myth that the GA tag should be placed at the bottom of your page's code persists.

The big question is: does placement of the tag impact anything?  If placing it at the bottom of the page is supposed to ensure a speedy site, does it in fact do that?  What about any impact on traffic data quality and accuracy?  Many have complained that Google Analytics isn't "accurate" or under-counts their traffic.  Could placement of the GA tag at the bottom of the page have an impact on this?

Data Impact

Well, it turns out, accuracy can be impacted.  A business associate recently asked me about placement of the tag on a site that had "abnormally" low traffic in Google Analytics.  We looked at the site, and indeed the "classic" GA tag was placed at the bottom of the <body>.  We ran a timing check and it was taking as long as 20 seconds for the GA tracking hit to fire in some cases.

I advised to move the tag to the <head> and use the async version and said "let's see what happens."

Well… there was a change.  Traffic reported in GA went from a few dozen to around 200 visits per day, overnight!

Google Analytics traffic spike after changing placement and version of the GA tag

Data Corruption is Common

While this case is an extreme one, it's actually not that uncommon to experiene degraded reporting accuracy due to placement of the tag in the bottom of your page code.  When this happens, Google Analytics is basically the last one to get the memo about a page being viewed.  If the user leaves the page (by exiting the site, hitting the back button, or clicking to another page) before the GA tag gets to complete loading, Google Analytics won't know about the pageview.  If it's the first or only pageview of the visit, GA won't even know the visiti occurred.  This problem effects a host of metrics in Google Analytics, including:

  • Total visits
  • Unique Visitors
  • Pageviews
  • Bounce Rate
  • Average Time on Site
  • Average Pageviews per Visit
  • Landing Pages
  • Traffic Sources/Mediums
  • New vs. Return Visitor ratio

Checking Your Google Analytics Code

Determining if your site experiences this issue can be done fairly easily.  Here's how we do it everyday during Google Analytics Audits we do for clients.

Step 1: Use Chrome

Google's Chrome browser has a great built-in tool for debugging what's happenning on a page.  If you don't have Chrome already, install Chrome and then come back and continue.

Step 2: Determine your GA tag type

There are 3 versions of the Google Analytics tag: urchin.js, ga.js classic, and ga.js async.  Which one do you use?  To determine this if you don't already know, view the "page source" of your page and search for "google-analytics.com" which should find the GA tag in your code.

To view source in Chrome on a Mac press cmd + option + U.  On Windows, press ctrl + U.

When viewing source, if you see a tag like this, you're using Urchin.js code and you really must update your tag!  The urchin.js version of the tag is severly outdated (replaced in 2006!) and lacks many key features added to GA since then.

Example of what the urchin.js tag looks like on a site

If you see the following tag, you're using the ga.js classic tag.  This is better than using urchin.js, but it is still 3+ years outdated and you're missing out on great features like site speed reporting and Webmaster Tools validation to name a couple.

Example of the Classic GA.js tag on a page

If you see something like the following tag, then you're using the latest ga.js async version of the tag, and you're most likely up to date!  Note that I say "most likely" here because you could still use some deprecated settings like _setAllowHash or _trackPageLoadTime.   

Example of GA.js async tag on a page


Step 3: Measure the Timing of GA Running

Measuring timing of when Google Analytics runs isn't too hard.  First, open the Chrome Debugger by pressing cmd + option + J on a Mac, or ctrl + shift + J on a PC.  You'll see the Debugger window open – click on the Network tab next.

Next, clear your cache by right-clicking in the Network tab's ouput area and clicking "clear cache".  Doing so will avoid caching that will speed up load times artificially. 

Finally, type in your site's URL and watch the magic happen.  Once the page loads, type "utm.gif" into the "find box" in the Network output.  Notice the vertical lines to indicate timing and see where the utm.gif hit is in the overall list of items loaded.  In this screenshot it's quite a ways down!

Example of Chrome Debugger showing the timing of utm.gif hits


What to do now?

If you're experiencing anything other than super fast loading of that utm.gif hit, you should get some help from your internal expert on GA or from a certified consulting partner for Google Analytics (like Analytics Pros or another GACP).  Anything more than a 5 second delay on loading will cause a loss in traffic.  Depending on your impatient your customer base is, you could experience a significant inaccuracy issue if your timing delay is 7+ seconds or more.

I hope this helps demystify a common issue for you and set you sailing in the right direction on improving your site's reporting accuracy and loading speed!




Leave a Comment