3 Ways to Track Web Pages with Google Analytics
![[ Google Analytics ]](https://perishablepress.com/wp/wp-content/images/2010/misc-chunks/google-analytics.png)
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.
Now 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
afterbefore the closing<body>element at the bottom of your web pages - Do not combine the
ga.jsmethod with the oldurchin.jsmethod - 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 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
- Important: Remove any existing
ga.jstracking code, if present 1 - Insert the asynchronous snippet
before the closingafter the opening</head>element<body>tag 2 - Edit the “
UA-XXXXX-X” string to match your specific web-property ID - 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 not available with
urchin.js-based tracking - 2
The optimal place for the tracking snippet is after the lastEdit: “While it is customary to place JavaScript code in the<script>element in the<head>section<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
20 responses to “3 Ways to Track Web Pages with Google Analytics”
Google indicates that the new Asynchronous tracker should be placed at the top of the tag and not in the section.(I found out about this a few days ago as I also read on the google analytics site that the new tracker should be placed in the section.
A couple minor errors here:
The traditional ga.js snippet (Option #2) should go before the closing BODY tag.
The async snippet (Option #3) should go after the opening body tag.
To avoid confusion, I’d really appreciate if you update your (very nice) guide.
Article updated with the correct information – thank you JP and brian :)
Great article, Jeff; I didn’t know GA could track async transactions now; many thanks.
I was also unaware of this. Many thanks.
Now have to update GA code on many websites.
@Wulf: someone’s abusing the semi-colon! Did you read Oatmeal’s “How to use a semi-colon” comic too? haha
My pleasure, Wulf and SohoInteractive — thanks for the feedback :)
This is a great heads-up Jeff, many thanks. Have you tried the new method, and what did you observe insofar as load times relative to previous versions? It’s definitely bothered me in the past when the GA script held up my page-load.
Thank you Jeff for sharing your insights on Google Analytics tracking. The only method I have used is the old school method because shortly after that, I started using a WP plugin for Google Analytics that pretty much keeps a lazy user’s hands off hardcoding anything into the theme files.
However, in a recent effort to reduce server and CPU load, I have been cutting down on the number of WP plugins I’m running but I was still totally clueless on getting GA to work without a WP plugin. Your tutorial is such a life saver, thank you!
Have a lovely Sunday and a great week ahead!
@Trav: yes, it took a bit more time to get it setup and working, but the performance boost was definitely visible on my test site. I would say definitely worth checking out. There may already be a WordPress plugin for it, but I haven’t searched yet.
@Teddy: absolutely my pleasure — glad if it will help. I think it’s good to have all three GA techniques summarized for easy reference. I still run the old
urchin.jsmethod on a few sites, but newer sites get thega.jstreatment. Also, on some of my personal sites (such as this one), I don’t use GA at all, preferring the more closely integrated Mint to keep an eye on things.Very helpful! Many thanks…
Thanks for sharing this type of important information.