How to Install Google Tag Manager – The Ultimate Guide

Do you want to manage your own marketing tags but don’t know where to start?

Google Tag Manager can help you deploy and manage your tags without hiring a developer. 

In this guide, we will cover how to properly install Google Tag Manager on your website. Also, you will get some tips and learn more about Container snippets and where to correctly place them in your HTML codes so that you’ll be ready for your first tag deployment.

Let’s dive in.

An overview of what we’ll cover in this guide:

Log into Your Google Account

All right, we will start at tagmanager.google.com. You can log in to your Google Tag Manager account from this page.

Now, you will need to have a Google account in order to use Google Tag Manager which means if you already have a Gmail account, or a YouTube account, or any account for the Google services, you most likely will be able to use it here as well. 

Sign in to Google Tag Manager using your Email

Create a Google Tag Manager Account

Now, if you are completely new to the system, click on Create Account.

Create Account in Google Tag Manager

And this is where you start setting up your Google Tag Manager account. 

Google Tag Manager accounts are divided into two levels: the Account level and the Container level. You can have multiple accounts, and within each account, you can have multiple containers.

Containers are the snippets or the central code that exist for your website. So the best practice is to name your account after your company. Let us take for example, Demo Inc as the Account Name

Choose your Country, and then you can choose whether or not you want to Share data anonymously with Google and others.

Click on Continue to go to the Container setup.

New Account Set-up for Google Tag Manager

Create a Container

Now, the Container is unique for your website where you are going to install Google Tag Manager. So I’d recommend entering your website URL or domain as the Container name. It doesn’t matter what you call the Container. But for you to recognize it later on, I would recommend the URL here. 

You can use the Container in different instances. Here, we will install Google Tag Manager on the Web.

There’s also a Container available for iOS, Android, and AMP pages, but the setup process for these is completely different. You can check out our other tutorials if you want to learn more about iOS, Android, and AMP page setup.

For now, we will continue with the Web option and Create our Google Tag Manager account. 

Set-up Container to install Google Tag Manager on the Web

We need to adhere to some Terms Of Service. If you have read it you can accept it and click Yes. Your new Google Tag Manager account will be initiated.

Accept the Terms of Service in Google Tag Manager to create an account

Once you have gone through the process, you will be greeted with Google Tag Manager snippet. 

Code snippet to install Google Tag Manager on your website

If you don’t see the snippet when you open your Google Tag Manager account, you can always access it by clicking on your Google Tag Manager ID. This will open the code snippet  window.

Click on Google Tag Manager ID to open the code snippet

Install the Google Tag Manager Code Snippet on Your Website

Our code snippet popup contains some installation instructions. First, we need to place one part of the code in the head section of our HTML. Then, we need to insert the second part of the code into our body section of the HTML.

Code snippet to be pasted in the head and body section of your website

This will probably be the last snippet or piece of code that you will need to install onto your website for tracking purposes. However, note that you will need to have access to the website code in order to install this.

There are different methods of installing this code. Let me take you through the options.

Developer Installation

First of all, if you already have a developer working on your website who is responsible for the technical infrastructure of the website, I would suggest you to consult with them in order to install the snippets correctly. This eliminates the risk of errors, plus it will keep your developer well-acquainted everything going on in your website’s code in case they need to make adjustments later.

CMS Installation

Secondly, if you have a CMS (Content Management System) such as WordPress, Shopify, Magento, Joomla, or any other backend system that generates your website, you might be able to install a plugin to add these codes.

There are many GTM plugins out there. I would just encourage you to research widely-used plugins for your CMS. For example, I recommend the Google Tag Manager for WordPress plugin by Thomas Geiger if you’re using WordPress as a CMS. Whatever you use, there will most likely be a tutorial that will explain the right setup for that particular plugin. We have some of our own tutorials for installing GTM on Wix and WordPress.

Manual Installation of GTM Code (on WordPress)

Thirdly, you can also install this manually on your website. If you have access to the code of your website and feel comfortable doing this, then I’ll lead you through the steps here. 

This is what your developer would do, or what the plugin does in the background. As an example, I have a WordPress installation right here. WordPress is the most commonly used Content Management System in the world. So if you are running a WordPress blog, you can follow along with these instructions. If you’re running a different CMS, these instructions will most likely differ, but the general idea is the same.

