Table of contents
- What is Google Tag Manager?
- Tag Manager pros and cons
- Google Tag Manager structure and terms
- How to install Google Tag Manager on your site
- How to set up Google Analytics using GTM
- Declare independence from developers with custom HTML tags in Google Tag Manager
- Useful links and example of tasks you can solve with Tag Manager
- To sum up
What is Google Tag Manager and How to Install GTM on Your Site
Liubov Zhovtonizhko, Creative Writer @ OWOX
Denis Lisogorja, Web analyst @ OWOX
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.
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.
What is Google Tag Manager?
With Tag Manager Account, you can:
- set up data transmission to Google Analytics, AppsFlyer, and other analytical systems
- place Google Ads, DoubleClick, Facebook, and other remarketing tags on your site
- place custom HTML scripts on your site to display banners, conduct A/B testing, and so on
- quickly edit tags.
Who is Google Tag Manager designed for?
- Web analysts and internet marketers — to implement external services themselves, create effective end-to-end analytics systems, and track important KPIs
- Specialists in contextual advertising and SEO — for remarketing, evaluating ad campaign performance, and setting goals
- Owners of small sites — to manage web analytics without a developer’s help
- Online marketing agencies — to work quickly and effectively with client accounts
Tag Manager pros and cons
In addition to the features described above, Tag Manager has additional benefits to simplify your life and help you save time and money.
- It’s completely free.
- 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.
- It improves the speed of your site by shortening code so pages load faster.
- It has a check and debug mode. You can test how tags operate before adding them to your site.
- 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 code and precisely when.
- 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.
- It’s easy to verify your site ownership in Search Console.
- 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:
- 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.
- GTM doesn’t offer online support or reports.
Google Tag Manager structure and terms
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 code 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:
- Page view — activate the tag when the page is just starting to load or when it has loaded completely
- Click — set a trigger for clicks on any element or link
- Interaction with users — view video, page view depth, view site elements, form submission
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 active a variable:
How to install Google Tag Manager on your 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 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 Administration → Install 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 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
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.
How to set up Google Analytics using GTM
Step 1. Create an account with Google Analytics 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 page view variable. To do this, on the Workspace tab, select Variables → User variables and click Create. In the Variable type field, select the Analytics Settings option from the drop-down list, and in the Tracking ID field, enter the ID of your Google Analytics resource that you want to transfer data to.
Create a name for the variable — let’s say GUA Pageview — and save it.
Not sure where you can find your resource ID? Open Google Analytics, go to the Admin tab, select Resource Settings, and find the tracking ID:
Step 4. Create a tag that will send page view data to the Google Analytics resource. To do this, go to the Tags section, click Create, and select the Google Analytics — Universal Analytics tag type from the list. Specify Page view in the Tracking Type field, and in the Analytics Settings field, specify the variable you created in step 3. Then select the embedded trigger All Pages and name and save the tag.
Step 5. 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 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. To do this, log in to your Google Analytics account and open the Real-time — Overview report. This report should begin to receive data:
Possible problems when working with GTM
- Problem: Tags work correctly in debug mode but data isn’t received by Google Analytics.
- Reason: An invalid tracking ID was specified in your Google Analytics tag settings. Due to this, data isn’t sent to the right resource.
- Solution: Enter a valid tracking ID. See step 3 for details.
- Problem: When switching to Google Tag Manager, the number of sessions and users dramatically increases.
- 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 both through GTM and through the site code, so it’s duplicated.
- Solution: Delete the Google Analytics code on your site.
- Problem: You’ve made changes to the Google Tag Manager container, but you don’t see them in debug mode.
- 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.
- Solution: Update the preview. Check which workspace is in the preview mode.
Declare independence from developers with custom HTML tags in Google Tag Manager
Many marketing experts just love Google Tag Manager. But, why wouldn’t they? It provides such 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 really do without developers, but it will take less time and you can proactively manage the process.
With Google Tag Manager, you can:
- Easily run A/B testing.
- 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 the visitors from Chicago.
- Display different phone numbers depending on the user type, browser or the product category your users are browsing at the moment. For example, if a consultation on different product categories is provided by different call centers.
- Quickly add scripts you get from the developers, when the script can be run separately and it is necessary to retain the ability to quickly modify it. For example, system scripts to install cookie or to 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.
How to set up custom tags
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 (Well, within reason, anyway...) condition to fire your tag. 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 falls 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 actually thanks to the sophisticated metrics system) the needed criteria (that the user has already made an order) is sent to Google Analytics. 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 — always test the changes in Preview and Debug mode. This will help you avoid many problems if something goes horribly wrong.
Some possible difficulties you may face when adding custom HTML tags to the website:
- Layout can be broken on some pages or in some browsers;
- JS-errors may occur due to the use of global variables or attempts to use non-existent ones;
- 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.
Useful links and example of tasks you can solve with Tag Manager
Google Tag Manager in conjunction with Google Analytics 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.
- How can you handle repeat transactions in Google Analytics? — Learn the reasons for repeat transactions and read our guide on how to set up GTM to avoid duplicate data.
- 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.
- A comprehensive guide to enhanced ecommerce tracking in Google Analytics — Set Enhanced Ecommerce in Google Analytics with the help of GTM.
- How to set up dynamic remarketing in Google AdWords 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:
- track scroll depth to determine the effectiveness of sections and authors and to track the effectiveness of pages that take up multiple screens;
- prevent duplicate transactions in Google Analytics;
- use Tag Sequencing, Workspaces, Approvals, and other useful options in GTM.
Fill out the form below and we’ll send you a recording of our webinar presentation on expert tips and techniques for using Google Tag Manager by email.
To sum up
Add the new tool to your kit to quickly make changes to the site 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.