Posts

Google Analytics Code Position Top or Bottom of Page coding

/in /by

We get asked about the Google analytics code on many occasions. Why is it at the bottom of the page on some sites and at the top of the page on others?

Well the answer from Google:-

The latest version of the Analytics tracking code offers an improved way to track website visitors with Google Analytics. It takes advantage of browser support for asynchronous JavaScript to enhance the speed in which the tracking code is loaded. With this version of the tracking code, you can also place the Analytics snippet higher in the page without delaying subsequent content from rendering.

Although asynchronous tracking uses a different Analytics snippet and a different syntax for tracking calls than the traditional snippet, it supports the exact same tracking customizations as the traditional snippet. In fact, the asynchronous tracking syntax is also more flexible than the traditional snippet. For more details, see the Usage Guide.

The Snippet

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. If you need to do more than basic page tracking, see the tracking reference for a list of methods available in the API and see the Usage Guide for details on using the asynchronous syntax. For step-by-step instructions on setting up tracking, see the Help Center article on setting up tracking.

<script type="text/javascript"> 

  var _gaq = _gaq || []; 
  _gaq.push(['_setAccount', 'UA-XXXXX-X']); 
  _gaq.push(['_trackPageview']); 

  (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
  })(); 

</script>

The snippet above represents the minimum configuration needed to track a page asynchronously. It uses _setAccount to set the page’s web property ID and then calls _trackPageview to send the tracking data back to the Google Analytics servers.

Important: If you are updating your pages from the traditional snippet to the latest, asynchronous version, you should remove the existing tracking snippet first. We do not recommend using both snippets together on the same page.

Migration Instructions

This section covers how to migrate to the asynchronous snippet on pages that currently use traditional tracking with ga.js. If you are using the urchin.js snippet, please see the Asynchronous Migration Examples for help migrating your customizations from urchin.js to asynchronous tracking.

To convert your pages to use the asynchronous snippet, follow these steps:

  1. Remove your existing tracking code snippet and any customizations you have made.To reduce errors, we recommend that you remove the existing tracking code snippet from the include file or mechanism that injects it into your web pages. You can paste your existing tracking code snippet in a text file to keep track of any customized methods you use.
  2. Insert the asynchronous snippet at the bottom of the <head> section of your pages, after any other scripts your page or template might use.One of the main advantages of the asynchronous snippet is that you can position it at the top of the HTML document. This increases the likelihood that the tracking beacon will be sent before the user leaves the page. We’ve determined that on most pages, the optimal location for the asynchronous snippet is at the bottom of the <head> section, just before the closing </head> tag.
  3. Modify the _setAccount method with your web property ID.
    For more information on web property IDs, see the “Web Property” section in the Accounts and Profiles document.
  4. Add your customizations back in using the asynchronous syntax. The Usage Guide and Migration Examples pages provide many examples of these conversions.

Note: To ensure the most streamlined operation of the asynchronous snippet with respect to other scripts, we recommend you place other scripts in your site in one of these ways:

  • before the tracking code snippet in the <head> section of your HTML
  • after both the tracking code snippet and all page content (e.g. at the bottom of the HTML body)

If that isn’t an option, you can still put the asynchronous snippet at the bottom of the page. You can also split your snippet to retain some of the benefits of asynchronous tracking.