Now, Content Management Systems are generally governed by a theme with which you can control the design of the website. Within WordPress, you can log into your backend system, and then go to Appearance → Theme Editor. Here, you can see the different themes that you have set up, and you also have access to the theme files themselves.

Themes setup in WordPress under Editor option of Appearance

Now, notice that I have set up a child theme here because I don’t want any changes in the theme files to get affected when a new update is released to the parent theme. It’s best practice to use a child theme if you’re working in WordPress and making any changes to the theme files.

I have this already set up. Now, I have my Theme Header file that I can click on. This is a PHP file that governs all the different sites that are generated by WordPress on my front end.

I can see that there’s a <head> tag that is generating my HTML, and then there’s the closing </head> tag. 

Head tags in the Theme Header file in WordPress

Now, I can copy my code snippets from the Google Tag Manager. The first snippet should go to the head section.

Copy the code snippet that is to be added to the head section of the website
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

Here, replace the XXXX with your Container ID.

I’m going to paste this into the head section of the theme file. And I want to place it as high up as possible into the HTML.

This is important because the browser will pass the website from top to bottom. We want to fire our tracking codes with Google Tag Manager as soon as possible so the likelihood of them firing is higher. 

Thus, I’m going to place them directly under the opening <head>tag.

Paste the code snippet from Google Tag Manager below the opening head tag

And then we have the opening <body> tag as well. I’m going to copy my second code snippet, go back to the theme files and look for the opening <body> tag. And right underneath I will paste my Google Tag Manager code.

Paste the code snippet from Google Tag Manager below the opening body tag
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Here again, replace the XXXX with your Container ID.

Now, I’m going to click Update File and it should be written to my theme files.

Update the theme file with the codes from Google Tag Manager

If this is not something that you can do in your WordPress theme, then you might need to directly access these files via FTP in order to change them.

Testing

Now we should have the Google Tag Manager installed. 

If I go over to my website page, and reload that page, I can right-click and select View page source. Here, I can see the HTML of my website of how it is marked up. We have our Google Tag Manager code at the beginning under the <head> tag.

Google Tag Manager code snippet in the head section of the page source of the website

If we scroll down with all the generated code by the CMS system, we should also find our no script part of Google Tag Manager. It is right under the opening <body> tag in our HTML as well.

Google Tag Manager code snippet in the body section of the page source of the website

So, Google Tag Manager is correctly installed on this website. Now, we can go through all the pages that we have on our website and look into the HTML, but that would be rather cumbersome. 

A better way of validating is simply to go into the preview and debug mode by clicking the Preview button in Google Tag Manager. This will put our browser and only our browser into a special mode which will pop up a debug console in a separate tab (you can read more about this in our guide to the new GTM preview mode). 

I’m going to reload the website page. Here, we see that a Summary of Google Tag Manager pops up at the bottom of the webpage. Nothing fires at the moment but this way, we can go through the pages. If this pops up at the bottom of all pages, we can validate that Google Tag Manager is installed on all pages. 

And if you don’t see this console pop up, it is most likely that you haven’t installed Google Tag Manager correctly on your website.

Debug console of Google Tag Manager pops up on your webpage

But before you start deploying any Tags, remember to Submit the first version in Google Tag Manager in order to initialize GTM correctly.

Submit the first version in Google Tag Manager

Now, give a Version name and click on Publish

Publish and Create Version in Google Tag Manager

This will go live to all the users although we have zero Tags, triggers, or variables installed yet.

Version Summary in Google Tag Manager

So this is how you can install Google Tag Manager on your website. And now we are ready to deploy our first tag with Google Tag Manager.

Summary

All right, so there you have it. This is how you can install Google Tag Manager on your website. You can also learn to install it for iOS, Android or AMP pages. 

Apart from this, you can also install Google Tag Manager for WordPress Plugin to install Google Tag Manager on WordPress.

Please feel free to comment below how you installed the Google Tag Manager on your website. You can also test your knowledge at measureschool.com/lesson2 and see if you understood the tutorial.

We also have a free beginner video course on Google Tag Manager which can help you further to learn GTM.

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
0 Comments
Inline Feedbacks
View all comments

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.