• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

January 2, 2022

How to Install Google Tag Manager on your Website

Updated: January 2nd, 2022. Even though this topic 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 the 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 Google Tag Manager account.

how to install google tag manager

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 Google Tag Manager account and a new container.

how to install google tag manager

Google Tag Manager account works the same as the Google Analytics 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:

  1. By clicking container ID (located next to Publish and Preview buttons)
    container code next to publish button
  2. Or by going to Admin > Account > Container > Install Google Tag Manager
    how to install google tag manager

Any of these options will open instructions on how to install the Google Tag Manager code on your website + the code snippets that you must add to a site.

how to install google tag manager

 

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 Google Tag Manager container asynchronously, which means that the rest of the page can continue loading while Google is doing its magic.

Here’s an example of the website’s <head> where you could add the Google Tag Manager <script> code.

how to install google tag manager

The second Google Tag Manager code (noscript) should be placed immediately after the opening <body> tag. This works as a backup, allowing you to track users without Javascript. The <noscript> tag tells the browser if the user does not have JavaScript enabled, then render an iframe version of the Google Tag Manager Container to the page.

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>

Another thing to mention is that the <noscript> part of the Google Tag Manager code is not required. You’ll need it only if you want to track visitors without enabled JavaScript (which is a very small fraction of the web traffic with many limitations) or if you want to verify the ownership of Search Console Property.

Subscribe and Get the Ebook - Real Book Img - GTM for Beginners

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 (hands-down)
  • I saw that Magento also offers a bunch of Google Tag Manager 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 Google Tag Manager 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 the 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 Google Tag Manager 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 the website’s code, the later they will be launched.

 

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 Google Tag Manager preview and debug panel appeared at the bottom of the screen.
  • Use Tag Assistant (Legacy) extension and check whether Google Tag Manager 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 called data layer.). With its help, Google Tag Manager 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:

<head>
 <script>
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'customerType': 'vip',
 'registrationCountry': 'United States'
 });
 </script>

 <script>
 <!-- Google Tag Manager -->
 ...
 <!-- End Google Tag Manager -->
 </script>
</head>

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:

  • A guide to a Data Layer
  • Data Layer Variable
  • Custom Event Trigger

 

Frequently Asked Questions

So I’ve described what the perfect and recommended scenario looks like:

  1. <script> part of Google Tag Manager code goes to <head> (usually before the closing </head> tag).
  2. <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 the website’s code, the later your tracking tags will fire.

Subscribe and Get the Ebook - Real Book Img - GTM for Beginners

#2. Can I remove <noscript> part and use only <script>

Yes. 

If you don’t care about people who disable JavaScript completely, you can forgo the <noscript> part completely. Remember: putting it in the HEAD will create non-compliant HTML since an iframe shouldn’t be there.

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?

It’s fine.

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 to this day.

But remember that you might be losing some tracking data because GTM (placed in <body>) starts loading a bit later compared to Google Tag Manager 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.

Subscribe and Get the Ebook - Real Book Img - GTM for Beginners
Julius Fedorovicius
In Google Tag Manager Tips
38 COMMENTS
MarcusRB
  • Dec 10 2017
  • Reply

Hi Julius, why push datas on tag, in this case is not a simple dataLayer declaration like as dataLayer ({ }) or you force dataLayer to push datas ?
I cannot understand when add simple dL declaration and when push datas.

Thanks for your help! Marcus

    Julius Fed
    • Dec 10 2017
    • Reply

    Hey Marcus,

    Always push data with window.dataLayer.push regardless of what Google's documentation is saying. Multiple GTM experts (e.g. Simo Ahava) recommend pushing data to the data layer (instead of DL declaration).

    This way you'll be sure that Data Layer won't be overwritten (because sometimes sh*t happens :) ).

    Cheers

Tyler
  • Feb 18 2019
  • Reply

Im using 3d Cart, it has a [very] limited CMS as you mentioned. I understand it's possible to install the GTM script code in the footer and abandon the noscript and compensate for the little visitors that disable JS nowadays. However, our website is old and is still in the development process of being revamped, so load times are a bit slow thus making me worry about installing GTM in the footer. Should I just go to each page and install the GTM code myself?

    Julius Fedorovicius
    • Feb 18 2019
    • Reply

    Hey, depends on the number of pages and whether new pages are added often.

    If there are many pages and new pages are constantly added, I'd go with the footer.

    Otherwise the implementation would be prone to errors.

      Tyler
      • Feb 18 2019
      • Reply

      Thank you. I've figured out that I have access to the frame.html. Would it be a problem if I added it as high in the head as possible?

        Julius Fedorovicius
        • Feb 18 2019
        • Reply

        Should not be a problem. But it will also work right before the closing tag.

