How to Install Google Tag Manager on Your Website

To use web analytics systems, advertising services, and other third-party tools, you need to add their code to your site. It’s not difficult if you understand HTML, and you’re using a couple of services, or if you have a full-time developer. You start facing problems when you need to make changes to installed code or add new integrations. First, it takes a lot of time. Second, by making changes to one piece of code, you can accidentally break the entire site. Luckily, Google has created a great tool to help you out — Google Tag Manager or GTM.

With GTM, you can easily change the code on pages, add new fragments, and integrate your site with analytical systems, advertising, and other services.

Note: This post was originally published in December 2018 and was completely updated on Website Analytics in February 2024 for accuracy and comprehensiveness.

Google Tag Manager lets you easily manage JavaScript and HTML tags without a developer’s help — well, almost without help. You’ll still need to ask a developer to install the Tag Manager code on your site. But after that, you can add any services and new scripts right in the Google Tag Manager interface yourself.

With a Tag Manager Account, you can:

1. Set up data transmission to Google Analytics, AppsFlyer, and other analytical systems
2. Place Google Ads, DoubleClick, Facebook, and other remarketing tags on your site
3. Place custom HTML scripts on your site to display banners, conduct A/B testing, and so on
4. Quickly edit tags.

Who is Google Tag Manager designed for?

1. Web analysts and internet marketers implement external services themselves, create effective end-to-end analytics systems, and track important KPIs
2. Specialists in contextual advertising and SEO — for remarketing, evaluating ad campaign performance, and setting goals.
3. Owners of small sites — to manage web analytics without a developer’s help
4. Online marketing agencies — to work quickly and effectively with client accounts

In addition to the features described above, Tag Manager has additional benefits to simplify your life and help you save time and money:

1. It’s completely free.
2. There are lots of ready-made integrations with other services. You can see the list of all supported 3rd party tags in the help menu.
3. It improves the speed of your site by shortening code so pages load faster.
4. It has a check and debug mode. You can test how tags operate before adding them to your site.
5. It saves all changes in settings. You can return to a previous version at any time if you publish code with errors. You can also find out exactly who made what changes to the code and precisely when.
6. You can delegate different levels of access to the Tag Manager accounts of your employees or marketers from an advertising agency with whom you cooperate.
7. It’s easy to verify your site ownership in Search Console.
8. Tag Manager has a large community, an official forum, and a support section where you can find answers to many questions.

But there are also some disadvantages of Google Tag Manager:

1. If you accidentally damage the GTM container code when making edits, then all tags deployed with it will stop working. You’ll have to look through the code to correct the error.
2. Installing GTM code on your site and having flexible settings (for example, custom tags) requires knowledge of HTML, JavaScript, and the DOM.
3. GTM doesn’t offer online support or reports.

In Google Tag Manager, you can create multiple accounts for one Gmail address. But often, one is enough unless you’re an agency that works with sites for many companies.

The next step above accounts in the GTM hierarchy is the container. A container stores all the tags for your website, mobile app, or AMP page. You can create multiple containers in your account — a separate one for each resource. On the technical side, a container is the main GTM code, which is installed on the site and allows you to run tags for other services.

A tag is a piece of executable code. It can transmit data to analytics systems and other third-party applications, launch remarketing campaigns, send emails to users who have abandoned their carts, change the contents of A/B tests, and so on.

You can use ready-made tag templates:

Or create your own tags if you know HTML:

A trigger is a required condition for firing a tag. It can be set for activating and blocking a tag. A trigger must contain an event: clicking on a button, loading a page, clicking on a link, etc. You can also set filters for each trigger, for example, by specifying the URLs of the pages on which the tag should fire.

In Google Tag Manager, all triggers are divided into four groups:

1. Page view: Activate the tag when the page is just starting to load or when it has loaded completely
2. Click: Set a trigger for clicks on any element or link
3. Interaction with users: View video, page view depth, view site elements, form submission
4. Other: For example, set a timer to fire a tag, set up tracking of JavaScript errors, or create any custom event that isn’t in the trigger templates.

Triggers in Tag Manager:

