How to Properly Install Google Tag Manager on Your Website (3+ Ways)

If you have landed on this post, then you probably already know most of the benefits of GTM. So I won’t bore you with that.

Instead, we will jump directly into the different ways you can install GTM on your website.

Whether you have a custom-built CMS, or you are using WordPress, we’ve got you covered.

Before we jump into the actual process of installing GTM, it’s essential to know the different Google Tag Manager components.

We will cover them very briefly in this post.

If however, you want to get an in-depth understanding of what GTM is and how it works, you can check out our Step-by-Step (Visual) Beginner’s Guide to Google Tag Manager [Updated for 2021].

Google Tag Manager Basics

Tags / Triggers / Variables are the building blocks of Google Tag Manager.

Tags are pieces of code that collect behavior, analytics, or e-commerce data from your website and then send it to another system such as Google Analytics.

In order for tags to fire, however, some sort of event has to happen. An event could be anything from a visitor viewing a page to him/her clicking something on your site.

Triggers continuously listen for such events to happen. And when the desired event is detected, the trigger allows the tag to fire.

Both Tags and Triggers can have Variables.

• Variables in Tags are used for capturing dynamic values
  • For example, if you have a SaaS or an e-commerce site that displays dynamic currency values to visitors, you can use a dynamic variable to pass the currency code along with the transaction value to Google Analytics.
• Variables in Triggers, on the other hand, are used to customize the event in which the Tag fires, kind of like a filter.
  • For example, if you want a Tag to fire only when a visitor lands on the pricing page, you’d use the {{URL}} Trigger Variable.

{{URL}} contains “/pricing”

Lastly, all of the above are stored inside what’s called a GTM Container. (We’ll show you how to create your first GTM container below).

And now that we are set with the fundamentals of GTM, let’s jump right into the installation process.

Creating and setting up your GTM account

The Google Tag Manager installation process can be summed up in three simple steps:

1. Create a GTM account or use an existing one
2. Install the GTM container snippet on every page of your website that you want to track
3. Publish the GTM container
4. Make sure the installation has been completed successfully.

Now, let’s walk you through the whole process step by step...

1. Create a Google Tag Manager Account

Firstly, navigate to the Google Tag Manager landing page and create a free account (if you haven’t done so already).

Once you click on Start for free, you’ll be redirected to a page that prompts you to create your first GTM account.

Here you can name your account based on your company name.

Make sure to select the correct country your company is situated in since different laws and legislations apply to European Union countries and the US.

This is especially important since the latest GDPR developments.

To complete the initial GTM account creation, you’ll be prompted to also create your first container. You should enter a descriptive name, like the domain URL.

This will make it easier to distinguish containers when managing several domains under one Google Tag Manager account.

Since we are trying to install Google Tag Manager on a website, we click on Web, then Create.

Here are some best practices to keep in mind when creating your Google Tag Manager account:

Once you have created your new Google Tag Manager account, you will be redirected to the Default GTM Workspace. The following pop-up should appear:

Now, all you have to do is follow the instructions. Which brings us to step 2.

2. Add the GTM Container Snippet to Your Website

If you clicked on OK by mistake, before copying the code snippets, then you can click on your container ID on the top right, to open the Install Google Tag Manager box once again.

The first code snippet is the most important part of GTM. As instructed, you need to copy and paste it on every page of your site. Make sure to place it between the <head>..... </head> HTML tags.

(If your website is in WordPress, we explain how to do this step-by-step further below, just bear with us for a bit longer)

In simple terms, that code snippet tells the page to load the GTM container asynchronously. This allows the browser to keep loading the rest of the page and its elements without having to wait.

The second code snippet (the one enclosed in <noscript>...</noscript> tags), should be placed right after the opening <body> tag.

You can think of this code as a backup generator.

Why? This code will get activated only if the site visitor has their Javascript disabled.

In this case, the <no script> tag will render an iframe version of the GTM container.

Attention:

You can’t insert the second code snippet in between the <head>...</head> tags because that will render an iframe, which can make your site’s HTML code break.

Can You Add Both Code Snippets within the <Body> Tags?

The short answer is: Yes, it is possible to add both code snippets within the <body> tags, however, it is not recommended (anymore).

The long answer:

Until 2016 Google recommended including the GTM code snippets in the <body> section of your HTML.

If your implementation is based on the old recommendation (because you installed GTM a long time ago), you risk not recording all events happening on the page.

That’s because the browser will load the GTM code placed within the <body> tags a bit later as opposed to code placed within the <head> tags. Which means you could be losing some tracking data.

If you are wondering whether you should adapt your GTM installation to the newest recommendations, I’d say the answer depends on your business case.

If your site has a lot of pages, it might be non-efficient to go back and change the location of every single code snippet (assuming limited resources).

However, if you only have 10-15 pages, it will only take you a couple of minutes to make the necessary changes, so you might as well go for it.

3. Publish the GTM container (even if it’s completely empty)

Once you have placed the GTM code on the relevant pages of your website, you NEED to publish the container. (You can also do this before placing the code, don’t worry, nothing will break).

You might be thinking, hey, the container is empty, what’s the point?

The reason for that is that if you don’t, you’ll receive an HTTP 404 response when trying to load the container.

Which in human terms means “the container can not be found”.

To publish your container, click on the Submit button in the top-right corner.

In the pop-up that appears, click on Publish and Create Version. And then go ahead and give the version a name and a description.

Once ready, click on Publish.

And there you go!

Your container should now be live and published. If you navigate to your Workspace, you’ll notice the following change:

Now you are all set with the Installation of Google Tag Manager on your site.

How to Install Google Tag Manager on Your WordPress Site