Christian
  • Apr 22 2019
  • Reply

Hi Julius,

Thanks a lot for this wonderful tutorial on Google Tag Manager
I wonder if you're familiar with Symfony and if so grateful
if you can tell if I can add the GTM code snippet to the body part as I cannot really do so in the section.
Thanks again.

    Julius Fedorovicius
    • Apr 22 2019
    • Reply

    Symfony is a PHP framework, meaning that you can add it anywhere you want. If you face some limitations, this means that your Content Management system is probably causing them, not Symfony itself.

    To answer your questions, yes, you can add both code snippets to the body.

Henrik Söderlund
  • May 6 2019
  • Reply

Hi Julius, thanks for great contributions. One of our clients have installed the first GTM snipet in the section, but I can't see it properly from within developer tools and/or "View Page Source". I can only see FB/analytics script tags being fired somewhere in the but can't really identify where exactly they have added the GTM snippet. Is it possible to see exactly on which line it was added?

    Henrik Söderlund
    • May 6 2019
    • Reply

    the reply box truncated the gtml element I mentioned (head section), it is meant to read GTM is installed in the head section

      Julius Fedorovicius
      • May 8 2019
      • Reply

      Hey, but do you see the GTM container when you enable the GA Tag Assistant Chrome extension? Because if that plugin does not display GTM (present on a page), then it means that nobody has actually added the snippet.

      When you have enabled the Preview and Debug mode, do you see the Preview mode on that page/website?

        Henrik Söderlund
        • May 8 2019
        • Reply

        Sorry, I could have added that context in my first comment. Yes, it shows in Google tag assistant, and yes the preview and debug mode works too. I am just used to being able to check where in the code the GTM snippet has been added by checking "View Page Source" as the developer tools section does not (it shows the scripts that have fired and changed the DOM). But for this client I cannot see it anywhere. Perhaps a weird edge case, but you might have come across it?

          Julius Fedorovicius
          • May 9 2019

          Sometimes JavaScript code is stored in a separate website file that is loaded on a page. GTM code might be placed there. If you share a link to that page, I can take a look.

Jon
  • Jun 25 2019
  • Reply

