When doing user research for Big Picture, I found that there was a lot of confusion over when to use Google Analytics (GA) vs Google Tag Manager (GTM).
At this stage, I have spent a ton of time working with both tools, so it's fair to say that I'm qualified to answer this question.
First some background...
What is Google Analytics (GA)?
GA has been around since 2005 and is the most widely used analytics tool on the market. It helps you collect, process, and analyze website data.
Some things GA can do:
- Measure where traffic is coming from
- Analyze the impact from an ad campaign
- Track onsite user behavior (page views, time on page, button clicks, etc.)
What is Google Tag Manager (GTM)?
GTM was launched in 2012 and is a user-friendly tool for managing website tags without having to go into your raw website code.
Basically, tags are bits of HTML that are added to your website at runtime (when the website loads). Most of the time these bits of HTML are JavaScript snippets that add functionality to your site or send data to 3rd parties.
Okay, but what does that mean? Let's look at some examples:
Example 1
Google Analytics is itself a tag. To install GA on your website you can:
1) Copy and paste the official GA code into your website HTML. Here's an example:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', YOUR_TRACKING_ID_HERE, 'auto');
ga('send', 'pageview');
</script>
2) Or you simply create a GA tag in GTM (after you've installed GTM on your site):
As you can see, working with GTM is a bit easier since you have a nice UI. Basically all you need to do is activate GA, add your Tracking ID, and click the publish button. Then GA will be added to your site and will start collecting data.
Example 2
Now let's say we've added GA to the page, and we now want to track when a user downloads a file. Before GTM, the primary way to do this is to add some tracking code to your website to listen for when the user clicks the button to download the file, then send an event to GA.
Here's what that may look like:
<script>
$('#download-button').click(function(e) {
window.ga('send', 'event', 'File Download', 'Download', 'E-book')
})
</script>
Assuming you have jQuery installed
This is a bit easier in GTM. First you set the GA tracking parameters, then create a "trigger". We want to track the download button click, so the trigger in this case will be the click.
This screenshot simplifies a few things, but that's more or less how to track a click with GTM.
To summarize GTM vs GA
GTM is for managing tags. GA is itself a tag and is used for tracking website analytics. They are simply different tools for different jobs.
Now what are some of the pros and cons of using GTM?
Some benefits of GTM
GTM was designed to circumvent a lot of the problems with website development. Here are a few benefits and use cases.
1) Managing tags without a developer
For some teams, adding tags to their website is not an easy process. Going through a ton of code to add a new tag and deploying changes is just not feasible for non-technical people. Then waiting for a developer can take weeks if there are other high priority issues.
GTM enables you to easily manage tags and deploy them immediately, all via a simple UI.
2) Avoiding the long release cycle
The other issue is that many organizations have a long release cycle. As in the website / app changes go out in batches that are only released every X weeks.
I witnessed this firsthand while working as an engineer at Intuit. Our release cycle was once a month, so if you missed the deadline you had to wait until the next release.
With GTM you can make the change immediately. No waiting for the next release.
3) Debug options
Making sure that your tags work BEFORE you deploy them to your live site is really important. GTM has a built-in debug feature which allows you to test and debug each update in your browser on your site before publishing the changes.
Some things that are still challenging
Yes, GTM is awesome, but it has some shortcomings to be aware of.
1) Learning GTM's design patterns takes some time
There are a few concepts specific to GTM that take a minute to understand - tag firing, triggers, variables, the dataLayer, etc. Then there are a number other aspects that are geared towards a more technical crowd - DOM elements, page referrer / hostname, regex matching just to name a few.
Basically, if you are a non-technical user you will find that there is a bit of a learning curve.
2) Tracking elements (buttons, forms, etc) still takes a bit of work
With GTM you can listen to clicks from a particular button, but you still have to manually identify the CSS path of the button. This is more or less the unique identifier of the element on the page.
So in the case of our download button above, we first have to figure out that the element has the id "download-button" in order to tell GTM to track it. This can be a bit tricky for non-technical users, and even trickier if the element doesn't have an identifier like an id or class.
3) You will still have to code some things
While GTM has a decent integration with GA, it's not the same for other analytics tools. For example, Mixpanel is very popular for event tracking as they do a great job with funnel analysis.
First to install Mixpanel in GTM, you will have to create a custom HTML tag since it is not listed as an option of available tools. Next, you'll have to copy and paste the Mixpanel snippet. Here's an example of what that looks like:
Then after installing the tag, if you want to track anything (button clicks, page views, form submissions) you will have to create a new tag, use the Mixpanel API, and add some code.
Here's an example of tracking a button click:
<script>
$('#download-button').click(function(e) {
window.mixpanel.track('E-Book Download', { properties })
})
</script>
My point is that GTM makes it really easy to add new tags, but to actually do things with those tags may still require some code.
What's next?
GTM is an awesome tool, but I feel that it still doesn't truly solve the problem of fully enabling non-technical people to do their work without an engineer. Much of the time you will still have to add some code.
So that's where we are trying to make things easier. Our goal is to make things as simple as possible by being truly codeless.
