Optimized Google Analytics asynchronous tracking code

Summary: Use Google Analytics asynchronous tracking code to speed up your site. Use this optimized, minified and compressed async Analytics snippet for maximum impact

I made a quick post to my Posterous on how to speed up your blog with Google Analytics asynchronous tracking, and here are the detailed instructions on how to add the Google Analytics asynchronous tracking to your blog with the hyper-optimized version of the async Analytics snippet for maximized speed (awesome!)

Quick introduction to Google Analytics Asynchronous tracking

Last December, Google announced new asynchronous tracking for the Analytics. The new tracking system has been fully functional for a while, but now it's officially out of beta, and everyone who is using Analytics to track traffic and other metrics should update to the new code.

Asynchronous tracking, while very hard to spell and type correctly, simply means enhancing the speed in which the tracking code is loaded. In addition to the site speed benefit (loving it!), the new version of the tracking code can be placed higher in the page without delaying subsequent content from rendering. Which means that the tracking will capture those visitors who leave before the page has been loaded better than the old code.

For advanced users, the new asynchronous tracking gives flexibility and more options over the old code. For details on that, check the async tracking usage guide. The syntax of the advanced options have been changed, so if you've been tracking outgoing links and other events, read the documentation before starting to use the async tracking.

The default Google Analytics Asynchronous Tracking Code Snippet, which we won't be using...

Here's the asynchronous snippet for tracking sites with Google Analytics:

<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>

Outstandingly optimized Google Analytics asynchronous tracking code snippet for maximum pleasure speed

But we wouldn't want to go in and add the normal code, when we can get the hyper-optimized code snippet instead, right? Feast your eyes in this amazingly beautiful and optimized Analytics tracking snippet by Mathias Bynens (@mathias on Twitter):

<script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)})(document,'script')</script>

(the whole code is on one line, no linebreaks)

Replace UA-XXXXX-X with your Google Analytics Account ID when using this. Add type="text/javascript" for HTML4 validity (see below for the full code).

Don't worry if you don't understand why the optimized code means, how it works and what has been done to it, because you only need to know that it works...

However, do check Mathias' article for details on how the code was optimized if you want. For (a geek like) me getting such a detailed explanation and reasoning on the optimization process is like spilling sun cream on the naked body of Marisa Miller.

(...)

Moving on!

The optimized snippet is 50% smaller when minified and compressed, for total size of only 380 bytes

Mathias did some testing the optimized async tracking code to show why it's worth it to optimize the code...

Test was done with three different HTML5 documents

• one with the original asynchronous Analytics snippet


• one with the optimized but non-minified snippet, and


• another with the optimized and minified snippet.

All files were served with gzip compression enabled.

Here are the file sizes of the different HTML5 documents, before and after compression:

1. With the original snippet: 735 bytes, after gzip 432 bytes


2. With the optimized (but non-minified) snippet: 614 bytes, after gzip 389 bytes


3. With the optimized and minified snippet: 569 bytes, after gzip 380 bytes

There’s an improvement of ± 23% in byte size when using the optimized snippet without gzip. When using gzip, the compression rate is still around ± 12%. When every byte counts, going from 735 bytes to 380 bytes for ~50 percent improvement is amazing.

How to add the optimized Google Analytics asynchronous tracking code to your website

If you don't have Google Analytics account yet, follow my guide on how to set up Google Analytics. When you are ready to copy the code to your site, come back here for the optimized code...

Remove the old Analytics code from your site templates and replace it with the new async code snippet:

1. Remove ALL old Analytics tracking code!


2. Copy the optimized Google Analytics asynchronous tracking code snippet above and


3. paste it just above the </head> tag in the HTML code.

For WordPress bloggers this means:

1. Uninstall any Analytics for WordPress -plugins you might have installed


2. Remove the old code if you have inserted it manually (probably in the footer.php of your theme)


3. Open the header.php -file of your WordPress theme,


4. find the </head> -tag, and


5. copy the async analytics code just above the </head> -tag.

The end result will look like this (with your Analytics Account ID replacing the UA-XXXXX-X):

<script type="text/javascript">var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)})(document,'script')</script>

</head>

Everything between <script and /script> is on one line with no linebreaks (the code wraps on the post to make it readable and easier to copy). The script-type text/javascript has been added for full HTML4 validity (optional in HTML5).

Verify that the Google Analytics tracking is working to ensure you'll get your site statistics

After inserting the code snippet, saving all the files and emptying any (page) cache (e.g. W3 Total Cache or WP Super Cache), verify the Analytics setup by going to the Analytics profile and clicking the "Check status" on the top right corner:

1. Click on the "Check Status"

After clicking you should see this:

2. "Receiving Data" means tracking is working

Google Async Tracking in WordPress

Mathias' optimized code snippet made me let go of the good'ol Google Analytics for WordPress -plugin for a while, but I went back to it when the plugin got updated to a new version (version 4), which has the asynchronouos tracking code as well. The code is not compressed like the one on this post, but the plugin is very easy to use and there are loads of highly useful options in it.

Thus, if you run a WordPress blog, use the plugin instead of manually copying the optimized code snippet. You'll easily add the async code, and the plugin will also tracks outgoing links (the new version tracks clicks as events), segments the visitors (e.g. visits per category, author, tag, etc.), and the Google Analytics for WordPress -plugin is the easiest and the best option to do it. With the plugin, you also get the benefit of not tracking my own (or other logged in) visits.

Summary

• Google Analytics Asynchronous tracking means enhancing the speed of the script and your site, in addition to tracking the visitors more reliably (if you place the code high as recommended)


• If you use Google Analytics to track your site, update the new asynchronous tracking code to your site right away.


• Use the highly optimized tracking snippet provided above for maximum speed and ultra-minified goodness.


• On WordPress, add Google Analytics into your blog with the Google Analytics for WordPress -plugin (The additional options and convenience of the plugin make it better option over the little speed benefit of the tiny code)

But now, go take Google Analytics Asynchronous Tracking in use on your blog (and use the optimized code if you want to geek it with ultra optimized code).

p.s. Thanks, credit and boatload of respect to Mathias for the optimized async analytics snippet.

---

Original post from Zemalf's Website optimization blog:

Optimized Google Analytics asynchronous tracking code

Here's more posts like to this:

1. How to set up Google Analytics


2. Track Outgoing Links with Google Analytics


3. Adding Google Analytics to Your WordPress Blog

via Make Your Own Website Tools Tips Tricks http://feedproxy.google.com/~r/Zemalf/~3/rYJLXdIOhpA/ Best WordPress Hosting