How would you go about GTM with Google Analytics for an enhanced eCommerce setup or eCommerce setup in general? I keep seeing a data-layer must be created to pass info (price, product name, category, brand...). We are switching from Tealium to GTM. Lost in what we need to tell our dev team.

    Julius Fedorovicius
    • Jun 25 2019
    • Reply

    Yes, you need to ask developers to push ecommerce data to the data layer and it must follow strict rules created by Google. Enhanced ecommerce is much more complex to implement (requires much more developer's input) but gives you much more insights and is much more valuable.

    You can read this very lengthy guide to learn more https://www.simoahava.com/analytics/enhanced-ecommerce-guide-for-google-tag-manager/

    If that guide is confusing (it most likely will be), I have a module in my intermediate GTM course where I explain the full process of the Enhanced Ecommerce implementation via GTM (including how to instruct developers) https://www.analyticsmania.com/courses/intermediate-google-tag-manager-course/

    Although that module is lengthy (2 hours), it will definitely help you proceed with the implementation.

Mrs Ruth Katz
  • Jul 3 2019
  • Reply

Good day, Julius, I'm a consulting social worker without any coding experience and have a basic Google My Business website.

I would like to be able to cut and paste the relevant code into every page of my website as instructed by Google Tag Manager but have absolutely no idea how to go about doing this.

Any assistance will be greatly appreciated

Kind regards

    Julius Fedorovicius
    • Jul 11 2019
    • Reply

    You cannot add tracking codes to Google My Business profiles

M.H.
  • Sep 20 2019
  • Reply

Dumb question: If you already have the Google Analytics code on your website but now want to track outbound clicks using Google Tag Manager, do you REMOVE the Google Analytics code and replace it with the Google Tag Manager code? Or do you just ADD it above the Analytics code in the section? Thanks.

    Julius Fedorovicius
    • Sep 23 2019
    • Reply

    It is recommended to remove the hardcoded GA code, migrate fully to Google Analytics via GTM.

    But it will also work if you keep the hardcoded Google Analytics and implement the outbound link tracking via GTM+GA. Just make sure that hardcoded GA and GA+GTM are not tracking the same things/interactions (otherwise you will have duplicate data).

Michael
  • Oct 3 2019
  • Reply

Hi thanks for all the useful info, but should the code be added to just the index.htm page or to every .htm page?

    Julius Fedorovicius
    • Oct 3 2019
    • Reply

    Depends on how the website is coded. Just make sure that in the final result, GTM code is on EVERY page. On some website's it's enough to edit one file (and all pages inherit that), on others - multiple.

Paula
  • Nov 11 2019
  • Reply

Hey this is really helpful. My issue is that the tag plugin I'm using doesn't provide an option to put code in the body. It only gives me the header and footer options. So based on your advice I'm just gonna leave the noscript code out, but if you have a better solution I'd be all ears! Thanks!

    Julius Fedorovicius
    • Nov 11 2019
    • Reply

    Feel free to leave the noscript part out. However, if you plan to track visitors with javascript disabled but don't care about the Google Search console property verification via GTM, noscript can also work in the footer.

Julius
  • Apr 22 2021
  • Reply

That requires an in-depth audit. Can't tell you anything now.

ashok
  • May 6 2021
  • Reply

Hello
I have installed GTM in my wordpress website and tested with the preview button in tag manager.
Now every time if i have to check page views status how do i do it?
Do i have to go to analytic.google.com or can i check it within tagmanager.google.com

    Julius
    • May 6 2021
    • Reply

    Find the google tag manager tutorial or beginners on my blog and learn how to do it.

Eric
  • Oct 13 2021
  • Reply

Hi, i have a question about the last paragraph. It's a Wordpress issue. Let's say tag manager was hardcoded and tags/triggers have already been installed. What if I then needed to use the GTM plugin (by Thomas Geir) for using the datalayer etc., would that create issues or install the GTM snippet twice? How to safely make the switch? Thanks so much.

    Julius
    • Oct 13 2021
    • Reply

    That plugin has the option to turn off GTM and just add the data layer. Use that.

      Eric
      • Oct 14 2021
      • Reply

      Thank you so much

Ikram
  • Dec 7 2021
  • Reply

How to get GTM Id?

    Julius Fedorovicius
    • Dec 10 2021
    • Reply

    https://www.analyticsmania.com/post/google-tag-manager-id/

Mike
  • Feb 9 2022
  • Reply

Hi Julius,

One thing I didn't see in this post is if the can be added to the section?

Like your post says, I'm working with a system that doesn't allow adding scripts into the section, unfortunately.

If I leave the portion out, will I still be able to track Google Ads Conversions and the like?

Cheers

    Mike
    • Feb 9 2022
    • Reply

    Not sure why the comment left things out, but I cannot add the noscript piece into the body section. So is it OK to have it added into the head section?

Laura
  • Apr 6 2022
  • Reply

Hi Julius,
I asked our company developer to add GTM code to our website. She let me know she added the code and deleted the old GA code. Is that okay?

    Julius Fedorovicius
    • Apr 13 2022
    • Reply

    If you haven't replicated the same GA tracking in GTM, it means that you are now missing new GA data. GA code should be removed only when you completely replicate the GA tracking in GTM

Stéphane
  • May 13 2022
  • Reply

I would like to know your opinion on "Do I really need to add the Tags to all the pages?" Because I have some HTML websites that contain hundreds of pages... And some of them are "privacy policy", etc. You know, those kinds of pages that you don't want to track... Not adding them would save me hours of copy paste...

What do you personally do in that case? Thanks for your help.

    Julius Fedorovicius
    • May 17 2022
    • Reply

    If there are pages where you don't want to track visitors, don't add GTM there

steve cambridge
  • Jun 18 2022
  • Reply

Hi Julius, I'm a marketer not a developer so bear with me. We're using GTM4WP mainly for the GA4 Ecommerce Tracking which is all working fine.
But I'm having problems using the DataLayer to track form submissions for Microsoft Dynamics 365 forms and SnapChat Events - and I wonder if it's because we do not have the standard GTM tag in the source code which as you've mentioned includes the DataLayer - so as we're using GTM4WP do I need to add code for the DataLayer to work?

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • Introduction to Google Tag Manager Server-side Tagging
  • 3 Ways to Pull Data from Data Layer with Google Tag Manager
  • Cannot See the Google Tag Manager Option in Google Ads Conversion?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings