How To Quickly & Easily Make Advanced Tags in Google Tag Manager on Your Website

A lot of people use Google Analytics (GA) for their website analytics (visitor numbers, traffic, and demographics, for example) but I love to combine this with Google Tag Manager (GTM) to really make the data on your site useful.

Recently, I wrote an article on it’s use for Facebook here but I want to dive into some other really cool features today.

If you’re a veteran of website analytics you’ll probably already know that GTM takes ‘triggers’ and makes them trackable on your site — these triggers can be anything from button clicks, to hovering over areas, to even scrolling. Far beyond this, GTM can also help you inject code into the site, and even customise your landing pages based on campaigns and who is viewing the site.

Let’s take a look at the five best things that GTM can do (and you should be using):

1. Button Click Event Tracking (Basic)

If you’re not using a CRM like HubSpot, which can do this for you, you’re going to want to track when people click on your calls-to-action or CTAs to understand what percentage of visitors to your site carry out a valuable action. If you’re an ecommerce site this might be ‘checkout’ buttons but if you have a simple blog this could just be ‘contact me’ button clicks instead. You get to define what’s important.

And if you’re site or blog simply won’t do this, Google Tag Manager is here for you!

First we’ll start out with the super-basic GTM tag, which will be for when anyone on any page clicks on any button.

All you need to do is follow these instructions. You should end up with something like this. In our CTA Click trigger all we’re saying is to track clicks of buttons that contain a certain class (mine is ‘btn’ but you need to check yours).

Screenshot 2019-04-03 17.02.19.png
Screenshot 2019-04-03 17.03.29.png

Once you’re done you’re going to want to preview the effect before you submit. By hitting ‘preview’ in GTM and opening a new tab to your site a GTM interface will load at the bottom of the screen showing you what it is tracking. If you then open Google Analytics in yet another tab, and look at Real time -> Events you’ll be able to see whether you are tracking button clicks.

Once you’re happy, submit the change.

2. (Optional) Extra Step: Triggers for Specific CTAs

So we have this tag that fires whenever anyone clicks on any button, and that’s great but we can get more detailed than that. We’ll want to get more detailed than that so you can track your checkout buttons, for example!

Taking this to the next level is still pretty simple. All you need to do is make a new trigger like the last trigger, but call this your specific button e.g. “Checkout Button Clicks’.

Next, you’ll want to define what makes this unique. For a lot of people it might be the specific page the button is on, so we can limit it to a page url thusly:

Screenshot 2019-04-03 17.05.53.png

Obviously, if your checkout is on the page “/checkout” use that to distinguish your CTA.

If the button isn’t one a specific page, right click on the site and hit ‘inspect’. We’re going to take a look at the CSS and something called the ‘class’. The ‘class’ of any element in a website can be used as an identifier. Depending on how your site was built, you might have the class ‘button-3’ or ‘button’ or ‘CTA-4’ for the button you’re inspecting.

Take a look around at other CTAs, if this class seems to be unique to the type of button you’re looking at we can use it in GTM as an identifier! Smart, huh?

If not, we can use the Click URL as the identifier instead like this:

Screenshot+2019-04-03+17.08.00.jpg

So, you can distinguish buttons by where they point to as well!

Ultimately, finding out what makes the CTA you want to specifically track unique is going to take some time and work. Only you know what makes it easy to identify (whether that’s the Page Url, Click URL, or so on) but once you’ve got this the setup is basically the same as the more general button click tracking.

3. Injecting Code And Installing Apps (Basic)

Next, onto installing things into your site for better tracking!

Ideally, you’ll just add code to your website as required but sometimes you don’t have access to the site for whatever reason and certain apps need you to add information — for example, to install a Facebook Pixel and track people from your Facebook page and campaigns you’ll need to add a bit of code to your site. Facebook have actually made it super simple to use GTM to do this in Business Manager when setting up a Pixel.

Facebook Pixels are a gateway to some incredibly powerful omni-channel analytics on Facebook called Event Source Groups, which I wrote about here, so I would 100% recommend installing one. I wrote in more depth about how to install this and chat plugins, as well as some super cool other features you can use for Facebook integrations on GTM here (SME link) so take a look if you want to learn more.

To cover the basics here, though, just click on the Google Tag Manager integration when setting up a Pixel in Facebook, sign in to your account, and let Facebook do the work.

So, now your code is installed, your Pixel works, all without you doing much of anything! You can also do this with apps like Hotjar (which heat-maps visitors).

4. Installing Facebook Messenger App (Intermediate)

Live chat windows increase conversions on sites, so having a chat on your site can be really useful if you’re willing and able to provide customer support. Some businesses struggle with traditional chat apps — it’s just another thing to login to on top of everything else — and so using something like Facebook can be a real boon. Most of us already know how to use Facebook, and we’re logged in, so answering questions about your business can take two seconds.

Once you’re decided on Facebook Messenger Plugins for your site you might think the next step is to pay somebody a lot of money to implement this — it can be, but if you’re got no budget and a little time it doesn’t need to be. You guessed it: GTM can install this for you!

All you need is a little more understanding of how Google Tag Manager works and we can get this done for you. First you need to go to your Facebook Page, then to the Settings, then to Messenger Platform. Now hit set-up on the Customer Chat Plugin.

Follow the instructions. When you’re given an embed code, this is where we need to divert from the instructions. The embed code won’t work in Google Tag Manager. It’s html code and you need Script. But, wait! There’s a relatively easy fix!

  1. If you’re feeling lazy or overwhelmed 😱 just use something like Rocketbots to do this for you. Their free package is 1000 messages a month, which I think is really great for smaller businesses and those starting out.

  2. If you’re a superhero, convert the code yourself. Here are some instructions.

