Google Tag Manager Tutorial for WordPress (or other CMS)

What is Google Tag Manager?

Google Tag Manager (GTM from now on) is a free tool that allows you to manage and deploy marketing web tags.

These tags are nothing more than code snippets or tracking pixels that are inserted into your website (or mobile app) without having to massively modify the source code.

What is it for?

Google Tag Manager is key for any marketer who wants to keep track of how visitors use their website, substantially extending the information offered by the Analytics suite.

Use Tag Manager for any Tag Manager project SEO consulting is key to being able to get numbers on a client’s web interactions (and to see the growth of those interactions over time), and for that client to have concrete ROI figures on what SEO is doing for their business.

Rodanet.com

In this tutorial we will show you how to install and configure Google Tag Manager on a WordPress based website (as it is one of the most popular CMSs and one in which it is very common to work with) SEO for WordPress) so that you can start to have concrete numbers and figures about the interactions that users make on your website.

Short introduction to Google Tag Manager

When did it appear? What basic elements are key to its operation?

Is Google Tag Manager Google Analytics?

 

GTM is an independent tool from GA, but both tools integrate with each other, and complement each other to give maximum information about the use of a website by its users.

Google Analytics appeared in 2005, following Google’s purchase of Urchin Analytics and its web analytics software, a tool that Google used to build the current web analytics suite. Google Tag Manager first appeared in 2012, 7 years after the official release of Google Analytics, as a tracking tag management tool.

Curiosity: the heritage and DNA of the now defunct “Urchin Analytics” is still present in the current Google Analytics: all account ids start with UA+code (UA from Urchin Analytics).

Rodanet.com

---

Google Tag Manager elements

There are three main elements in Google Tag Manager:

1. Tags: Javascript fragments embedded in the web code (also called tracking pixels).
2. Triggers: These are what tell GTM when or how to execute a tag.
3. Variables: Additional information that GTM may require for the label and the activator to function properly.

The following is a brief description of each of these elements.

What are labels?

Tags are code snippets or tracking pixels from third-party tools or Google’s own tools (such as Analytics). These tags tell Google Tag Manager what to do.

Some examples of tags that you will find available by default in Google Tag Manager are:

• Google Analytics Universal Tracking Code (this will be the most used in this tutorial)
• Adwords remarketing code
• Adwords conversion tracking code
• Heatmap tracking code (such as Hotjar, CrazyEgg, etc.)
• Facebook Pixels

What are activators?

Triggers are a way to activate or execute the tag that you have previously configured. Triggers tell Tag Manager when to do what you want it to do and activate the tags:

• Do you want to activate tags when visiting a page?
• When the user clicks on a link?
• When do you touch the “phone call” button?

What are variables?

Variables are additional information that GTM may need for the tag and its activation to work. Here are some examples of different variables:

• Click classes
• Click target
• Specific URL
• Event

Having done the introduction let’s see how you can start tracking actions with Google Tag Manager in your WordPress (or your client’s).

---

Setting up GTM in WordPress

The first thing to do is to add the tracking script to the website. However, it is common that many customers have it installed on site but do not remember it because they simply do not use it.

Could it be that GTM is already installed on the site?

If you are working for a client it is very important to check that they do not already have GTM installed. In the case of WordPress there are plugins or themes that offer the option to add the GTM tracking code, so it is not uncommon to find the tag already.

In any case, to see in a matter of seconds if the client already has GTM open any page of the site, do a Ctrl + U (see source code) and then search in the source code using a Ctrl + F for the word “GTM”:

• If it does not appear, you can continue with the tutorial
• If it already appears, you can skip to the “Configuration” step.

Create a GTM account

 

The easiest way to get a GTM id is through your Google Analytics account. Simply log into GTM with your analytics account by following the steps below:

1. Login to GTM with the same email account you have for Analytics:
   https://www.google.com/intl/es/tagmanager/
   
2. Fill in all the fields required for the initial configuration:
   • Name of the web site
   • Country (Spain for our example)
   • Domain option without / or protocol
   • Web option (no app)
3. Accept the terms of use and you will have access to the GTM panel and an id for the site.

Paste GTM tag in WordPress (with or without plugin)

We use the Google Tag Manager plugin for WordPress, although you can insert the tracking tags by modifying the header.php file of your WordPress installation.

Without plugin

If you want to do it manually you can insert the GTM snippet by modifying the header.php file and inserting the code in the part of <head> and <body> as appropriate.

• The two snippets (for the part that should go in the <head> and <body>) you will find them in the GTM panel at Admin > Install GTM
• As for the header.php file, this file is found by default in all WordPress in the wp-content/themes/name-of-your-theme/header.php directory.

Pay attention not to break the code and to theme updates (which can overwrite the header.php file and therefore can delete the snippet you insert). For these cases it would be advisable to use a child theme.

Rodanet.com

If you don’t want to complicate your life or you don’t have experience modifying WordPress core files, insert GTM in the website via plugin.