A variable is a parameter and its value. You can set filters in triggers using variables. For instance, if you need to track page views of www.site.com/product, you can set up a page view trigger that will only fire when the Page URL variable takes the site.com/product value. In tags, variables are used to store and transfer data about users’ actions on the site, transactions, products, and so on.

Currently, GTM has 44 built-in variables for websites. Just tick the box to activate a variable:

If the built-in variables aren’t enough, you can create custom ones using JavaScript code and CSS selectors. This allows you to track almost all visitors’ actions on the site.

To start, you’ll need to install the Tag Manager code on your site. After that, all other settings can be adjusted in the service interface without involving programmers.

In short, to install GTM, you’ll need to:

1. create an account and container in Google Tag Manager;
2. install the Google Tag Manager code on your site;
3. publish the container;
4. check Google Tag Manager.

On the Tag Manager homepage, click the Register button and sign in using your Gmail address or any other Google account.

Now, you need to create an account directly in Tag Manager. To do this, click Sign in to Tag Manager.

Next, click Create Account:

Think of a name for your account — it’s most convenient to use your company name. Then select the country, check the box next to "Share data anonymously with Google" and other services (optional), and click Continue.

Now, you need to configure the container. If you compare the structure of Google Tag Manager with the structure of Google Analytics, then the container is the equivalent of a resource in GA. It stores tags, triggers, and variables for the entire site. There can be several containers in one GTM account: for the website, for the mobile application, for AMP pages, and so on. To make it convenient, it’s better to name the container after the resource for which it’s created. For example, this may be the address of your site.

After you’ve entered the name of the container, select where it will be used (in our example, this is the Web) and click "Create":

Read the rules for using Tag Manager. Check the box at the bottom of the page confirming that you agree with the conditions of data processing in accordance with the GDPR, then click "Yes":

After this, you’ll see a window with the GTM code fragment that needs to be installed on your website.

You can immediately copy the code and install it on all pages of the site that you want to monitor, or click "OK" and do it later when you add the first tags to the container. You can view and copy the code at any time under Administration → Install Google Tag Manager:

If you’re familiar with website development and have access to the admin panel, it’s easy to add the Tag Manager code. Here’s an example of how to do this through WordPress. Otherwise, you’ll still have to ask for help from programmers; otherwise, there’s a risk of breaking the source code of the page.

The Google Tag Manager code consists of two fragments and is loaded asynchronously. That is, the main part of the page continues to load without waiting for the GTM container to load. The first part of the code should be placed in the page header, as close as possible to the opening tag.

This is because the higher the position of the first fragment, the faster it will load. If you insert it into the tag, then you risk losing data about users who leave the page before loading this tag.

The second part of the code works as a backup and helps to track the actions of users who have disabled JavaScript. It must be placed immediately after the opening tag:

Important!

The GTM code must be placed directly on the page you’re going to track, in other words, on your entire site. Placing code in a hidden iframe or deploying it in another tag management system will not allow tracking tags on the main page correctly.

Installing Google Tag Manager on an AMP page

If you use AMP technology to quickly load and adapt pages for mobile devices, then the first part of the code should be placed before the closing < /head> tag,

The second part of the code should be inserted immediately after the opening tag:

Even if you haven’t added a single tag to the container, we recommend publishing it immediately after installing the GTM code on your site. Otherwise, the container will cause a 404 error. This isn’t critical, however. If you’re tracking JavaScript errors using certain services such as TrackJS, then 404 errors will litter your reports. In order not to cause unnecessary stress for developers, it’s better to publish an empty container — it doesn’t harm anyone.

To publish a container, go to the Workspace tab in Tag Manager and click the Submit button in the upper right corner.

Select "Publish and Create Version". Since this is the first version of your container, the Version Description field can be left blank. Next, click Publish:

Done. The container has been published.

After adding the Tag Manager code to your site, you can check whether data is being transferred correctly using the Tag Assistant Companion extension. This is an addition to the Chrome browser that shows which tags of Google products are installed on your site and how they work.

Install the Tag Assistant Companion Extension: You install the Tag Assistant Companion extension from the Chrome Web Store to your Chrome browser. After installation, you click on the extension's icon in your browser toolbar to open its configuration panel.

