How to install and set up Google Tag Manager on a WordPress site?

04 April 2020
In the previous article, I explained how to set up Google Analytics for your WordPress site. Today, let's focus on finding out what is Google Tag Manager and how it works, as well as add it to your WordPress site.

What is Google Tag Manager?

Google Tag Manager (GTM) is a system that allows managing pieces of tracking code (called tags) through its interface without the need to write code. You can use it to completely remove other snippets of code you have previously added to the <body> of your site. Instead, place them all into a single GTM container.
So, the core benefits the tool brings to your professional life are the following:
It reduces the number of tags on your site, by replacing them with the GTM one, and automatically increases your website loading speed.
It creates the structure of tracking systems you use that is easy to access and manage.
It eliminates the risk of crashing your resource because of incorrectly embedded into the website tags.
It cancels the need to learn any coding language to manage tags on your site.
It allows seamless adding Google Analytics, Google Ads and other system's tags to your site through a single GTM interface.

What elements does Google Tag Manager consist of?

To ensure GTM does what it told us, it relies on the following components: tags, triggers, variables and the GTM container.

There also exists such an element as Data Layer which I am planning to cover in a separate article.

Let's dive deeper into every item to understand what they are and why it is essential for us to know them before we start using the tool.

GTM Tags Explained

Generally speaking, tags are snippets of code created by different system providers for users to be able to easily integrate them into their sites. Tags are responsible for sending data from a web resource straight to the mother-system. Besides Google native products, like Google Analytics, Google ads, etc. GTM also supports a number of third-party systems (here you may check out the full list of supported apps).
Third-party systems which GTM supports
So, users don't have to embed all these tags into sites, but add them through the GTM interface and so - through a single GTM tag.

GTM Triggers Explained

A trigger includes a certain condition which should set off a specific tag "to fire" (to work). In the world of Google Analytics these conditions are represented by events that users may generate on a web resource.

Here is are some events that one can create in GTM:

  • Button click
  • Page view
  • Page scroll
  • Submission of a form
  • Other type of an event that a user can create

In Google Tag Manager triggers are called to monitor whether an event happened, and when it did - make sure that the tag (the condition of which has been met) fires.

GTM Variables Explained

GTM variables are pieces of data that can be categorized into types and have a name, and that (which is super-important!) you can allocate some value to. The value of variables may change, but the name will not.

The can be:
- Variables as part of triggers: to determine the events which need to help triggers call tags to fire.
For instance:
  • Event: Page view
  • Trigger type: Page view
  • Fire on: Some Pages
  • Fire the tag when url variable
  • Contains this value:

- Variables as part of tags: to determine dynamic values.
For instance: to record the transaction value and the list of purchased products, and/or send data (product ID, product price, etc.) to a tag.

GTM includes a set of in-built variables, as well as allows users to create custom ones.

GTM Container Explained

The GTM container is a so-called basket for all tags, triggers and its components available on your site. It is the code of container that is embedded into a web resource to make sure triggers can perform their job and monitor user activity, and send back signals to tags when it's time for them to record some information and send it back to its home system (be it Google Analytics or any other system supported by GTM).

Every Tag Manager account should have at least one container that is tied to one domain. However, a container can be used for cross-domain tracking as well.

How to create a Google Tag Manager account?

Follow this step-by-step guide to create a Google Tag Manager account:
Navigate to Click Create Account.
Note: I would suggest to use the same Google Account as you used when registering Google Analytics.
Google Tag Manager: create an account
Add Account Name, Country and give your Container a name.
Google Tag Manager: account and container setup
Then pick the target platform, I chose Web, and click Create.
Google Tag Manager: container setup
Review the Terms of Service Agreement, accept the Data Processing Terms and click Yes.
Google Tag Manager: legal documents
After that GTM will give you two code snippets which have to be pasted:
  • As high as possible in the <head> of the page
  • Immediately after the opening <body> tag
Google Tag Manager: legal documents
Don't close this tab. Open a new one and log in to your WordPress account.

How to add Google Tag Manager to WordPress?

