Articles in The '_trackPageLoadTime' Tag

Installing Site Speed tracking for Google Analytics

by MoreVisibility

A website page’s loading time is unfortunately something that is often over-looked. Have you ever been to a website that loads slowly? Almost everyone who has used the internet has at one point or another – and it’s a highly frustrating experience. We want pages to load, and we want them to load instantly!

Today, we’re going to help every website owner using Google Analytics to measure how fast (or, how slow) their webpages are loading by showing them how to configure their JavaScript tags to collect page loading speed data for their reports.

Ready? Here we go!

Step 1: Google Analytics Tracking Code

We have been very fortunate over the years to have a frequent stream of new readers to our Analytics & Site Intelligence blog (and our other blogs here at MoreVisibility), so we’re not going to assume anything – even if you’re a new reader and you use Google Analytics.

The Google Analytics Tracking Code (GATC) is the snippet of JavaScript that you will see on the pages of your website if you view the source code of any page. Most websites today are using one of two versions of the GATC: the asynchronous version (the “async” version), or the traditional version (the “ga.js” version).

Before you can install site speed tracking, you need to know which version of the GATC your site is using.

If your code looks similar to the following example, then your site is using the “async” GATC:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-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>

If your code doesn’t look like the above example, but looks more like this second example, then your site is using the “ga.js” GATC:

<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">
var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
pageTracker._trackPageview();
</script>

Knowing the type of GATC tracking code will allow you to follow along with your own site for the remainder of this blog post.

Now, for the small number of you who don’t see either of those two examples on your site, but rather you see something like this example:

<script src="http://www.google-analytics.com/urchin.js"
type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-XXXXXXX-X";
urchinTracker();
</script>

then, you are about to receive some bad news. Your site is using the legacy GATC model, which is also known as the “urchin.js” GATC. Site speed reporting in Google Analytics does not support the “urchin.js” tracking code. You will need to update your website pages to the “async” GATC (recommended) or the traditional “ga.js” GATC in order to be able to collect and use site speed data in your reports.

Read about the benefits of the new “async” tracking code here.

Step 2: Installing the site speed command

To pull this off, you will need to install one additional line of JavaScript in a specific location of your GATC. However, make sure to copy the correct line of code for your GATC!

If you are using the “async” GATC, copy this line:

_gaq.push(['_trackPageLoadTime']);

If you are using the “ga.js” GATC, copy this line:

pageTracker._trackPageLoadTime();

Now that you have copied the correct site speed tracking line of JavaScript, paste it directly and immediately after the call to _trackPageview (this command appears in both GATC versions). I placed that instruction in bold because you want to make sure that you install this correctly (as with any JavaScript snippets).

Your “async” GATC should look like this after installation:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
(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>

Your “ga.js” GATC should look like this after installation:

<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">
var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
pageTracker._trackPageview();
pageTracker._trackPageLoadTime();
</script>

Note: You don’t have to install site speed tracking on every page of your website – you can install it on select pages, or one page if you just want to test it out first. However, most developers use some type of include file or global template – so it maybe easier to apply this change on that include or template and update your GATC site-wide.

3. Things to know about site speed in Google Analytics

Now that you’re collecting site speed data, you will be able to see that data appear in the new version of Google Analytics (the data will not appear in the current / traditional version of Google Analytics). The report is in the Content section, and is the third link from the top.

Here is a list of things that you will need to know about the data that you will see:

– You will see two new metrics in the Site Speed report: Avg. Page Load Time and Page Load Sample.

– Avg. Page Load Time is easy to understand: it’s the average amount of time (in seconds) that it takes for your pages to load.

– Page Load Sample is the metric that you have to watch out for: this is the actual number of page views that Google Analytics is using at its sample to calculate the average page load time. You will definitely notice, as you collect site speed data, that Google Analytics isn’t using 100% of all page views to calculate your average page load time – this is perfectly normal.

– Technical: using _trackPageLoadTime means that your website pages will send an extra “utm.gif” request to Google Analytics servers – which is separate from the standard request sent to track page views, and which is also perfectly normal.

– Visitors using older browsers that don’t support HTML5 or visitors using older browsers without the Google toolbar installed will not be able to be tracked for the site speed report (this is a small fraction of your visitors).

Have fun, glean lots of insights, and start optimizing slow-loading pages to be fast-loading pages! Also, leave us a comment to tell us how you will use Site Speed, or any tips that you would like to share.