How to Install Google Tag Manager on Your Site

4
297
Downloads

Google Tag Manager (GTM) is a free service that greatly simplifies working with tags on websites and in mobile applications. With GTM, you can easily change the code on pages, add new fragments, and integrate your site with analytical systems, advertising, and other services.

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. You can learn more about Google Tag Manager and how it works in conjunction with Google Analytics in our article. If you’re already familiar with this, let’s not waste any time and proceed to installing GTM.

In short, to install Google Tag Manager you’ll need to:

  • create an account and container in Google Tag Manager;
  • install the Google Tag Manager code on your site;
  • publish the container;
  • check Google Tag Manager.

1. Create an account and container in 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 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 AdministrationInstall Google Tag Manager:

2. Install the Google Tag Manager code on your site

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 <head> tag:

This is because the higher the position of the first fragment, the faster it will load. If you insert it into the <body> 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 <body> 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:

And the second part of the code should be inserted immediately after the opening <body> tag:

3. Publish the container

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.

4. Check out Google Tag Manager

After adding the Tag Manager code to your site, you can check whether data is being transferred correctly using the special Google Tag Assistant 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.

After you download and install the add-on, you’ll see this icon in your Chrome toolbar . Click on it and select which system tags you want to check and on which pages. Click Done.

Then go to the page you want to check and click on the Tag Assistant icon. To activate the extension, click Enable:

Refresh the current page and Tag Assistant will show which tags are installed on the page and how they’re working. A green icon indicates that the data is being transmitted without any complaints, blue indicates that there are no critical issues, and red signals serious problems:

If you click on a specific tag, you’ll see possible causes of the error and tips on how to fix it:

More information about Tag Assistant can be found in Google Help.

A couple more tips

When installing GTM code on your site, ask your developer to add the Google Optimize snippet at the same time. This is a good idea even if you’re not going to experiment with the content on your site right at the moment. Whenever you want to conduct an A/B test, everything will be ready.

This code snippet is needed to load the Google Optimize container asynchronously and not show the original page until the container loads. With the Optimize snippet, users won’t see the original content of the page until the page with the changes in your test is loaded.

When you transfer tags that you’ve manually injected into Google Tag Manager, don’t forget to remove them from the code on the site so that the data won’t be duplicated. This is an important point.

What’s next

After installing the code on your site, you need to add and configure tags and variables in the Tag Manager interface. To learn how to do this, see the article What is Google Tag Manager and how to set up Google Analytics with it or the webinar One step ahead: techniques and subtleties of working with Google Tag Manager.

P.S. We’ve prepared a checklist of 20 steps that must be performed by marketing analysts in order to make decisions based on correct and complete data. Fill out the form and we’ll email you the checklist.

You might also like