The following is a guest post by David Attard. I only recently became aware that Google Tag Manager was a thing, but didn’t know exactly what it was, what it did, or why I might care to use it. Thankfully David stepped up here to explain it, so now we all can understand it. Take it David!
Have you ever been on the receiving end of an “urgent” marketing request to change a Google Analytics or other script on your company’s website? And how many of those times have you had to change, and redo the scripts, time and time again during the campaign.
We’ve got a solution for you. You’re urgent change requests are soon to over.
Hands-up all you who’ve ever experienced one of the following:
We’ve got this marketing campaign coming up, and we really need to get this new, different Google Analytics script on our website. It is different from the one used by corporate, so that we can track specific parts of the websites ourselves.
Or something like:
We’ve just developed a new set of landing pages, which need a custom script, together with a KissMetrics script, and on certain pages we also want to add CrazyEgg.
I know we’ve asked you to add this script, but we’re mid-campaign and we URGENTLY need to optimize this script, before we run out of marketing budget.
If you’re like most web developers working with a digital marketing team, the above or similar situations probably sound familiar. Google Tag Manager is the solution to create a system which works for both web developers and marketing teams. In developer speak, Google Tag Manager is a script which handles the injecting of other scripts into your website, through a friendly interface.
We’ll show how Google Tag Manager can improve the efficiency of both website developers and online marketing teams.
Why do you need Google Tag Manager?
Any company which has an independent marketing team knows how critical digital marketing is to their success. There are no shortage of tools for adjusting, monitoring, improving, analysing marketing campaigns. As the marketing teams react to the new tools which come along in their industry to stay ahead of the curve, you’ll get more and more changes in the website. Various scripts need to be added to the site to incorporate the new tools.
Most development changes will need to go through an approval process. You might have various approvals to move from development, to staging, to pre-production testing. This is before we can go to production. As the size of a company grows, all these moving parts tend to become heavier and take longer to complete. But in a fast and agile world, things shouldn’t take days to complete.
Besides, developers have more important things to do than update marketing scripts.
Google Tag Manager allows users to define and decide what scripts (“tags”) are shown, and under what circumstances, through a UI. This alleviates a lot of pressure mentioned above because:
- The marketing team is under full control of what tags are included under the different conditions.
- The development team won’t need to create custom code, conditions, different versions of tags to handle all different circumstances required by the marketing teams.
That sounds like a bad idea
Allowing the marketing team to tinker with your beautifully coded website may sound like a horribly bad idea. You’re bound to believe that this will wreak all kinds of havoc on your site.
Broken scripts are bound to break functionality. I wouldn’t want to let anybody who is not a member of our development team anywhere near our code.
Or I can hear you say:
What if they change something “by mistake” and need to revert to old code? I’ll have to do this over and over again, until they get it right.
And what about the performance of the site? Adding too many tags will slow down the site’s performance and it will all come back to development team to fix.
These are all valid objections. Yet, Google Tag Manager already handles these concerns. We’ll address them below.
How Google Tag Manager Works
What you’ll need to do as a minimum, is sign up for Google Tag Manager and add the GTM script to the website pages where you want to allow the adding of scripts. My suggestion is to use GTM as your single point of reference.
First you create a container. This is where all the tags will be included. Containers can be for websites, iOS apps, or Android apps. For simplicity’s sake, we’ll keep our examples restricted to websites.
Once you’ve created the container, you’ll get a script which you need to add to your site. This is the only script you’ll need to add. The rest of the “tags” will get added to the site via this tag.
Once you’ve added this tag, you can now start adding your tags to the site.
There are about 20 built-in tags which you can add via the GTM interface. If the product or service you want to add isn’t included, you can add any custom tag. Let’s try Google Analytics as our first tag.
Built-in tags for different services allow for customizations as necessary for that specific service.
If we were adding a different tag, you would see a different set of customizations. Anything which can be customized in the native script can be done via the Google Tag Manager. The following is an example of adding a Google Adwords tag.
Once you’ve configured the tag as you like, you will be able to specify under which circumstances the tag will fire (“fire”, as in, be included/used). You can have different tags fire based on different conditions or different sections of your website. For example, you can have a specific tag for your website’s corporate page, different tags for sales landing pages, and yet again different tags for documentation and support pages. These may even be handled by different teams within the company.
Have you started to appreciate the benefits of using the Google Tag Manager?
Even if you, as a developer, are handling the adding of the scripts, you can appreciate that you don’t have to perform the server-side coding required to fire the tag under different scenarios. It can all be done via the GTM interface.
The amount of conditions available under which the tag can fire is enough to handle all kinds of complex scenarios your teams may demand. Let’s keep it simple for now and fire the Google Analytics tag under in “All Pages”.
We can push the tag to the site now right? You can, but you may choose to put safeguards in place first.
Besides publishing straight away, Google Tag Manager allows you to:
- Preview and debug – this checks the tag and scripts to verify that the scripts are error-free.
- Create version – as the scripts are prone to multiple iterations, some of may which may need to be reverted, you can create a version of the current tag. In this way, if anything goes haywire, you can revert to a previous working version. This can prevent lots of headaches, broken sites, panicked administrators, and many frustrated people.
There is also a preview feature that allows you to preview what the current set of tags will look like on your current site. By visiting the site where the tag will be deployed from the same browser where you are performing the Google Tag Manager changes, you’ll see a preview of what the deployed script will look like.
Share Preview also allows you to send a URL which will actually contain the same preview, so that you can share with your peers for approval.
Once you’re happy with the changes, you can Publish your new tag to the live site.
That’s it! Your first Tag will now be pushed to your container (website, in our case).
Advanced Usage of Google Tag Manager
The benefits of using this approach rather than messing directly with the code every time should be evident from the example above.
But let’s dig a little bit deeper.
Whilst creating the example above, we showed for a moment that you can use triggers to decide when the script should fire or not. Some of our scripts probably need to be shown on every page, but probably not all of them. Dumping all of them on every page might cause a performance issue.
Quick Aside: We’ve seen examples of scripts which are up to 500KB in size, which is overwhelming. We won’t name and shame you – even though you’re a big company who should know better. If you are in the industry of creating scripts, you’ll be doing everybody a favour if you keep them lean and mean. Hint: Don’t include all of your functionality in the script whether I’ve enabled it or not.
Using Triggers to fire scripts
Let’s say you want to trigger a specific event, include a tracking pixel, or show a customer survey to visitors who have converted. Let’s assume that at the end of your sales process, you send your customers to a Thank You page. While setting the trigger, we can choose what fires the trigger (and hence the loading of the script).
Let’s create a Google Customer Survey, enter our site ID, and then choose “Some Pages” instead of the “All pages” trigger. Once we do this, we are presented with a “Choose Pages” UI, which allows us to define the trigger conditions.
We’re going to use a Regex to match the URL of our Thank You page, but there are plenty of other conditions you can use. Note that besides a Regex you can also choose to use CSS Selectors. Check out the full documentation of the Google Tag Manager triggers.
As you can see, our tag will now only get populated when a Thank You page is being displayed. You can go much more specific than pages. The below are the possibilities you can use in terms of triggers
- Clicks – this allows you to fire a tag when the user clicks a link or an element of the page
- Form Submission – this will fire the tag when your visitor has chosen to submit a form
- History Change – when the URL changes, or when you need to track a virtual pageview such as when firing tags in Ajax applications
- Timer – allow you to send events based on specific time interval to achieve a desired frequency
- Custom Events – you can use the GTM data layer to raise an event programmatically
Using Google Tag Manager Variables
As with any service which touts itself on being flexible and customizable, GTM supports the use of variables. As per normal code variables, this is simply a value which is populated or defined at runtime.
In tags, you can use variables to define things like transactional codes. Anything from the ID of the product being bought, to the username, email or other user data. We’ll give a quick example of how to use transactional data as a variable in a real-world scenario.
Variables can also be used in triggers, say to define the page URL under which to fire a page view trigger event. Say, we’re trying to grow sales by having a promotional offer for those who spend more than $100. For customers who’ve already spent $100, shipping on their next order will be free.
When the page loads, the GTM variable will evaluate and execute. It will match the trigger only if the transaction amount is greater than $100, and at that point inject your Remarketing tag.
This is only one scenario where variables and triggers can be used creatively. We’ll leave it up to you to apply this thinking to your company’s needs.
In this post, we’ve tried to highlight a number of uses of Google Tag Manager. There are, in my opinion, significant advantages to using GTM.
We’ve seen that it is difficult for a user to “break” the functionality of the site when introducing new tags. The preview and debug functions will highlight any potential problems before they go live. Even if problem scripts go live, it’s easy to revert to previous versions.
Although performance might be a potential concern, we do believe that if the digital team is assisted by a developer, triggers can be used to ensure the performance hit is only taken where necessary. After all, some scripts are necessary!
Recently just tried this out. Couple things to be wary of before jumping in:
You have to redo all of your event tracking. If you have a bunch of click handlers with
ga('send', 'event', 'category', 'action', 'label')you’re going to have to reimplement them within GTM.
Google Content Experiments aka Google Analytics built in A/B testing does not work with GTM.
Anybody have any better experiences with either?
You can use these advanced features of Google analytics, you just need to update your GA to use Universal Analytics. Once you have done that, it is much easier to set up events using the datalayer.
So that’s what Google Tag Manager is. My company uses something similar, called UberTags.
I’ve only recently heard of GTM and wanted to dig into it. This post came at a good time and gives a good explanation. Thanks!
Hey Vinay, glad you found the post useful and with great timing!
I work with GTM every day, and I find it to have more and more issues.
The built-in Triggers work fine for “classic” Websites that use Links, Forms and all that “not fancy pre-HTML5” stuff as marketing people like to call it, but not for Single-Page apps etc.
Every container previously curated by non-devs that I encountered so far was a huge mess
If you need anything more than just Pageviews, Social Media Clicks etc. you need a developer
It kills Pagespeed
The GTM web app and especially the Preview mode are the main reason I don’t do Angular; the UI is extremely sluggish if the container has a lot of tags (>= 75) which surprisingly often is the case
It is missing reasonable version control which makes collaboration and/or working on multiple things extremely painful
It is a great tool though if you don’t care about latency too much, the majority of people in your team don’t have a tech background and your containers do not get too big and you do not have to work on more than one thing at the same time.
thanks for your comments.
MOST scripts still have issues working with single-page apps. They’re quite a new paradigm and most things needs to settle in, and adapt to work with Single page apps.
Of course it’s not going to be everybody’s cup of tea, if you find that it does not work well for you, then of course there’s plenty of other ways to work :)
I don’t really see the advantages to using this. Seems I have all the functionality I need now using standard analytics, event tracking and setting up goals and thank you pages for form submissions. Sure it may have more functionality, but will I ever actually use it?
It’s not really about extending the functionality of Google Analytics Michael – that’s really not the point of GTM. Google Analytics was only used as an example of things you can do with it.
I think this concept is pretty neat. But I would only use it if there was an open source version that I could install on my own servers.
There are too many tracking and privacy violation issues with using a Google service in this way to count. Also, wouldn’t this open up all kinds of potential XSS attack vectors?
Last, I personally will never use a Google system API that my sites require to function. I specifically design all 3rd party integrations to be replaceable at the drop of hat. (ie, Analytics, maps, forms, etc…) And Google has a terrible track record of supporting systems like this indefinitely. (do I need to list them?) And I’ve seen waay to many people bitten by Google cancelling services that are not profitable. (fool me once…)
I don’t like being a party-pooper. I like having 3rd systems that improve my clients website experiences, and I use a lot of them. But Google services automatically have tracking & data collections drama, and short term support/life written all over them.
This is a cool concept though, and I hope it gets copied and more services/open source options pop up in the future.
And after you’ve seen the light about tag management systems, you really need to check out Adobe’s Dynamic Tag Management (DTM) solution. It’s significantly more powerful than GTM. :)
I am new to Google Tag Manager. Craving to explore more about it I landed up here and found significant yet comprehensive information about it. Everything is well explained and would definitely like to dig into it soon.
Thanks for your kind comments.
Nice article. Setting GTM up was one of the best things I did at my job. It saved me a lot of time when running campaigns.
My marketing use case, in a nutshell: company doesn’t have a CMS-backed site, so changing/setting up new pages meant going through engineering, which took time. GTM allowed me to run quicker, more dynamic campaigns.
I basically asked them to set up an empty div, with some styling, on a landing page for me. Then, using GTM, I grabbed the URL utm parameters as a variable and did a switch case on it, injecting different text on that div accordingly. Now, for example, if I create a different ad variation with utm_term=retail, I can quickly inject a retail-oriented text there and increase my chances of my messaging resonating. I don’t need to increase the engineers backlog anymore for quick tests and changes like this, which is awesome.
I wrote about this in more depth here:
Btw, I referenced this article there. I hope that’s ok.
really glad you stopped by with a real-world example and use case. That’s a great creative use of GTM and can go to show that with some imagination and hacking you can do quite some fancy stuff whilst going around limitations which are imposed within the ‘bureaucracy’ of a larger company.
That’s fine, your article is good for those who can look at your example in further detail, and of course the link to the article is welcome!
Just added 0.0.0.0 http://www.googletagmanager.com to my hosts file
Without the http:// of course. The comment widget added that part.
Care to elaborate why?