How To Add Site Speed For Google Analytics In WordPress

Yesterday, Google announced the addition of Site Speed to Google Analytics, which adds a page load time dimension across a range of reports. Great! Lets get it working with our WordPress sites.

The Benefit Of Site Speed For Google Analytics

Google has a released a number of tools to help improve page load times, mostly under the Page Speed banner.

Site Speed goes a step further by integrating load time information into Google Analytics, across a range of reports. We’ll be able to see which pages are fastest (and slowest), what site performance is like against different visitor locations, browsers, operating systems etc.

But enough of that, I’m sure it will be covered in greater detail elsewhere. The angle I’m taking is how to get it working in WordPress.

Adding Site Speed To The Google Analytics Code

The code required to activate Site Speed is outlined in the Google Analytics help page for Site Speed. I’m going to be focusing on the newer Asynchronous code (stop reading now if you use the old code).

Here is the default code, as outlined by the help page.

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

The new code that makes Site Speed work is the following new line:

_gaq.push(['_trackPageLoadTime']);

This is what we need to add to our existing code on our WordPress sites.

Setting Up Site Speed in WordPress

Although it’s possible to add your Google Analytics code directly to your theme, the vast majority of people will use a WordPress plugin to add the code. As the Site Speed feature is brand spanking new, it has not yet been integrated into these plugins.

That doesn’t mean you can’t use it – the most popular WordPress plugins for Google Analytics are flexible enough to let you add the tracking code yourself.

I’ll focus on the two main WordPress plugins for Google Analytics (that I’m aware of):

Edit: Site Speed has now been added to both of these plugins and is turned on by default. There’s no longer any need to do anything!

I’ve been using the Google Analyticator plugin for years and it’s served me well, but I’ve always wanted to try out Joost’s plugin, because he’s a first rate plugin developer. I’ll take this article as a chance to try it out.

There are a bunch of other WordPress plugins out there that do a similar job, but I can’t create instructions for all of them and these two are the only ones I know of with more than a million downloads each.

Google Analyticator

Edit: Site Speed has now been added to Google Analyticator and is turned on by default. There’s no longer any need to do anything!

It’s incredibably easy to set up the code for Site Speed in the Google Analyticator plugin. Simply do the following:

  1. Go to Settings -> Google Analytics.
  2. Find the “Additional tracking code (after tracker initialization)” and enter the following:
    _gaq.push(['_trackPageLoadTime']);
  3. Click “Update Google Analytics Settings”.

You’re done.

Yoast’s Google Analytics for WordPress

Edit: Site Speed has now been added to Yoast’s Google Analytics for WordPress plugin. It’s turned on by default, although you are able to turn it off if you want to. You don’t need to follow the below instructions. Note the stripslashes bug has also been fixed.

