November 30, 2019
How to Setup and Install Google Tag Manager on your Website
Updated: November 30th, 2019. Even though this topic (How to install Google Tag Manager) might sound way too basic for some of you, remember that there are nuances you should keep in mind. In this blog post, I’ll describe several ways how to install Google Tag Manager on a website, highlighting pros and cons of each option.
Just in case you haven’t done this, first, you should create a Google Tag Manager account and a container.
Create a Google Tag Manager Account
To get started, first let’s create a GTM account. Go to Google Tag Manager official website and click the main call-to-action in order to create a new GTM account.
Just like with any other Google’s product, you will use the same Google account for Tag Manager. So if you’re already on Gmail (Google Ads, Google Analytics, etc.) you will be automatically logged in to Google Tag Manager. If not, create a Google account first (I will not show that procedure, so you’re on your own here ).
Once you log in, you’ll be asked to create a new GTM account and a new container.
Google Tag Manager account works the same as the GA account, usually, it’s for a company/business/client, while a container is usually for a website or application. A single container can contain many tags, triggers, and variables.
However, if there are several websites that belong to a single business and their structure is very similar (plus, their tracking implementation is similar), feel free to use one container on multiple websites. I have written more about this topic here.
Where can I find the Google Tag Manager code?
Google Tag Manager provides you with the exact code and instructions where to add it to your website. There are two places where you can find it:
- By clicking container ID link (located next to Publish and Preview buttons)
- Or by going to Admin > Account > Container > Install Google Tag Manager
Any of these options will open instructions on how to install the Google Tag Manager code on your website.
Add Google Tag Manager container code to the website
Follow the instruction and place the first code (which is surrounded by <script> tags) somewhere between <head> tags of your website. This code is the key part. It tells your page to load your GTM container asynchronously, which means that the rest of the page can continue loading while Google is doing its magic.
Here’s an example of website’s <head> where you could add the GTM <script> code.
Important: While you can place both these codes in <body> only, you must not add them both in <head>. As it was mentioned before, <noscript> part renders an iframe, which is not allowed in <head>, otherwise you’re website’s HTML will be invalid.
So the possible options are:
- <script> code is added to the <head> and <noscript> to the <body>
- both <script> and <noscript> codes are added to the <body>
Check if GTM plugins are available
If you are using a popular Content Management System (CMS) that allows using plugins, chances are that there is already a plugin that installs Google Tag Manager for you. All you need to do is just to add your Google Tag Manager container ID.
Here are several examples of such plugins:
- For WordPress – I always recommend GTM4WP (handsdown)
- I saw that Magento also offers a bunch of GTM plugins
- on Shopify, you’ll also find several good ones, for example, this.
That should save you some time. Also, some platforms offer built-in GTM integration (for example, WIX).
However, if you decided to move with the manual installation (with or without a developer’s input), here’s what you need to know (continue reading)
Why should I place Google Tag Manager code in <head>?
While this is not 100% required, it is highly recommended that you place <script> part of GTM code into <head> of your website.
Why? It’s better for tracking. The higher up in the page the snippet is, the faster it is loaded. In the older version of Google Tag Manager, it was recommended to place the snippet in the body tag, but this would potentially miss users who left your page before the body tag loaded (due to slow page speed).
If your website is pretty heavy, it might take more than few seconds for GTM to start loading in <body>, but in <head> it would be initiated much faster, thus you could catch more visitors and see how they behave.
This could empower you to identify the percentage of traffic which bounces before even the page completely loads.
Remember, the lower your tracking codes are placed in website’s code, the later they will be launched.
Publish the Container
When the code is placed on your website, head over to Google Tag Manager account and publish the container. Especially if it’s empty.
Why? Because unpublished GTM container will cause an error (visible in browser’s console).
404 not found for GET: GET http://www.googletagmanager.com/gtm.js?id=GTM-XXXXX
Your browser is requesting data from Google’s servers, although that container is still not published, thus no data will be returned.
Check if Google Tag Manager is working
After the GTM code was implemented on a page, you need to make sure whether it was actually properly installed. There are several options you can choose from (all of them are explained in detail here):
- Right-click on your website’s background -> choose View page source and find that code (by looking for gtm.js)
- Enable preview and debug mode and see whether it appears on the screen. Click the Preview button in the top right corner of GTM interface, then go to the website (refresh it) and check whether a GTM preview and debug panel appeared at the bottom of the screen.
- Use Tag Assistant extension and check whether GTM is displayed once you enable it.
The tips above are the main ones you could try right now. I have a longer (and more detailed) list here.
Need some custom data on every page? Use the Data Layer
When Google Tag Manager code is placed on your website, it automatically creates a Data Layer.
It’s like a virtual layer of your website which contains various data points (Get it? That’s why it’s call data layer.). With its help GTM is able to read, push and transfer data between your website and other tracking tools.
If you want to push some data to dataLayer when the page loads, you need to place that data above Google Tag Manager code. Like this:
window.dataLayer = window.dataLayer || ;
'registrationCountry': 'United States'
<!-- Google Tag Manager -->
<!-- End Google Tag Manager -->
If you don’t possess coding skills, this work should be done by a developer (because just blind copy-pasting will not work). There must be some logic written that adds actually dynamic information to the dataLayer (e.g. if a user logs in, his/her actual customerType should be added to the Data Layer.
Data Layer is not an easy concept to grasp on for beginners. So if you are confused in this chapter, don’t worry. Everyone was. Here are some additional resources for you to read to get more familiar with it:
Frequently Asked Questions
So I’ve described what the perfect and recommended scenario looks like:
- <script> part of Google Tag Manager code goes to <head> (usually before the closing </head> tag).
- <noscript> part goes after the opening <body> tag.
But real-life situations are far from perfect and sometimes we have to deal with very limited circumstances. In this chapter, we’ll discuss other not-so-perfect options and what the possible outcome might be.
#1. Can I place <noscript> part somewhere else rather than right after <body> tag?
Yes, you can.
This usually happens while working with limited content management systems (CMS), which prohibit you from accessing the website’s source directly and only allows to paste tracking codes into a dedicated field. All content of that field is then placed at the very end of website’s HTML.
While it is not recommended, it is possible to put the Google Tag Manager <script> and <noscript> tags in the body section, as shown below. If you are planning on, or already using GTM to run A/B testing, then you definitely should place the top snippet in the head to make sure your experiments run smoothly.
But if you’re planning just to utilize some basic Google Analytics tracking (or something like it), then you should be fine.
But keep in mind, the lower your tracking codes are in website’s code, the later your tracking tags will fire.
#2. Can I remove <noscript> part and use only <script>
You should either put noscript part in the <body> or don’t use it at all.
#3. I Installed GTM few years ago; Both <script> and <noscript> parts are in body. Is it bad?
As it was mentioned before, prior to late 2016, Google’s recommendation was to place the entire Google Tag Manager code to <body>. This is still working till this day.
But remember that you might be losing some tracking data, because GTM (placed in <body>) starts loading a bit later compared to GTM code placed in <head>.
So if you have time and resources, I definitely recommend moving <script> part to <head>.
How To Setup & Install Google Tag Manager: Final Words
The advice here is simple: just follow Google’s instructions.
The most recommended way how to install Google Tag Manager code is to place <script> part to <head> of your website, and <noscript> part should be place somewhere in <body> (preferably right after <body> tag).
This ensures that your marketing tags in GTM will be fired as soon as possible without much of data loss.
The lower Google Tag Manager code placement is, the later your tags will fire. As a result, you might lose a portion of your data.
If you are using a popular content management system to run your website (e.g. WordPress), look for ready-made plugins that will help install Google Tag Manager with a couple of clicks.