Once you have the code, paste it into a Custom HTML tag in GTM, with a trigger of views all pages and WHAM you’re done! Remember to check your pixel is working in Facebook Business Manager before popping the champagne.

5. Customising Website Pages (Advanced)

Again, some websites like HubSpot and Wordpress cans do this for you but if you’re struggling within the confines of your website CMS or just want more control you can do this as well. This is especially useful if you have audiences in different areas of the world who fall into different buyer personas for you.

Personalising a landing page on your site can boost conversions by up to 30% (LINK) so it’s not to be sniffed at. Sure, this is a more advanced use of GTM and if you’re not comfortable there are services that will do this for you. But if you or your boss are looking to save money this method is 100% free! Everyone loves free things!!


Personalised website page Instructions

Okay, so first to do this you’ll need to uniquely identify website visitors — you don’t need to know their names but you do need to give them random ID numbers so GTM and GA know they are visitors. The old way to do this would be to install a cookie 🍪 but we’re totally hip new-age digital wizards here so we’re not going to do that.

Instead, we’re going to use Web Storage API. This sounds hard but it’s sure simple:

  1. Login to Google Tag Manager

  2. Create a new Tag (HTML) called ‘UUID to Data Layer’ or whatever you want provided you know this is the unique identifier number generator wizard.

  3. Copy and paste in this code (thanks Johanne!)

  4. Define a trigger for this code. The trigger is just going to be page view on all pages. Simple!

  5. Preview this tag etc etc. Make sure it works.

  6. Change the code, to the final code here. Johanne has split the IDs into A/B groups. Next you also need to create the variable ‘splitGroup’ in our dataLayer — just go to “Variables” and add a new DataLayer Variable with the name “splitGroup”:

  7. Preview this to check it, then submit.

So, you may have forgotten why we’re doing this. We’re going to personalise your website for people! Now we we have an A/B group set up so you can prove your personalisations work.

Before we go on — if this is too hard Johanne has made a container in GTM you can just download here. I’d still suggest knowing how it works but that might save you a tonne of time.

If you’re still with me what we need to do is head on over to Google Analytics and setup some custom dimensions. Go to ‘Admin’ and find the ‘Custom Definitions’ section under the property menu. Now hit ‘add new dimension’. You need two: SplitGroup and UUID. Write down the Index ID you see once you’ve done this. You’ll need it!

Now back to Google Tag Manager, go into ‘Google Analytics Setting Variable’ and hit edit. Select ‘More Settings’ and add those two dimensions: SplitGroup and UUID.

Now we’re ready to personalise the website

There are a million and one ways you could personalise a website but let’s focus on one: showing a different homepage to users based on their initial landing page.

For this we need three things:

  1. Intent categories mapped to landing pages

  2. Capturing the intent of a visitor based on that landing page and saving it in localStorage for later

  3. Then chance the homepage hero image and text for that visitor

So in plain english we are

  1. Working out what people are looking for based on the first page they landed on

  2. Saving that information

  3. Using that information to change the homepage

So, if the first page I click on is a menu for a restaurant on TripAdvisor when I head to the homepage TripAdvisor then shows me other restaurants I might like (this is a little more complex but you get the idea) 🤓 🤓 🤓 

Again, I cannot recommend Johanne’s instructions enough for this but to paraphrase:

  • First identify your user intents. Let’s say you have three strands of topics on your site: food, travel, lifestyle. Those three topics can be intents.

  • Map these to page url structures. This can be very simply if all your pages fall under a category slug e.g. www.example.com/food/blog-post-here. Not to fear if they don’t! Just use RegEx (Regular Expressions) in GTM to identify what makes all your urls similar. Or, if there are only a few, literally just map the exact urls. Very simple.

  • You’ll need a bit of code to create the variable {{LandingPage}}. Again go here for that.

  • Next personalise your pages using JQuery. Note: this is the most complex part. Up until now we’ve not actively changed anything on the site, but rather just set up listening devices. This step will change things on the website so use caution!

    • First pick what you want to change. The easiest way to do this is to ‘inspect’ an element in Chrome or your browser of choice (not IE, but who uses IE?) and hit ‘copy selector’

    • Now we insert this ‘selector’ into some JQuery that basically says ‘take THIS THING and make it THAT THING’

    • To do this we make tag in Google Tag Manager that is script with JQuery and our selector. The code basically says ‘If intent is WHATEVER WE DEFINED EARLIER replace THIS THING with THAT THING’

That’s it! The sky is the limit with this. You could create intent based popups or change pages based on Ad campaigns you’re running to really hone your site.

Key Basics

Wooooweee. You’re exhausted, I bet. I’m exhausted too but there are a few things I always like to talk about when setting people up with GTM so they don’t get stuck. Here they are:

  • Don’t install both GA and GTM ID codes on your site. If you’re using GTM, to push to GA, just use the GTM ID. If you use both you’ll find the data duplicates itself and throws everything out of whack!

  • The preview button in GTM is so handy! Don’t ignore it. When you hit ‘preview’ if you open up your site GTM will display what it’s tracking and doing in a dialogue box at the bottom of the screen so you can test triggers and tags and understand if things are working.

  • If you’re unsure what to select as ‘Non-Interaction Hit’ in the triggers in GTM, just leave them as true. Clicking on false will cause a skyrocketing bounce rate in some cases. In general, things like form completes, purchases, and newsletter signups can be false or that is to say true Interaction Hits. A false non-Interaction hit (or true interaction hit) tells Google Analytics that an event is equivalent in importance to a page view. Hence it influences bounce rates. If you’re confused, the best practice is to leave them as true where they can’t influence bounce rate.

Do you use Google Tag Manager as part of your analytics?