The Google Analytics for WordPress plugin also contains the ability to add a custom method, explained below, although there are a couple of issues with it. The code it creates is as follows:

	
	var _gaq = _gaq || []; 	
	_gaq.push(['_setAccount','UA-2099355-13']);
	_gaq.push([\'_trackPageLoadTime\']);
	_gaq.push(['_trackPageview']); 

The first issue is that it adds the code in a slightly different order from the example Google gives: it’s added before _gaq.push(['_trackPageview']); rather than after it. I don’t think this will cause a problem, but I’ll monitor the results to make sure it works.

The second issue is that slashes have been added to the _gaq.push([\'_trackPageLoadTime\']); code, before the quote marks. This ‘escapes’ the quote marks, meaning that JaveScript will process the command without them, eg: _gaq.push([_trackPageLoadTime]).

I’m not sure, but I believe this will break the code. As a result, I hacked the plugin to strip the slashes.

Note: The slashes are added as a security mechanism. It’s a great idea to add slashes on user generated input (never trust the user). However, it only works well if the input is to be displayed in the browser. If it’s actually going to run as code, you have to strip the slashes out again at display time or the code may not work (you have to trust the user or you may as well not bother letting them input code).

I’m happy to cede authority on WordPress security to Joost, Andrew Nacin, etc and am happy to be corrected on this, but it’s necessary to strip the slashes if it’s code that needs to run.

Edit: I’ve now reported this as a bug. To put this into perspective, anyone who has access to enter code in this field probably has access to the Plugin and Theme Editors, where they can enter code that will be executed as is.

Anyway, here’s how to add the code:

  1. Go to Settings -> Google Analytics.
  2. Click the “Show advanced settings” parameter at the bottom of the first section. Two more sections will be displayed.
  3. In the 3rd section, titled Advanced Settings, find the Custom Code parameter and enter the following:
    _gaq.push(['_trackPageLoadTime']);
  4. Click “Update Google Analytics Settings”.

To hack the plugin to strip the slashes, do the following:

  1. Go to Plugins -> Editor.
  2. Select Google Analytics for WordPress in the “Select plugin to edit” field and click Select.
  3. Important: Make a copy of this file before editing. Do a backup of your site. Make sure you can put things back if it goes wrong.
  4. Search for the following line (about half way down):
    $this->textinput('customcode'),
  5. Change this to:
    stripslashes($this->textinput('customcode')),
  6. Search for the following line (about three quarters of the way down):
    echo "\t".$options['customcode']."\n";
  7. Change this to:
    echo "\t".stripslashes($options['customcode'])."\n";
  8. Click Update file.
  9. If you use a caching plugin (eg W3 Total Cache or WP Super Cache), you need to clear the cache.

You should then check your source code on the site. If it worked, you should see the following:

	var _gaq = _gaq || []; 	
	_gaq.push(['_setAccount','UA-2099355-13']);
	_gaq.push(['_trackPageLoadTime']);
	_gaq.push(['_trackPageview']); 

The slashes have been stripped and it should be ready to go.

What next?

If you use a caching plugin (eg W3 Total Cache or WP Super Cache), you need to clear the cache before the code will start working.

Then, according to Google, you just need to wait for “a few hours” and hopefully you’ll start seeing the page load time information appear in Google Analytics!

Oh, don’t forget to remove this code when the plugin you use adds this feature in future (which I’m sure they will).

11 responses on “How To Add Site Speed For Google Analytics In WordPress

  1. bauhaus

    I added the code as described for the Google Analytics for WordPress method. Now I can’t find the script in the source code anymore… Take a look!

    1. bauhaus

      My bad…! I didn’t realize that the code is hidden when I m logged in. Having said that, I can confirm now that I works. Great job!

  2. Florian Muff

    Hey Stephen
    You made my day. Changing some code into your stripslashes solution was great. Thanks a lot to write a post about your solution.
    Regards
    Florian

  3. Marios Alexandrou

    I’m trying this solution instead… I’ve added this line to the plugin right after line 944

    $push[] = “‘_trackPageLoadTime’”;

    I figure this way my changes will be overwritten by the official plugin update and I won’t have to remember I made the changes. Not to mention that I don’t need to worry about removing custom code in the plugin settings down the road.

    Of course, I don’t actually know the above will work :-)

    Marios

  4. Milan

    I just added this on some of my sites and so far so good, the data is coming in, although now I even more concerned that my sites are too slow. I suspect that in the future Google is going to put more emphasis on site performance because it has such an impact on user experience.

    1. Stephen Cronin Post author

      Hi Ronald,

      Thanks for letting us know and thanks for a great plugin. I’ll update the post to say it’s included in the latest version.

      Cheers,
      Stephen

  5. Roy

    I used your code successfully in the past but note that 2 weeks ago Google made the Site Speed feature available to ALL Google Analytics users by default i.e. you no longer have to modify your code.

    As all Google Analytics accounts now automatically get Site Speed reports, if you had previously added the tracking code script to your site, Google will just ignore it in future and you will continue to get Site Speed reports by default.

    If you haven’t seen these reports before, log into your Analytics account, go to the Content section and click the ‘Site Speed’ report.

  6. polished plaster

    I added the code as described for the Google Analytics for WordPress method. Now I can’t find the script in the source code anymore… Take a look!

    I was having the same problems as Bauhaus about the code for the Google analytics for wordpress, it was really stressing me out so thank you, i just noticed the code is hidden when you log in … Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Anti-Spam Quiz: