Get Proposal

Learn How Google Tag Manager Can Help You Improve Website Conversions

March 22, 2016

google tag manager

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

Why Google Tag Manager?

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:

  • Google Analytics
  • CRM Behaviour Tracking (Infusionsoft, Ontraport, ActiveCampaign etc)
  • Conversion Rate Optimisation (VWO, Optimizely, KISSmetrics, CrazyEgg, Hotjar etc)
  • Remarketing (Facebook, Adwords, Perfect Audience, Adroll etc)
  • Lead Capture Plugins (LeadPages, Unbounce etc)

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?

Here's How To Do It...

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.

how-to-set-up-google-tag-manager.jpg

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.

Google Analytics

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.

  • Name your variable Tracking ID
  • Select Constant
  • Paste your Google Analytics Tracking ID in the box

Once you've done that you should have something that looks like this:

create-a-variable-in-google-tag-manager.jpg

Now click the Create Variable button, then from your container view click on Tags from the sidebar, then click the New button.

  • Name the tag Google Analytics
  • Select Universal Analytics (you really shouldn't be using "Classic" anymore)
  • Configure Tag by setting it to your Tracking ID variable
  • Set Track Type to Page View
  • Set Fire On to All Pages

Here's how your set up should look:

set-up-google-analtics-page-view-in-google-tag-manager.jpg

Click Create Tag and then click Publish.

remember-to-pubish-gtm-container.jpg

Now Let's Replace Our Tracking Scripts with GTM

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.

Adding The GTM Tracking Script To Your Site

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.

install-the-google-tag-manager-script.jpg

If you're using Wordpress, you can simply put this in the header.php file that can be found in your Wordpress theme folder.

placing-your-gtm-tracking-script-1024x256.jpg

Use GTM Preview Mode To Debug and Test

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.

preview-changes-in-gtm.jpg

Now navigate to your website to find the Google Tag Manager debug bar.  It should look like this:

using-the-google-tag-manager-debug-bar.jpg

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.

Set Up Custom Third Party Tracking Scripts

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

  • From the sidebar select Tags
  • Click New
  • Name the tag Adroll (or whatever the name of your script is)
  • Select Custom HTML
  • Copy & Paste your tracking script into the text area
  • Select Fire On All Pages

Here's how it should look:

adroll-tracking-script-with-google-tag-manager.jpg

Hit Create Tag, then click the Refresh link on the Preview pane to update the debug bar on the website:

refreshing-the-preview-bar-in-gtm.jpg

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:

debug-bar-for-google-tag-manager.jpg

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

Comparing Performance

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.

Before (approx. 72 lines of code)

Scripts include:

  • Google Analytics
  • Woopra
  • Facebook Audience
  • Improvely
  • Inspectlet
  • VWO

improving-page-load-time-1-1024x255.jpg

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.

After (just Google Tag Manager)

improving-page-load-time-2-1024x255.jpg

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.

Conclusion

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:

  • Central location for creating and managing all events (form submissions, link clicks, reporting errors etc) - perfect for managing goal tracking in Google Analytics.
  • I can manage all my tracking scripts in one location without even having to touch my website.
  • The use of Container Versions means that if ever there's a bug, we can just roll back to a previous version - this is huge if you work in a team.

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.