Note: in order to be able to set up a Google Tag Manager tag, you will need to upgrade to the Business plan (25$ per month, billed annually) since it supports installation of Plugins that are required to embed it. Unfortunately, at this moment there is no other way you can insert the code into your site.
Go to Tools => Plugins and a new page will load.
Click Add new and search for the "metronet" keyword.
In the search result, you will see Metronet Tag Manager, press Install.
GTM setup on WordPress: Metronet Tag Manager
Once the Metronet Tag Manager plugin, navigate to the neighbour tag where you left the GTM interface open, copy the two snippets of code. Then go back to the WordPress interface and paste them into two separate fields as shown below. Then Save the changes.
GTM setup on WordPress: Metronet Tag Manager
Note: one can also use other plugins to embed the GTM code. For example, in the WordPress blog, as one of the possible options, they suggest using Headers and Footers plugin.

How to configure a Google Analytics Tag in GTM?

First of all, go to your GTM container.
GA tag setup in GTM: go to the container
Note: before we proceed, go to Variables and select them all. I do it now to save time in the future if I ever need one of those. If you don't want to select all variables, make sure you select at least: Clicks, Forms, Videos, Scrolling, Visibility.
GTM Variables 1
GTM Variables 2
Now let's get back to setting up Google Analytics tag in GTM. First of all, we will create a GA user-defined variable.
Revert to Variables, scroll down to find user-defined variables, click New.
GTM: create GA variable
GTM: create a GA variable
Name your variable, and click Choose a variable type to start the Variable set-up.
GTM: create a GA variable
Then choose Google Analytics settings variable type.
GTM: choose GA variable type
After that a new window will open. Here paste your Google Analytics Tracking ID (just go to Google Analytics => Admin => Property Settings) into the Tracking ID field.
  • Leave the Cookie Domain field in a default mode - auto.
  • Go to the Advertising section (under more Settings) and tick the box next to the Enable Display Advertising Features.
  • Click Save.
  • That's it, now your Google Analytics user-defined variable is ready!
GTM: GA variable configuration
Now choose Tags in the GTM container menu on the left to start creating a Google Analytics tag that will fire on all pages of our site. Click New.
GTM: create a GA tag
Name your tag, click Choose a tag type to begin setting up GA tag. Then pick Google Analytics: Universal Analytics.
GA tag in GTM: choose a tag type
Complete the below form according to these instructions:
  • Track type: pageview
  • Google Analytics Settings: from the drop-down list, pick your newly created Google Analytics user-defined variable.
Then scroll down and click Choose a trigger to make this tag fire.
GTM GA tag configuration
Choose All Pages and click Save.
Congratulations, you have just completed setting up a Google Analytics tag!
Now move on to test whether your tag was configured correctly or not; and if yes - publishing it on your WordPress site.
GTM GA tag: choose a trigger

GTM Preview Mode and publishing the GA tag on your WordPress site

To test whether a GA tag configured through GTM is working properly, click the Preview button in the right corner of your screen.
GTM preview mode
The below message confirms that you have entered the preview mode, which means that your GA tag is not published on your site yet. This preview mode will help us test whether we have configured GA correctly and whether it will fire on your site.
GTM preview mode
Open your site that you used to configure GTM and GA tag in the next tab of the same browser as your GTM.

In the bottom of your screen you will see a little window with the summary of tags which fired on this web page. If you have many pages on your site, you can go through them one by one to check whether Google Analytics tag has fired on all of them.
GTM preview mode: testing on your site
After that go back to the GTM interface, leave the preview mode and then click Submit to publish your GA tag on your site.
GTM: submitting your current version for publishing
Add your version name and details so that you will differentiate them in the future. Click Publish.
GTM: adding information to the version you publish
After that you will see this page with the details you have entered on the previous page.
GTM: review version details you've added

Testing if GA tag is working on your site using Google Tag Assistant?

There are several ways to test whether GA and GTM tags work properly on your site. You can start exploring the two approaches to testing if Google Analytics works on your site, which I described in another article.

In this blog post, I am going to use Google Tag Assistant plugin for this purpose.
Google Tag Assistant is a Chrome plugin that lets you view the tags you added to your site and test whether they fire according to the conditions you set for them. It is available free of charge.
Install the Google Tag Assistant plugin for Chrome. Open the web page you want to perform the testing on.
Find the plugin in the right side of the address bar, click enable and then reload the page.
Google Tag Assistant in action
Once the plugin changes the color, click on it and you'll see the list of tags it could detect on your web resource.
Google Tag Assistant in action

Wrapping up

That's all I wanted to tell you in this article. If you have any questions, feel free to add them in the comments below! More blog posts soon to come...
comments powered by HyperComments
Made on