Enable Tag Assistant in Google Tag Manager: Log into your GTM account and select the “preview” mode.

Now enter your website's URL, and enable it by selecting "Include debug signal in the URL."

Use the Tag Assistant Companion: Now the website will open on a new tab. After opening a website in a new browser tab, the extension activates to monitor and showcase data related to tags triggered through Google Tag Manager (GTM) on that specific page.

Analyze Tag Information: Once the monitoring process is complete, users can prompt the Tag Assistant Companion to display a summary of the fired tags along with any detected errors by issuing the command "finish." Click on a tag to see detailed information, such as the trigger that fired the tag and any issues detected.

Troubleshoot Errors: If the Tag Assistant Companion indicates there are errors or warnings with your tags, click on the specific tag to get detailed information about the issue. Use the information provided to troubleshoot and fix the issue within your GTM account.

Validate Changes: After making changes in GTM, return to your website and refresh the page. Open the Tag Assistant Companion again to validate that the changes you made resolved any issues. The status of the tags should now show as successful, with no errors or warnings.

Continue Monitoring: As you continue to work on your website and GTM container, use the Tag Assistant Companion regularly to monitor the performance of your tags and ensure they are firing as expected.

Step 1: Create an account with Google Analytics 4 if you don’t have one yet. We’ve described how to do this in detail in our guide to setting up your Google Analytics account.

Step 2: Install the GTM container code on your website.

Step 3: Create a GA4 tracking ID variable. To do this, on the Workspace tab, select Variables → User variables and click Create. In the Variable type field, select the Constant option from the list, and in the Value field, enter the Measurement ID of the Google Analytics 4 resource that you want to transfer data to.

Create a name for the variable — let’s say GA4 Measurement ID — and save it.

Not sure where you can find your resource ID? Open Google Analytics 4, go to the Admin → Property Details → Select Data collection → Data Streams → Web → Measurement ID which is the tracking ID in GA4.

Step 4: Create a tag that will send page view data to the Google Analytics 4 resource. To do this, go to the Tags section, click New, and select the Google tag configuration. In the Tag Configuration section, choose the Google tag option. Configure the tag by entering your Google tag ID in the designated field.

To prioritize the Google tag, choose the "All Pages" trigger under Triggering. This ensures the tag fires before other triggers when visitors load your website pages. In the configuration setting, specify the variable you created in step 3. Then select the embedded trigger All Pages and name and save the tag.

Step 5: Check if Google Tag Manager is working.

After implementing the GTM code, ensure its proper installation by either viewing the page source and locating the "gtm.js" code snippet, enabling preview and debug mode in GTM to verify the appearance of the debug panel upon website refresh, or utilizing the Tag Assistant extension to confirm the presence of Google Tag Manager when enabled.

Step 6: Publish the changes that you just made to your container. To do this, click the Submit button on the Workspace tab.

In the window that opens, specify the name of the new version of the container and click Publish.

Important! If you previously placed Google Analytics 4 on your site manually, you’ll need to delete it and, at the same time, publish the GMT container. Otherwise, data will be duplicated.

Step 6. Check if data is being transferred to Google Analytics 4. To do this, log in to your Google Analytics 4 account and open the Real-time — Overview report. This report should begin to receive data:

1. Problem: Tags work correctly in debug mode, but data isn’t received by Google Analytics.
2. Reason: An invalid tracking ID was specified in your Google Analytics 4 tag settings. Due to this, data isn’t sent to the right resource.
3. Solution: Enter a valid tracking ID. See step 3 for details.
4. Problem: When switching to Google Tag Manager, the number of sessions and users dramatically increases.
5. Reason: The GTM container has been published, but the manually installed Google Analytics code is still on the site. Data is being transmitted to Google Analytics 4 both through GTM and through the site code, so it’s duplicated.
6. Solution: Delete the Google Analytics 4 code on your site.
7. Problem: You’ve made changes to the Google Tag Manager container, but you don’t see them in debug mode.
8. Reason: After each change, you must update the preview. Make sure you’ve done that. Or you might have several workspaces, and the preview mode isn’t set for the one in which the changes were made.
9. Solution: Update the preview. Check which workspace is in the preview mode.