There are different ways to install GTM on your WordPress site. In the end, it all boils down to whether you want to do everything manually, or whether you want to use a plugin.

We’ll explain both ways, however, if you are worried about breaking anything in your code, we strongly recommend that you follow the plugin method.

Attention:

The following instructions only work for self-hosted websites from WordPress.org. There is no way to install Google Tag Manager on a WordPress.com website since you are not allowed to install any sort of plugins.

1. Manual - By directly editing the header.php file within the child theme
2. Automatic (almost) - By using a WordPress plugin

Without further ado, let’s jump right in.

Manual Installation of GTM in WordPress

If you haven’t created a Google Tag Manager account as we instructed above, then scroll back and complete the first section of this tutorial.

Once you have your GTM account set up, navigate to the Dashboard of your WordPress site.

Click on Appearance and then on Theme Editor.

Now, make sure you are editing the Child Theme and not the Main Theme. Otherwise, you might end up breaking something.

If you are not using a child theme and you have been customizing the master theme all this time, you can check the following thread for migrating the customizations to a child theme.

Once you are on the child theme, navigate to the header.php file and find the <head>...</head> tags.

Copy the <script> code from GTM and paste it right underneath the opening <head> tag. Like so:

Then go ahead and copy the <noscript> code from GTM and paste it right underneath the opening <body> tag. Like so:

Lastly, click on the Update File button at the bottom of the page.

And, that’s it!

Your WordPress GTM installation should be complete.

ATTENTION: Many tutorials out there on this topic are extremely outdated. They recommend using the Insert Headers and Footers plugin.

Just don’t!

While this used to be okay before 2016, when Google Tag Manager required the insertion of only one code snippet, that’s not the case anymore.

The plugin above will only allow you to insert the first GTM code snippet (the <script> one).

When it comes to the <noscript> code snippet, you’ll have a hard time since it needs to go right underneath the opening <body> tag.

And the plugin doesn’t let you do that.

Now that you have completed all the steps needed to install Google Tag Manager, it’s time to validate it.

You can skip directly to the section on validating your Google Tag Manager installation, or you can continue reading below on how to achieve the same by using a WordPress plugin.

Automatic Installation of Google Tag Manager Using a WordPress Plugin

If you decided to go for the effortless, automated, plugin way, I can’t say I blame you. That’s the beauty of WordPress after all.

The ability to quickly install a plugin without having to reinvent the wheel all over again.

So, which plugin should you use to install Google Tag Manager on your WordPress site?

Hands down, our top pick is Google Tag Manager for WordPress plugin, created by Thomas Geiger.

It will take you less than 1 minute to get Google Tag Manager installed. Here’s what you have to do:

Go to the plugins repository from within the WordPress dashboard and download the plugin.

Go ahead and Activate the plugin.

Once you do, you’ll see the following pop-up on top of the page:

Click on enter your GTM ID.

If the pop-up did not show up, you can navigate there by going to Settings > Google Tag Manager.

In the end, you will be redirected to the following page:

All you have to do in the first part (numbered 1) is to copy your Google Tag Manager ID and paste it like in the screenshot above.

This will install the <script> code snippet into all the pages of your website, automatically.

Sweet, right?

Now, what about the <noscript> part? That’s where the second part comes in (numbered 2).

To follow Google’s best practices, you should click on Custom Container Code Placement.

This will allow you to place the second GTM code snippet (the <noscript> one) right underneath the <body> tag (as per Google’s recommendation).

All you have to do is copy the following code:

<?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>

And paste it underneath the <body> tag. We’ll show you how to do that exactly. But before doing that, don’t forget to Save Changes.

Now, navigate to Appearance > Theme Editor.

Make sure you have selected the Child Theme (DO NOT Edit your Main/Master theme).

Now go to the header.php file and find the <body> tag. It should look something like this (can differ depending on your installation/theme):

Insert the code copied from above right underneath the <body> tag. Like so:

Click on Update File.

And that’s it. You’re done!

You have successfully installed Google Tag Manager on your WordPress site.

All that’s left now is to validate whether your installation was successful, which brings us to the last and final step.

Making Sure Your Google Tag Manager Installation is Successful

You can check this either manually or by using an extension. We’ll cover both ways below.

Regardless of the way you decide to go for, there is something you should do before checking if the GTM installation has been successfully completed.

Make sure you clear your site’s cache so that the new changes are updated.

Validating the GTM Installation Manually

You can validate your installation using the following method:

1. Navigate to your site
2. Right-click anywhere on the site
3. Then click on View Page Source
4. Check if underneath the opening <head> tag there is the GTM <script> code
5. And then check if under the opening <body> tag there is the GTM <noscript> code

Keep in mind that if you are using website optimization plugins like SG Optimizer or Autoptimize you might not find the entire code snippet in the source code. Instead, you’ll see a minified version.

Validating Your GTM Installation w/ Google Tag Assistant

While the above method works, it’s a bit too manual.

For those of you looking for a more automated way, you can install the Google Tag Assistant Chrome Extension.

The green smiley face means everything is set up perfectly!

Conclusion

Give yourself a good pat on the back. You’ve successfully installed Google Tag Manager on your site.

You might be thinking, “is that it?”

Well, that’s a hard no.

Installing GTM is just the tip of the iceberg. Now you need to start populating your container with tags and triggers so that you can track meaningful data from your website.

We’re going to release a comprehensive guide filled with ALL the GTM recipes you need in the upcoming weeks, so stay tuned!

Want to hear when that happens? Sign up for our newsletter! We’re going to send you only the BEST content out there. No mandatory weekly blog post, no place-holder videos - only content you’re going to get a TON of value from.

Now, back to you. If you have any questions or suggestions for improving this post, let us know in the comments section below.