You've probably heard of Google Analytics and may be using it already. But have you heard of Google Tag Manager? Tag Manager gives you a huge amount of flexibility to measure events and add custom code to your pages without needing your Developer to do it for you. Here's some cool stuff you can do with Tag Manager...
What's in this article?
Google Tag Manager is a service that aims to give non-developers the flexibility to set up advanced analytics and tracking on their site, including the ability to add code snippets from other services like Google Analytics, Facebook Pixel, Tawk.to or any other service that requires you to add HTML to your web page.
Tag Manager has a steep learning curve at first due to it's complex and flexible nature, which is why I wanted to write this beginners article.
Below is the Tag Manager interface:
onclick="ga('send', 'event', 'Button', 'Click', 'Purchase Details');"
This will get the job done, but if you wanted to manage a lot of events it soon becomes a pain to keep editing the code in the site, even if you have access to the HTML. Also you may want to fire that event on multiple links that have a class and inline js like that is not ideal for many reasons.
In this article we'll show you how to do this with Tag Manager and then you can decide whether to take the plunge or not based on your requirements.
You'll need a Google Account to login and add your website. Go to Tag Manager and create add your account here: https://tagmanager.google.com
To get your websites' Tag Manager code, click on the Google Tag Manager ID for your website at the top of the Tag Manager Screen:
This will then reveal the code to add to the site:
In order to add Google Analytics we first define a custom variable, under "Variables" in the left hand navigation. Then, under "User-Defined Variables", click New.
Then add your Google Analytics Tracking ID as the variable name and under Variable Type, select "Google Analytics settings" and enter your Tracking ID:
You can then press Save.
The next thing to do is trigger that variable, so it activates every time someone visits a page. So we need to add a new "Tag", which can be done by clicking Tags in the left menu.
You can then click new, to add a new Tag. Give it a descriptive name and choose "Google Analytics: Universal Analytics" under the "Tag Type".
Then choose the Track Type to be Pageview and add choose your tracking ID from the dropdown. If it's not there, you didn't set the user defined variable correctly:
But a Tag needs a Trigger to fire. So the next thing to do is click to add a Trigger below this and choose "All Pages Pageview" trigger:
If you don't have that trigger added, you will need to go to Triggers on the left and click "New" to add it.
Imagine you want to track how many times someone clicks the social share links in your blog.
You could create a Tag called "Blog Share". You would choose to use your Universal Analytics under the Tag Type and choose Event under Track Type. You then complete the usual event tracking parameters and choose your GA Property:
For the trigger, we can add a "Click - All Elements" Trigger Type and then refine it by matching just links with certain classes or an element ID:
You can also add tags with custom HTML for third party services such as Facebook pixel, Smartlook, Leadforensics etc. This is really easy, no need to ask a developer!
Simply trigger it on Page View so it works everytime someone loads a page on your site:
Tag Manager has a great preview mode which allows you to check if your tags are firing when they should. To enter Preview mode, click the Preview button top right:
Once you click Preview, Tag Manager will show an orange note saying you are in Previewing the Workspace:
Now all you need to do is open another browser tab and go to your website. You'll notice when you do, there is a panel down the bottom that says "Tag Manager" on it. Within the panel, we can see that our Facebook PIxel is firing, as is our Google Analytics on page view and also Smart Look, which records visitors and our Website Calls tag:
We can also see that some of our Tags are not firing, e.g. Blog Share and mailTo Click. This is correct because Blog share only fires when someone clicks on a share link on a blog post. Also the mailTo click only fires when someone clicks on an email link to contact us:
We can test those tags by clicking a link such as a blog share link and they will then show that it is firing:
When you are happy, click "Leave Preview Mode" and it is time to Submit your Workspace changes:
If you are happy with your preview you can set your changes live by "Publishing your Workspace". To do this click on "Submit" top right:
You are then asked for a Version Name and Description to detail what changes you made. Complete these fields and click Publish to put the changes live:
Google Tag manager takes a bit of getting used to with triggers, tags, variables etc but it's be worth it if you want to really delve into it's features and get powerful functionality without touching your websites' code all the time.
This is just a basic introduction to Tag Manager, there is far more you can do with it. Hopefully it helps to get you started and you find it useful.
We are a digital agency specialising in Web Design, Development, Concrete5 and digital marketing, based in London & West Sussex.
We make digital simple. Our purpose is to simplify your frustrations in digital and solve the challenges you face to help make you more money and progressively grow your business or organisation.Tell me more
Keep up to date
June special offer...
FREE hosting in year one
We'll give you FREE hosting when you buy a website from us. The hosting includes full 24x7 UK support, FREE SSL cert, FREE domain, daily backups and is optimised for high levels of speed and security. Worth up to £480 a year!Tell me more