Google Tag Manager (GTM) for Beginners - Part 2
In the first installment of our Google Tag Manager for Beginners guide, we have created a GTM account. At the end of part 1, you will have been redirected to your Google Tag Manager account, which will be the starting point for this second installment of the guide. If you have already logged out, please log into your account on the GTM website and select the container name you have created in part 1.
Note: In this guide we will use the terms 'Google Tag Manager' and 'GTM' as synonyms. In case we use 'GTM', you can read this as 'Google Tag Manager'. This also applies to 'Google Analytics 4' and 'GA4'.
Note: Google has a habit of regularly changing the interface of Google Analytics 4. This means that the GA4 interface in our images may look different compared to the GA4 interface in your browser. This usually results in minor aesthetic differences, but in some cases, Google has moved around entire features. If you can't find the specific feature we are highlighting, please consult Google to see where the particular feature has been moved to.
Step 3 - Familiarize yourself with the GTM interface
Take a quick look around at the Google Tag Manager interface. Seeing as you have just created your Google Tag Manager account, it will look quite empty. When you have worked in GTM for a while, this overview screen will give you a high-level overview of what's going on in your GTM account.
In the menu on your left-hand side, you will several options:
• Overview - This is the page you are now on. To return to the current screen, click this button. In this (and other) guide(s), we will refer to the GTM overview screen many times. When we do, this is the screen we are referring to.
• Tags - By clicking this option, you will be able to create so-called 'tags'. Tags in Google Tag Manager are pieces of code you want your website to load every time a visitor meets specific conditions. In many cases, tags are tracking codes which track the behavior of your website visitors. E.g., Google tag, Google Ads tag, Facebook/Meta pixel, etc.
• Triggers - Triggers are used to fire the previously mentioned tags. It's best to think of them as the condition(s) on your website that must be met before a specific tag fires. For example, clicking a specific button on your site, or perhaps visiting a specific page.
• Variables - Variables are a bit more difficult to explain. Although it does not fully their function, you might want to think of variables as the 'containers' for the data you want to collect. The data is stored in variables and passed on to tags, triggers or external platforms.
• Folders - You can use folders to store your tags and triggers in an organized manner, just like the folders on your computer. For example, you can store all your Google Analytics 4 tags and triggers in one folder, and your Meta pixel(s) in another folder.
• Templates - These are templates for tags, triggers, and variables created by Google employees or other people in the GTM community. Templates can save you a lot of time for complex configurations.
Step 4. Install the Google Tag Manager code on your website
As we mentioned in the first part of our Google Tag Manager for beginners guide, you will need to connect your website to Google Tag Manager to send data from your website to your Google Analytics 4 account. This connection is made by adding a piece of JavaScript code to the source code of your website. Although you do not need to be able to read or write JavaScript yourself, it is important that you can get the code onto your website. If you are a WordPress user, there is an easy way to do this. (Read more about this below.)
Where can I find the GTM code?
The Google Tag Manage code can be found in two places in your GTM account.
The first place is easy to reach via the overview screen. Simply click the blue GTM-XXXXXX link at the top of the menu bar. (Your X's will consist of different characters.) This is your so-called 'container ID'. As you will see below, your container ID will also be included in your Google Tag Manager code.
After clicking on your container ID, you will see a pop-up containing the code you will need to install on your website. As you can see, you will need to place the top part as high as possible in the <head> of your website, and the second part right after the opening <body> tag.
The second place to get your GTM code is via the 'admin' section. In the GTM overview screen, click the tab called 'admin' in the top left corner.
Then click on 'Install Google Tag Manager', after which you will see the code to install.
How do I install the Google Tag Manager code on my website?
If you have had your website created by someone else or if it is currently being managed by someone else, we strongly recommend you to have your code installed by that person. If this is not an option or if you have created your website yourself, you will have to take care of it yourself. The frustrating thing is that installing the code might be different for everyone, depending on (among other things) your technical environment. For example, the way in which this is done differs per content management system (CMS). The code installation for WordPress users might be different compared to that of Drupal, Joomla, Magento, Shopify or Wix users. Fortunately, Google has collected a lot of information on this topic.
Important: It is very important that you do not copy and paste the GTM code into a text editor such as Microsoft Word or Google Docs. There is a chance that the code will be altered automatically by your text editor based on certain grammatical rules. This includes adding or removing spaces, replacing punctuation marks, etc. If you want to save the code, please do so in a .txt file in a program such as Notepad.
WordPress installation
There is a good chance your website is built on WordPress. The easiest way to install the code on your website via WordPress is via the official Google Site Kit plugin. Here you can read exactly how to install the plugin and code.
It is also possible to place the code in the source code of your website directly without using a plugin. But even then, how to go about it largely depends on your specific situation. For example, lots of people nowadays use a drag-and-drop content builder to build their WordPress website. Almost every website builder has an option to add code to your website without too much effort. Below, you will find some links to the GTM support pages of commonly used website builders. If your website builder is not listed, please consult the support page of your specific builder.
Step 5. Check if the code has been installed successfully
After installing the Google Tag Manager code onto your website, it is important to verify that it has been done successfully. Fortunately, this can be checked in several easy ways. But first, log in to the Google Tag Manager website again with your Google account.
Before we're going to test if the Google Tag Manager code on your website works, we are going to pubish the GTM container. In the GTM overview screen, click the blue 'submit' button at the top right. This button publishes your container. In normal use of Google Tag Manager, you will always test your settings first (using the 'preview' button) before publishing your container, but to get started you will first need to publish your container.
You will be presented with the screen above. As you can see, you will to enter a version name. Although the name does not really matter in this case, it is usually advisable to come up with a descriptive name for each future version name, so that you can see at a glance which changes you have included in the particular version. It is also recommended to include all new changes in the version description below it. Good version names and version descriptions are important in case something goes wrong, because based on these you will to figure out which particular version you need to roll back to.
In this case, you can enter any name as the version name (such as 'Empty container') and leave the version description empty. You will then see a version overview which you may close. You have now created a new version of your container. If you would like an overview of all versions of this container you have published, click on 'versions' in the overview screen at the top.
Testing your Google Tag Manager code - method 1
Probably the easiest way to check whether or a not your Google Tag Manager code has been installed correctly is by clicking your container ID in your GTM overview screen.
Firstly, type your website address in the field under the heading '3. Test your website (optional)'. Then click the 'test' button to the right. If you GTM code has been found on your website, you will see a green checkmark next to it, like on the image above. If your GTM code has not been found, it will show a message in red reflecting this.
Testing your Google Tag Manager code - method 2
Our preferred method of testing whether or not our Google Tag Manager code works is through Google Tag Manager's built-in 'Preview and Debug mode', which is usually shortened to 'preview mode'. This is a mode you will use often, because it's the place where we can test changes before we make them go live. It allows us to check whether tags, triggers and variables are functioning properly. For example, in this preview mode you can click on different places on your website to see if these actions are registered in Google Tag Manager. At the same time, this mode allows us to check whether the GTM code is installed correctly on our website because it only works if Google Tag Manager can connect to the container code on your website.
To start the GTM preview mode, from the overview screen, click the 'preview' button in the top right corner.
After having clicked 'preview' in the Google Tag Manager overview screen, a page will load showing you the above pop-up. To connect to the GTM code on your website you will need to enter the URL of your website here (including the 'https://' part). Then press the blue 'connect' button, after which Google Tag Manager will try to connect.
After you having clicked 'connect', Google Tag Manager will either automatically open a new window or a new browser tab and load your website in it. If Google Tag Manager has been able to connect to the GTM code on your website, you will see the above message in the window where you have Google Tag Manager active.
Note: You should not close either the window in which you have opened Google Tag Manager (containing the above message) or the just opened tab/window containing your website. Once you close either one, the connection will be closed and preview mode will be closed. If you closed either accidentally did this, you will have to reconnect to preview mode.
If Google Tag Manager has been able to connect to the GTM code on your website, you will see the above message at the bottom right in the window/browser tab which has your website loaded. Unfortunately, it can also happen that no connection could be established. This blog post sums up the most common causes and solutions to solve this frustrating problem.
After this, we can test whether Google Tag Manager registers interactions. In the window containing your website (in which you see the above 'Tag Assistant Connected' message), navigate to another page on your website. In this case it does not matter which page.
If you then switch back to the tab in which you have Google Tag Manager active, on your left-hand side you should see that the particular page you have navigated to has been loaded. Later, through tags, triggers and variables, we will be able to determine exactly what will be recorded by Google Tag Manager and what we will then forward to Google Analytics 4. For now you can close the GTM preview mode and close the tab/window containing your website.