Top Lines

Setting up Google Tag Manager, Tracking Events and adding HTML for Third Party Services

by Dave Reeder , 27 September 2019

Dave Reeder
Setting up Google Tag Manager, Tracking Events and adding HTML for Third Party Services
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 is Google Tag Manager?

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:

Google Tag Manager

Why Use Google Tag Manager?

If you run a large website, or even a small one you can benefit by adding Tag Manager.  You may have added Analytics Events in the past by adding javascript code to your anchor tags like this:

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.

Adding the Tag Manager code to your website

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:

GTM ID

This will then reveal the code to add to the site:

GTM Code

Adding Google Analytics to Tag Manager

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:

GA Tracking, by adding a variable

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:

Google Analytics Tag

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:

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

Adding Events on links and buttons

Image you want to track how many times some clicks the social share liks 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:

Event tracking

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:

Trigger Event

Adding HTML code for third party services

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:

Custom HTML

Testing your changes

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:

Preview

Once you click Preview, Tag Manager will show an orange note saying you are in Previewing the Workspace:

Previewing 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:

Tags Firing

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:

Tags not firing

We can test those tags by clicking a link such as a blog share link and they will then show that it is firing:

Clicking and firing a tag

When you are happy, click "Leave Preview Mode" and it is time to Submit your Workspace changes:

Leave Preview Mode

Setting your changes live

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:

Submit Workspace

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:

Submit Tag Manager Changes

Conclusion

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.

Join the Discussion...


Back to Blog

Get Important News & Offers

Enter your email to receive monthly news and special offers from Made Simple Media:

You can unsubscribe at any time, please read our privacy policy for more information.

Get a FREE Quote...

Contact our friendly team for a FREE no-obligation quote...

Call now on 0800 111 4504

Stay Informed...

Enter your email address to receive occassional emails with special offers, relevant news and useful tips:

Please note, we never share your data with any third party and you can unsubscribe from emails at any time and request that your data is deleted.