March 22, 2016
Ok, so I want to kick this off with a subject that's super, super, important. And if I'm honest, it's becoming more and more important as time goes on.
You see, over the last century communication has become faster and faster.
And as a result, our attention spans are becoming increasingly shorter. Which means in order to communicate "message" effectively, technology really needs to be on our side - not working against us. So if you're a business owner, direct marketer, or sales professional, you'll at the very east understand the concept of why your web pages now need to load at the speed of light.
Yes. Seriously... "The Speed Of Light".
Anything less, and you're probably getting a lot of wastage from the traffic that's hitting your site. Today I want to show you one simple tweak you can make to your websites and landing pages, using Google Tag Manager to increase your page load times, simplify code, and create a central location for managing all your tracking scripts. All without touching any code. Sound good? Cool - let's get into it...
One of the biggest challenges to overcome before your website can load super fast is the use of external tracking scripts. There are other contributing factors, of course, but external tracking scripts can be a nightmare. Typically this can be scripts like:
Basically, pretty much any script you've been given and asked to place on your website for the purposes of functionality. Now, the biggest challenge with these scripts is that you have NO control over them, whatsoever... That is, without the use of Google Tag Manager.
Google Tag Manager gives you the ability to fire off multiple custom tracking scripts based on variables you set, through the use of just one script that you place on your website.
Curious to see how it works?
So the first thing you're going to need to do is create a Google Tag Manager account. It's easy to set up - simply go to tagmanager.google.com, sign in using your google account, and follow the instructions for creating a new account. Once you've set up your container, you should come to a screen that looks like this.
The first thing we're going to do is set up Google Tag Manager to fire our Google Analytics tracking code on every page of the site. Once completed, we'll then remove our originally static Google Analytics code and replace it with our Google Tag Manager script.
Firstly we need to set your Google Universal Analytics tracking ID as a variable. To do this go to Google Analytics > Admin, and then under Property Settings, click on Tracking Info, and then Tracking Code. Copy your Tracking ID to your clipboard. It should be the code that looks like this UA-XXXXXXXX-X. Now jump back over to your GTM container, and from the sidebar click Variables, scroll down, then click New.
Once you've done that you should have something that looks like this:
Now click the Create Variable button, then from your container view click on Tags from the sidebar, then click the New button.
Here's how your set up should look:
Click Create Tag and then click Publish.
GTM works by firing tags based on the criteria we set for each tag. So the smart way to do this is to have a separate tag for each script we want to use, instead of adding each individual script to our website. This way we make GTM do all the heavy lifting, allowing our website to focus on serving up content to our visitors. Starting to see the massive impact this is going to have on the speed of your site?
The impact can be big or small depending on how many scripts you're currently running.
So firstly you're going to want to go and grab your GTM tracking script. You can do this in Google Tag Manager by going to Admin > Install Google Tag Manager. Then follow the instructions.
If you're using Wordpress, you can simply put this in the header.php file that can be found in your Wordpress theme folder.
Next up we want to test to see that the script has been installed successfully, and is firing our Google Analytics tracking script correctly. Fortunately, Google Tag Manager has a built in preview function we can use to do this. Simply go to the GTM container Dashboard, click the Drop Down arrow next to the Publish button, and click Preview.
Now navigate to your website to find the Google Tag Manager debug bar. It should look like this:
As you can see, our Google Analytics script is now firing correctly, and so it's now safe for you to remove the previously static Google Analytics script from your site.
Out of all the tracking scripts your site's using, Google Analytics is probably the least likely script to be causing you problems. So let's now have a go at adding in some of the more problematic scripts using GTM. One that we've seen slow our sites down by as much as 2 seconds is the Adroll tracking script. It's purpose is to track and build an audience we can re-market to at a later date using their partner display network - hugely valuable data, but a real drain on website performance. So how do we do it? Open up your GTM container Dashboard...
Here's how it should look:
Hit Create Tag, then click the Refresh link on the Preview pane to update the debug bar on the website:
Now navigate back to your site and refresh the page. If everything is set up correctly you should now see both Google Analytics AND your custom third party tracking script:
Now that you've confirmed it's working correctly, you can now Publish your container.
Note: Your changes will NOT work on the live site until you Publish the changes, so please remember to do this each time you make an update - Massive school-boy-error!
I recommend you now go and do this with all of your remaining scripts. So let's now look at a comparison...
One thing you should know is that we never recommend you do something that we haven't tested ourselves AND proven results with... So with that being said, let's take a look at the before and after results of one of the sites that the Clickverta team have recently optimised.
Average page load time: 2.8 seconds Not too bad, right? But let's see if we can save any time if we combine those 6 scripts into 1.
Average page load time: 2.2 seconds (21.5% faster) So there you have it. Just by reducing the number of tracking script requests we have already increased the page load time by 21.5%. I'm confident that by compressing images and minifying code this page will be down to around 1.5 seconds which, if you think about it, is a huge improvement (almost 50% faster) without having to ask developers to redo any of the coding.
The truth is, there are a huge amount of benefits to using Google Tag Manager. An increase in page load time is just one of them, but seeing as every millisecond counts, attention spans are shrinking, and Google's algorithm is now using load time as a bigger ranking factor, moving to GTM is something you should have done a long time ago. And if that's not enough to motivate you to make this small but powerful switch to GTM, here's a few more reasons why we love it:
So if you haven't already made the switch to GTM. Do it. And as always, if you found this content useful please share it, and comment below.