3 Ways to Track Web Pages with Google Analytics

[ Google Analytics ] Many bloggers, designers, and developers take advantage of Google’s free Analytics service to track and monitor their site’s statistics. Along with a Google account, all that’s needed to use Google Analytics is the addition of a small slice of JavaScript into your web pages. For a long time, there was only one way of doing this, and then in 2007 Google improved their GATC code and established a new way for including it in your web pages. Many people switched over to the newer optimized method, but may not realize that there are now three different ways to track your pages with Google Analytics. The latest method uses asynchronous tracking to minimize negative impact on user experience. Let’s take a look at each of these three methods for tracking your web pages with Google Analytics..

Method 1: Old School – Tracking sites with urchin.js

Web-design veterans are well familiar with the original, old-school method of GATC inclusion via the urchin.js code:

<script type="text/javascript">
_uacct = "UA-XXXXX-X";
urchinTracker();
</script>

Ahh yes, those were the days.. This method worked great for years, and continues to work just fine to this very day. Although I personally would recommend using one of the newer methods of including the GATC, you may still use this old-school method by simply copying and pasting the code into the bottom of your web pages, preferably before the closing <body> element. And then don’t forget to edit the “UA-XXXXX-X” string to match your actual GA ID.

So that’s pretty boring — let’s check out something a little newer..

Method 2: New School – Tracking sites with ga.js

In late 2007 – after years of using the original urchin.js script – Google updated and improved the GATC and renamed the tracking file to “ga.js”. As of now, this new tracking code is the platform on which all new Google Analytics features are deployed.

Here are some of the benefits of using the new ga.js tracking script:

  • Smaller file size
  • Improved performance
  • Object-oriented programming conventions
  • Namespacing and improved readability
  • Easy JavaScript integration

As with the old urchin.js-based method, using this new method requires inclusion of a small snippet of tracking code on your web pages. Depending on how you deliver your pages — over HTTP, SSL, or a combination of both — the code used to include the new Google Analytics tracking code will vary:

All web pages delivered via standard HTTP protocol

<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXX-X");
pageTracker._trackPageview();
</script>

All web pages delivered via secure HTTP (SSL)

<script src="https://ssl.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXX-X");
pageTracker._trackPageview();
</script>

Web pages delivered via combination of standard and secure protocols

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script>

As you can see, each of these methods consists of two parts: the first references the ga.js tracking code and the second executes it. A couple of notes on proper/recommended usage of either of these methods:

  • Do not combine different tracking scripts on the same page
  • Inlcude the tracking code after before the closing <body> element at the bottom of your web pages
  • Do not combine the ga.js method with the old urchin.js method
  • Don’t forget to edit the “UA-XXXXX-X” string to match your actual GA ID

I think this is the GA-inclusion method that most bloggers and designers are using in their pages. But even so, there is yet another way of including the tracking code that improves the user-experience for your visitors..

Method 3: Asynchronous Tracking – Better tracking with ga.js

This newer method of GA tracking uses a slice of asynchronous JavaScript to optimize the way in which browsers load the ga.js tracking script. The asynchronous tracking method improves the user experience and allows inclusion of the tracking script closer to the beginning of the web page without delaying subsequent content from rendering. As you might suspect, the asynchronous tracking method requires a slightly more complex inclusion method:

<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';
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>

This code represents the minimum configuration required to track a page asynchronously using Google Analytics. To take advantage of this method, you can use this tracking script on your pages by following the simple steps below. To go beyond the basics, check the official tracking reference and usage guide for information on the GA API and proper asynchronous syntax.

How to setup asynchronous analytics tracking on your site

  1. Important: Remove any existing ga.js tracking code, if present 1
  2. Insert the asynchronous snippet before the closing </head> element after the opening <body> tag 2
  3. Edit the “UA-XXXXX-X” string to match your specific web-property ID
  4. Add any customizations using the GA API and asynchronous syntax

That’s all there is to getting asynchronous GA tracking setup on your site. Of course, there are a few important notes that you should keep in mind:

  • If you experience content-loading issues, move the tracking code to the bottom of the page
  • 1 Asynchronous tracking is not available with the old urchin.js-based method.
  • 2 The optimal place for the tracking snippet is after the last <script> element in the <head> section Edit: “While it is customary to place JavaScript code in the <head> section, placing the asynchronous snippet there may trigger a parsing bug in Internet Explorer 6 and 7 on some pages. The easiest solution to this problem is to place it at the top of the <body> section.” – Google Analytics Asynchronous Tracking
  • Do not use more than one tracking snippet on any given page — you’ll break stuff