With plugin

To insert the GTM tag in the code through the plugin you must do:

1. Download, upload and activate Thomas Geiger GTM plugin
   • Click here to download GTM plugin for WordPress
2. Configure the plugin that is in the WordPress options panel (left of the screen) go to Settings > Google Tag Manager
3. Insert the project id in the corresponding box
4. In the plugin options select “footer option” and save the changes.

Now we have GTM ready to start tracking actions in our WordPress. The next step is to configure GTM with the appropriate variables, triggers and tags to track the desired actions. Let’s get to it.

---

Basic GTM configuration

Let’s see how to configure the three basic elements of the tool (variables, triggers, tags) so that GTM can track user activity on our site.

The following sections are already worked from the GTM panel.

Configuration of click variables

The first step is to configure the variables we want to track. We will start with the clicks we receive on our website.

To do this we must go to Variables > Configure

 

The first thing we will do is to configure the tracking of different types of clicks. To do so, we select all those that appear in the “Click” section and leave the rest as they are:

Once this is done we can close and create a new variable.

Creation of the variable to track these clicks

Once we have the variables configured (previous section) we are going to create these variables using the tags of our Google Analytics account as a base.

To do so, go back to the variables section and click on “New” at the bottom right:

 

Next, the data to create this variable will be:

• Name: we write a name to identify this variable, we simply write “Analytics”.
• Click on the pencil icon to edit the options of the variable
• We go to Utilities > Analytics Settings and enter our Google Analytics ID, which starts with UA (type UA-XXXXXXXX). The other options are left unchanged

 

Once all the steps have been completed we have the variable for click tracking configured and created.

For Google Analytics 4

Once the variables have been configured, there is no need to create a new variable for Analytics 4.

We will add Google Analytics 4 in the tags. We see it below in the labels section.

Setting up triggers with Analytics Universal and Analytics 4

Once the basic GTM variables have been configured, we must define the triggers, which as we have seen in the introduction are the “rules” that tell GTM when an action defined in a variable is taken into account for counting (in other words: when a variable is activated). In this case the process is exactly the same for Analytics Universal and Analytics 4.

To create an activator go back to the GTM main menu, go to the Activators section > New.

We will define the name of the trigger according to the action to be tracked. For the following examples we will configure several triggers that will count all the buttons in the URL:

• A telephone number
• An email
• A Google Maps location ( how to get there type buttons)
• A form sent
  • With and without “Thank you for contacting us” page

Trigger for “Call by Phone” button/URL

We will define the name of the trigger according to the action to be tracked. For this example we will set up a trigger that will count all links that have a phone number in the URL (whose format is therefore tel:+number).

We will set the name “Telephone” and define the trigger as follows:

1. Trigger Type: Click – Links Only
2. Check“Wait for Tags” and“Check Validation“.
3. The conditions for the activator are:
   • Page URL > matches the regular expression .*
   • The activator is triggered at > Some clicks on links
   • Click URL > contains tel:

Take a look at the image below for a better understanding:

Trigger for “Send Email” button/URL

The configuration for this type of buttons or URL’s is exactly the same as in the case of the phone, (click here to see the activator configuration) but to track email buttons you will have to change what is contained in the URL.

In the configuration for the email trigger you should only change: Click URL > contains > mailto:

Trigger for “How to get there” button/URL

The configuration for this type of buttons or URL’s is exactly the same as in the case of the phone, (click here to see the activator configuration) but to track how to get there buttons that lead to Google Maps you will have to change what is contained in the URL and adapt it.

In the activator configuration for URL’s that point to Google Maps you only need to change: Click URL > contains > /maps/ *

* Note: if the button does not point to Google Maps but to another Maps provider such as Apple Maps or Bing Maps, the URL may not contain the /maps/ base and therefore you will have to adapt the trigger configuration to that URL.

Activator for form button/URL WITHOUT thank-you page

The activators for forms differ a little in terms of configuration to those we have seen before (telephone, email…).

We must therefore create a new activator but this time configure it differently from the four previous ones:

1. Trigger type: Element visibility
2. Selection method: CSS Selector

In the case of contact forms, a confirmation message appears when the form is sent, such as “Message sent. Thank you very much”. This will be the element we will use in this activator to measure interactions.

In the web where we want to track the contact forms:

1. We will send a test message
2. We will wait for the confirmation sentence to appear.
3. Right click on the phrase and click on Inspect.
4. Within the inspection console, again right click on the item
5. Select the Copy option > Copy Selector

Once the CSS Selector is copied we go back to the Tag Manager control panel and continue with the trigger configuration.

Paste the CSS Selector into the Element Selector field, removing everything before the word “form”. It should always look like this: form > div… This way we will be able to track all the forms on the site and not just one specific one.

 

We must then select:

• When to run the trigger: Every time an item appears on the screen
• Percentage left as default or 50%.
• We check React to DOM changes to avoid losing tracings due to corrections in the source code.
• We leave the rest of the options as they are and save changes

