Google Tag Manager (also known by its acronym GTM) is a free tag management system created by Google that manages JavaScript and HTML Tags.
GTM first appeared in October 2012 and continues to evolve to meet the needs of marketers.
GTM allows marketers to create and monitor tags on a user-friendly interface, without the need to write code.
The most significant benefit of GTM is being able to have full control over monitoring and measuring data and reducing the possibility of human error.
Some of the benefits of GTM:
- Less developer dependency
- Ease of operation through an intuitive GTM interface
- Debugging and the ability to test tags before posting them on the site
- Version control to track changes through a GTM account
- User management that allows more natural control of users who have access to the tool (defining the level of their access)
- GTM makes sure your Google Analytics code is always up-to-date (no need to manually update the code when Google makes changes)
- Ability to collect additional data (e.g. number of downloaded PDF documents, clicks on links, views of YouTube video content on the site, interactions on the contact form, clicks on CTA buttons, etc.)
“The Google Tag Manager container snippet is a small piece of JavaScript and non-JavaScript code that you paste into your pages. It enables Tag Manager to fire tags by inserting Google Tag Manager.js into the page (or through the use of an iframe when JavaScript isn’t available).” See Google
Table of Contents
Google Tags
First, let’s explain what are Google Tags, so that you can easily understand what GTM can be used for.
What is the essential thing in managing a business?
Data.
Your business and all businesses depend on accurate and measurable data.
In order to get accurate data, you need a method to collect this data – Google Tags.
The function is to capture the data you choose and send it via GTM to Google Analytics, Google Ads, Facebook Pixel, and other third-party software.
Tags are snippets of website codes, and usually, they are JavaScript snippet codes.
Tags are your best friend in optimizing businesses.
They help you measure traffic, track visitor behaviour, track different kinds of clicks – button clicks, call clicks, pdf clicks, form submissions, sales on your shops, with them you can even track some not so often actions like copy and paste of text, or opening incognito tabs, turning off cookies, etc.
These little code snippets send information you want to track to your third-party software.
Manually coding all of this is difficult and time-consuming and can slow down a website with all the javascript code.
GTM makes this process easier.
All you need to do is embed code into your site pages once, and then each time you want to create a tag, GTM codes it and inserts it for you.
Your site will run faster, it will not compromise data collection, the tags are risk-free, and you will get all the data without lethargy.
Identifying what you want to measure
Before even starting to work with GTM, you will need to build a list of what you want to measure on your website.
For example, the data you want to track on your website could be:
- Clicks on different buttons
- Clicks on the phone number
- Clicks on the WhatsApp button
- Thank you page (after an order)
- Add to cart buttons
- Remove from cart buttons/links
- Checkout process / funnel
- PDF downloads
- YouTube video watched
- Scroll Depth
So, the first step is to define actions that users will do on your website.
Actions that have value for you and the business, and then start deploying those tags.
Components of Google Tag Manager
But how does GTM work?
It is very simple.
You implement GTM on your website and connect Google Analytics (we show you how to do this shortly).
Next is up to your users.
Visitors come to the website; they do some actions there – read text, scroll down the text, visit pages, click on buttons, shop etc.
When that happens, GTM sends this data via tags and triggers to GA, Facebook or other third-party software where you store the data.
Before going further, let us explain some crucial components.
Container
Let’s say your GTM tags are children, well the Container is a safe house for them.
It’s a place that holds all Tags together.
It fires Tags according to the rules that are set up.
A container has its code that needs to be implemented on the website so that tags work, and data starts collecting.
The Container contains tags, triggers and variables.
Tags
Tags are a snippet of code that are designed to send data from your site to a third party.
For most users, those third-party sites are Google Analytics, Google Ads, Facebook Pixel, Hotjar.
Tags fire in response to an event.
Those events could be button clicks, pdf download, affiliate link, add to cart, etc.
After the Tag is configured, use the triggers and variables to tell the tags what to do.
Trigger
Triggers are rules that make sure that tags fire when you want them to.
The trigger is the central part of the tags, and Tag cannot be created without a Trigger.
Example
Let’s say you have a page called example.com/examplepage, and on that page, you have a button for a call to action to submit your email address.
The Container which has all the Tags and triggers for your website is loaded and primed when a visitor lands on the page “example page”.
The Container will then continue to monitor the page to for the Tags and triggers specific to that page which in this example is to record an event when the call to action button is pushed to submit the email address.
When that Trigger takes place, the Tag is fired doing what you asked it to do, which might be to record the Event in Google Analytics that an email address was submitted.
The reason will want to track this is to measure “conversions” for your Google Ads account, so you can measure your conversion rate and conversion cost from your Google Ads marketing.
Google Tag Manager Installation
Now that we have covered the main concepts of GTM it is time to take you through implementation on a website.
Make sure you have a Google account (for example Gmail account), so that you can create a GTM Account with those usernames and passwords.
Create Google Tag Manager Account
Follow the next step to create an account:
Step 1: Sign in to GTM website (https://tagmanager.google.com/) with the email and password of your Google account.
Step 2: Click on the button Create Account. Under one email address, you can create multiple GTM accounts, but it is essential to understand that: 1 GTM = 1 Website.
Step 3: Add a new account. In this step, name your account with the name of the website, and choose a country.
Step 4: Choose for what platform you want to track data. In the most common platform is Web, which is what we are covering today.
*Important: when you name the Container and account the account or Container cannot start with an “_” or contain a reserved character (!, @, #, $, <, etc.).
The most common convention is to use the domain or if it is a subdomain the subdomain and name – example.com OR examsub.example.com just to make it easy to remember what the Container is for.
Install Google Tag Manager Code on a website
If you are not experienced with code or do not have access to your website or mobile app code, you may need to enlist the assistance of a developer for this step.
Developers can learn more at the Tag Manager Developer Quick Start Guide.
Once the account is created, the user interface will be opened with a special Container ID which needs to be implemented on the website.
This is at the top of the page on the right as we show in the example below.
Step1: Where do I find the container code to put on a website.
The code can be found by clicking on the ID which starts with “GTM-“, or in the “Admin” section under Install GTM.
The code will look like the next image.
Step 2: Implement the code onto every page of your website.
Instructions for implementing GTM container code are straightforward, but if you’re unfamiliar with implementing code on your website, please talk with your developer.
The first code goes as in the top of a page in the <head> of the page.
This is crucial as it tells your website to load the GTM Container asynchronously.
This means that the first thing that happens when users come to your website GTM container begins to load with all of its Tags inside him as well as loading the other parts of your page at the same time.
This is important because we want to track all users, even those who come and leave after just seconds, and it ensures the page loads faster.
The second code is non-script part of the code, that needs to be placed immediately after the opening <body> tag.
This is not an integral part of the implementation. You can leave this code out because it tracks users without JavaScript.
The best practice is to have included on the page as some users don’t allow JavaScript, and you want to track all users, not just those that would enable JavaScript.
Here is the example of the code and how it looks in the page source:
Step 3: Publish the Container
When the GTM is correctly installed on your website, the next step is to PUBLISH the Container by going back to the user interface and clicking on the button SUBMIT.
Every time, you make changes in GTM, for example creating new Tags, editing Tags – you need to publish the Container so that changes go live, and that the data that is being sent to Google Analytics is accurate.
Preview and Debug Mode
The thing I most love in GTM is the preview and debug mode.
This feature means you don’t have to wait a couple of days to see if data in analytics being transferred correctly.
With preview and debug mode, you can check everything has worked immediately.
So how do we check this?
Step1: First click the Preview button, next to the Submit button.
Step 2: After clicking on the button, preview and debug mode will open up in the user interface
Step 3: And on the website, if the GTM container is installed correctly, it will open up the preview mode.at the bottom of the screen on the website you have installed GTM.
If you see this windows opened, then you will know that the Container is placed correctly.
As you can see in the Preview window, there are 3 Tags that always fire when you come to your website.
Those are:
- Container Loaded
- DOM ready
- Window Loaded
After clicking and triggering other Tags, they will show in Summary.
Every Tag that fires has 4 dimensions in which you can analyze them:
- Tags
- Variables
- Data layer
- Errors
Google Tag Assistant
One additional tool for checking if Tags are working properly is the Google Tag Assistant.
Tag Assistant helps to troubleshoot the installation of various Google Tags, including Google Analytics, and more.
Just navigate to any page, and Tag Assistant will tell you which Tags are present, report any errors we find and suggest improvements that can be made to your implementation. Most Google Tags are checked, including Google Analytics, Adwords Conversion Tracking, GTM and more.
Use Google Tag Assistant Recording to record a typical user flow to and through your website and instantly validate, diagnose, and troubleshoot issues with your Google Analytics implementation.
GTA is a chrome extension, and you can install it on this link
Checklist
This is short Checklist, so you don’t miss any steps in implementing GTM:
- Create Google Account
- Create GTM Account
- Implement GTM Container code on the website
- Submit the Container
- Turn on the preview mode and check if the Container is working
- Install Google Tag Assistant chrome extension and record pages on website and see if your GTM code is working
Google Analytics Installation via Google Tag Manager
Google Analytics is a powerful and free tool that gives you total control over your data and information about websites and visitors.
With Google Analytics, you can track:
- Website traffic
- Where do your users come from
- Demographic and geographic information about your users
- Users journey on your website
- Individual pages and traffic for them
- The time users spend on your website
With this in mind, implementing Google Analytics is an important step, culminating with tracking conversions for Google Ads.
Here is the easiest way to install Google Analytics via GTM.
Create New Tag
Step 1: Let’s go to GTM container workspace we just created, and start creating your first ever tag.
Step 2: Choose the Tag Type you want to create.
For this Tag, we need to create Google Analytics: Universal Analytics tag type.
Universal Analytics is the latest version of Google Analytics that was created by Google in 2012.
Step 4: Next step is to define what type of tracking we will use for this Tag.
There are 7 types of trackings you can do, including:
- Pageview
- Event
- Transaction
- Social
- Timing
- Decorate Link
- Decorate Form
For this Tag we choose Pageview.
Why?
Because the the starting point for Google Analytics tag will be to track all pageviews on a website.
Create new Google Analytics Variable
Step 5: After we choose the tag type, under Google Analytics Settings we need to create a new variable that we will call Google Analytics.
In this step the important part is to find the Google Analytics tracking ID and copy it in the Variable Configuration.
Google Analytics tracking ID can be found in Google Analytics, under the Admin section: Property / TrackingInfo / Tracking Code
Type the code starting with UA into the box as shown in the example below.
Create Trigger
A trigger listens and tells GTM when to fire. In the case of a pageview, the trigger fires as the page is opened sending data to Google Analytics.
Step 6: After we created the variable, and configured our Tag we need to define fire this Tag.
Because it is a Google Analytics tag with pageview type, we want it to trigger on All Pages.
That means, we want to track All pages on a website.
Step 6: Save the created Tag with his Trigger.
And check it via Preview and Debug mode and via Google Tag Assistant.
The screenshot below shows the Tag and Trigger inside your GTM container.
The image above shows the Google Tag Assistant showing the different Tags that have fired on one of our blog pages in preview mode.
Checklist
This is short Checklist to ensure Google Analytics is installed in GTM correctly:
- Check if GTM Container is installed properly
- Create Google Analytics tag and publish it
- Check via GTM if Google Analytics Tag is working with Google Tag Assistant
- Check with Realtime report in Google Analytics to see if its tracking users
- If there is an code in backend of the website, delete it after creating Tag in GTM
- Install Google Tag Assistant chrome extension and record pages on website and see if your Google Analytics code is working properly
In step 4 we outline checking that the code is firing in Google Analytics.
The easiest way to do this is to log into Google Analytics and click “real-time” and you should be able to see yourself in Google Analytics accessing the page as we have done in the screenshot below accessing the page we showed previously for Google Tag Assistant.
Event tracking via Google Tag Manager
The most important goal for businesses is tracking data, and we do that via Google Analytics.
In the previous section we learned how to connect Google Analytics and GTM with our website for accurate data.
But, what data do we actually use the most?
Of Course we need data about user demographic, pageviews, device reports ets.
But what is more important are interactions on those pages.
Interactions that your users make, called events.
Events are not automatically tracked in Google Analytics that’s why we use GTM so that we can decide what events we want to track send event data to Google Analytics, once a visitor completes a certain action.
Let’s look at a button click. The information we need to send to Google Analytics about a button click is:
- Event Category – Button
- Event Action – Button Click
- Event Label – (Optional)
- Value – (Optional)
Creating an event
To create events, the first you should PLAN which events you need.
For example we know there will be some clicks we want to track (ie buttons, links, add to cart etc).
So in that case we need to enable built-in variables for those clicks, or other actions we need to track.
Built-in Variables
Step 1: In your GTM container, under section Variables choose the button “Configure” to configure all variables that you plan on using.
Step 2 – Check the box next to the variables under “Clicks”
Step 3 – After the Clicks are enabled in the built-in section, you can turn on preview and debug mode and try clicking on your website to see what happens.
Button Click Tracking
Let’s start with the easy Event.
In this section we will go through all the details of creating an event and all those steps later on can be used for creating similar events. The logic is the same.
Find a button you want to track.
Step 1: On your website the first step is to find clicks you want to track, clicks that are important to your business and that you are most likely wanting to track as a conversion.
Possibly these are the buttons that you want the user to click on.
Find the class or ID of the button.
Step 2: Finding the Class or ID of the element we want to track, is pretty important because that differentiates one element from another. This is done in two ways:
- Open source code in your browser with right-click on the button and choose INSPECT (if your using chrome). This opens Developer Tools, allowing you to view the source code of the page.
This means that we track the button that has class: button button-red
- Open the preview and debug mode on website, click on the button, open the variable of the action that happened in summary and find class or ID:
In this example, we found out that the action of clicking on the button is called Link Click, and that Link Click has class: button button-red, but does not have Click ID.
That is okay.
You need just one variable.
Also, you can use a variable like Click Element or Click Text.
Create a trigger for your button.
Step 3: After we find the variable that defines this button, we go back to GTM interface where we will create a trigger.
Triggers tell GTM when a tag should (or shouldn’t) fire.
For our button click Tag we need to create a trigger so that the Tag only fires when our button has been clicked.
There are 2 types of Click Triggers in GTM:
- All Elements – tracks clicks on any element (For example image click, link click, button click, etc)
- Just Links – tracks only link clicks
Step 4: In the GTM menu choose Trigger, then click on the plus and select the trigger type: Just Links.
After selecting the right type, we need to enter the click class of the element we found in the source, or preview and debug mode.
So, our Trigger will fire on Click Class that contains button button-red.
Creating Tag which will send data to our Google Analytics Account.
Step 5: Create New Tag and Name the Tag with something will help you remember what the Tag is for.
Step 6: Under Tag Configuration choose Universal Analytics as Tag Type.
Step 7: Choose tracking type: Select Pageview and change this to “Event”, because our click is an event.
Step 8: Now, we can choose how we want clicks on our buttons to be reported inside Google Analytics. As we talked before, Category and Action are required because those elements we use to send data to analytics.
In this case, we named them:
- Category: Click
- Action: Submit Agency
Step 9: We need to select our Google Analytics settings variable that we already created when we added Google Analytics tag.
Step 10: And the final step is to add the Trigger that we already created.
Step 11: Click on Save.
Below is a second example from our GTM account which tracks when someone signs up to our mailing list.
This also tracks a button push.
Importing Events to Google Analytics Goals.
Step 12: After the tag and Trigger are created we need make this Event be tracked in Google Analytics.
In the section Admin, choose Goals under View.
Press on the red button for creating a New Goal.
And Save it.
In Preview and Debug mode of GTM test if the clicks are tracked, and in Real Time report in Google Analytics check if the goals are tracked.
Now that you have set up the goal, with traffic going through the website, you can track this goal in Google Analytics under Conversions / Goals.
Tracking Outbound or Affiliate Links
What if you have an affiliate website with a lot of different buttons that have the same CTA (Call To Action) and various affiliate links that can be found on different pages of your website?
You probably need to track every affiliate link and every page, and every click.
If you start creating button click events for every single button, you will get lost, and the Google Analytics goal settings will not allow you to import that many goals per one view.
The important thing in GTM and Google Analytics is the accurate structure of every goal and Event.
Here is an easy way to track all clicks with one Tag and one Trigger.
Creating New Variable
We need to create 2 variables in this case.
Step 1: First Variable we create is the one that says that the Element URL Is Outbound.
That means that the URL of an element we later choose via Tags and Trigger is the Affiliate Link or the link that sends from our website to another website.
Go to Variables, click on creating New User Defined Variables.
We need to choose Auto-event Variables that have type Element URL which Is Outbound.
Step 2: The second variable is for tracking Hostnames of affiliate links.
With this variable, we track domain.
With this variable, we will send to Google Analytics data of the affiliate links that were clicked.
Create Trigger
Step 3: Now we need to create a Just link Trigger that will fire every time an Outbound Link happens (or equals true).
This Trigger says: The Tag that I am embedded will fire every time an outbound link or affiliate link is clicked.
Create Tag
Step 4: The third step is creating a new Google Analytics tag.
Select Tag in GTM Menu, click New and name your Tag.
Step 5: Under Tag Configuration, we need to choose Universal Analytics as Tag Type.
When Tags are created for Google Analytics, tag type is always Universal.
Step 6: Select Pageview and change this to Event because our click is an event.
Now we can choose how we want clicks on our buttons to be reported inside Google Analytics.
Step 7: As we said previously, Category and Action are required because those elements we use to send data to analytics.
Category name: Outbound Links
Action: Built-in Variable – Click URL Hostname
Label: Built-in Variable – Page Path
With this, we send to Google Analytics data that says: Outbound Link just happened, on that specific page of your website and the user went to This Hostname.
Step 8: After creating Tag, just add Trigger we just created and save it.
Google Analytics Events
Step 9: Don’t forget to publish the Container.
After the Container is published, open the preview and debug mode on the website and see if the Tag is firing. It should look like this after clicking on the button:
After a couple of days you can see how this data looks in Google Analytics Reports.
Go to Google Analytics, choose Behaviour in Google Analytics menu, then Events and Overview.
You will see the outbound link in the event category, after clicking on it, you will get a window in which you can choose to look and analyse: category, action or label.
And Voila.
Now you are tracking the journey of users who click on affiliate or outbound links.
Implementing Events to Google Ads
Most of the hard work is done! One more simple implementation is left.
As we all know, the majority of websites have PPC Campaigns with different kinds of goals and KPIs.
And for them to be measured, you need to track Conversions and Conversion rate of your PPC Campaigns.
In that case, let’s implement the goals we have created in Google Analytics directly to Google Ads.
Step 1: If your Google Ads Account and Google Analytics accounts are not linked first link them.
Login to Google Adwords and click Tools and settings and then click “Linked Accounts”
Then click Google Analytics and then link to link your Google Analytics account (assuming both are under the same login).
Step 2: Go to your Google Ads Account and Import Conversions
Step 3: Start tracking conversion in your Google Ads campaigns.
Conclusion
Now it’s over to you.
We would love to see your comments and thoughts on the article.
What do you like and what have we missed?
Please leave these in the comments below.