Many marketing experts just love Google Tag Manager. But why wouldn’t they? It provides an easy way to place a new code on a website. Still, what are the other benefits of GTM?

In this article, we share ideas for the application of custom tags in GTM. Custom HTML tags make it easier to make changes to the website. This doesn’t mean, of course, that you can do without developers, but it will take less time, and you can proactively manage the process.

With Google Tag Manager, you can:

1. Easily run A/B testing.
2. Place new elements (e.g., banners) on the website. You can efficiently manage the content and, what is even more attractive, set up triggers to fire tags under any condition. You can even use different banners for different target audiences. For example, you can show a promo banner only to visitors from Chicago.
3. Display different phone numbers depending on the user type, browser, or product category your users are browsing at the moment. For example, if a consultation on different product categories is provided by different call centers.
4. Quickly add scripts you get from the developers when the script can be run separately, and it is necessary to retain the ability to modify it quickly. For example, system scripts install cookies or clear local storage.

Not to mention the fact that there are various A/B testing services and online chats that you can add or set up using GTM.

To set up custom HTML tags, use GTM to place a script on the website. To create a custom tag, sign in to your account, choose Tags, and click New. When choosing the tag type, click Custom HTML tag (you might have done this before when adding a partner’s script to the website).

Now, you can place your own script in the editor window and press Continue.

The next thing to pay attention to is choosing Fire on conditions.

This step is useful in that you can configure any condition to fire your tag (well, within reason, anyway...). For example, you can activate tags on certain product category pages, certain users (on the grounds of the city, authorization type, or the number of orders), or even target those users who have found your website via Google search. Note that the code will also be placed on every new page that appears on the website after the changes are made and fall under the conditions.

Or, for example, you want a discount banner to be seen by only those customers who have already made an order on the site. And by good fortune (or thanks to the sophisticated metrics system), the needed criteria (that the user has already made an order) is sent to Google Analytics 4. Just create the option that would work for you, and you are all set.

One thing that should be kept in mind when using custom HTML tags is to always test the changes in Preview and Debug mode. This will help you avoid many problems if something goes wrong.

Some possible difficulties you may face when adding custom HTML tags to the website:

1. Layout can be broken on some pages or in some browsers;
2. JS errors may occur due to the use of global variables or attempts to use non-existent ones;
3. New scripts can delay the loading of the main content of the webpage or interfere with the other elements of the website.

If you have any of the above problems, it’s better than likely that you need to edit the script and possibly even ask for advice from a fellow developer.

Google Tag Manager, in conjunction with Google Analytics 4, gives you a flexible analytics system and allows you to customize the collection of almost any data from your site. We’ve prepared a selection of articles on this topic. Find out what other problems you can solve using GTM.

1. How can you handle repeat transactions in Google Analytics 4? — Learn the reasons for repeat transactions and read our guide on how to set up GTM to avoid duplicate data.
2. The site is not enough: a guide to mobile app analytics — Read about how to track the installation of mobile applications using Google Tag Manager.
3. A comprehensive guide to enhanced ecommerce tracking in Google Analytics 4 — Set Enhanced Ecommerce in Google Analytics with the help of GTM.
4. How to set up dynamic remarketing in Google Ads via Google Tag Manager — Learn how to do this with a step-by-step guide.

We also have a webinar called Expert Tips and Techniques for Using Google Tag Manager, in which we clearly explain how to:

1. Track JavaScript errors that prevent your site visitors from doing what they want to;
2. Track scroll depth to determine the effectiveness of sections and authors, and to track the effectiveness of pages that take up multiple screens;
3. Prevent duplicate transactions in Google Analytics 4;
4. Use tag Sequencing, Workspaces, Approvals, and other useful options in GTM.

Add the new tool to your kit to make changes to the site quickly so that you can manage the content more flexibly using different conditions to fire the tags.

Just use common sense, and don’t try using GTM as a full-fledged tool for A/B testing or personalization. There are more convenient solutions that are specifically designed for these purposes.