Trigger for form button/URL WITH thank-you page

If we have a form that, instead of displaying the shipping confirmation message, redirects to a shipping confirmation page, the trigger will have to be configured differently again: we will use the confirmation page as the element that triggers the trigger.

In the trigger options select Some pages viewed and then Page URL > Contains > URL-of-the-page-in-question

Take a look at the following image for a better understanding:

Label configuration

As a last step, we must configure the labels so that the information collected by the variables and triggers is “dumped” into them.

For Google Analytics Universal

Important:

1. We will have to create as many labels as triggers and variables we have set up.
2. The name of each of the labels must be in accordance with the corresponding activator and variable.

For Google Analytics 4

We add a new generic tag called “Analytics 4”.

In the tag type, we choose “Google Analytics: GA4 Settings”.

In the measurement ID we add the customer’s tracking code, which will start with G-.

We leave everything the same and move on to the activation part.

Here we add all the triggers we have previously created (e-mail, telephone, forms, etc.).

Save and the configuration should look like this:

Label for clicks on “call by phone” link

When adding a new tag we must select the Google Analytics tag : Universal Analytics

 

The configuration of this label will be as follows:

• Type of follow-up: Event
• Category: Call
• Action: Click Call
• Label: click on the “+” symbol and select {{Page Path}}.
• Hit without interaction: we leave the default setting as “False”.
• In Analytics Settings: select {{Analytics}}

Take a look at the following image for a better understanding:

To finish, we must move to the bottom section, where it says “Activation”, click on the pencil to edit and select the corresponding Activator (in this case, “Phone”).

Phone tag configuration for Google Analytics 4

We create a new label and rename it “phone”.
In the configuration, we choose the tag type “Google Analytics: GA4 event”.

In the configuration tag section, we select the generic tag we added earlier with all the triggers called “Analytics 4.”

Next, we add the name of the event, in this case “click_phone”.

And we add the event parameters. It will be {{Page Path}} for both the parameter name and the value.

Once this is done, we move on to activation and add the phone activator created earlier.

Save the configuration and it will look like this:

For the following tags, the same changes should be made for Google Analytics 4.

Tag for clicks on “send email” link

For the sent email count label we must follow the same configuration process as for the telephone label, making the appropriate changes:

• Category name: E-mail
• Action: Click e-mail
• Change activation to e-mail activation
• For Google Analytics 4 we repeat the same process, just change: name: click_email and change activation to e-mail.

Label for clicks on the “How to get there” link.

For the click count tag in links to Google Maps we will have to follow the same process of configuration of the telephone tag making the corresponding changes:

• Category name: How to get there
• Action: Click how to get there
• Change Activation to How to get there
• For Google Analytics 4 we repeat the same process, we only change: name: click_llegar and change activation to how to get there.

Form Click Tag

For the click count tag in links to Google Maps we must follow the same process of configuration of the phone tag making the corresponding changes:

• Category name: Contact
• Action: Form submission
• Change activation to form activation
• For Google Analytics 4 we repeat the same process, just change: name: contact_form and change activation to form.

---

GTM final performance checks

The last step before moving everything to the real environment will be to check that all the previous configurations have been done correctly. For this purpose, Google Tag Manager has a “Preview” option, which allows us to know if the events are being effectively tracked.

First we activate the “Preview” in GTM:

We go to the website in question in the same session and the activity summary should appear:

Then we open the Google Analytics account, (where you can see the count of the events configured in Tag Manager), and go to Real Time > Events

Again on the client’s website in GTM Preview mode we do some of the actions configured in Tag Manager (call buttons, email, whatever…) and check that the platform detects it correctly:

This action should also appear in Analytics, in Real Time > Events. We will have to click on the event and check that the names that we have given to the events and the URL from where we have done the action are correct.

The last step is to perform this check for each of the configured events.

Note: when checking that the events are registered in Analytics correctly, make sure that you are not inside an event, and the action appears but it is not the event you want to check. In other words: close the event category after each check.

Last step: move GTM to real environment

If the above checks have been successful, we should move GTM to the real working environment, which is called “Publish”.

We exit the preview:

Click on “Send”:

 

We describe the different events we have configured (we use the date in the name and put the events in the name) and click on “Publish”.

Final conclusions and why use GTM for your projects now

Analytics and Tag Manager are the two basic tools that you should implement on any website to know how an online project is working. But the difference between the two is the type of information they offer you.

If ranking a website were a soccer match, Analytics would be the scoreboard and Tag Manager would be the statistics of passes and assists for each of the players. Analyzing the data from both tools helps you make the necessary changes in your team week by week and month by month, so that in the long run you can win the league.

As we said at the beginning of this tutorial, GTM allows you to measure if customers are reaching your target website (either via contact form, by calling…) with 100% objective numbers, as it happened in this success story of a website that went from 50 to 700 leads per month.

GTM allows you to justify your work on your own project or for any client.