How to Setup and Configure GTM4WP Plugin on WordPress
Looker Studio Masterclass, my advanced & premium course, is now publicly available. 100% for free!
No signups, upsell funnels, order bumps, or nonsense!
Access here >>
Ahmad Kanani
Introduction
WordPress is the most popular CMS that is being used worldwide and GTM4WP plugin by Thomas Geiger is one of the most reliable and feature rich plugins for implementing the Google Tag Manager container and pushing useful data into the data layer.
In this tutorial, I am going to show you how to install Google Tag Manager on WordPress using the free Google Tag Manager For WordPress plugin by Tamas Giger.
1. Setting Up the Container
Let’s start by creating a new account on Google Tag Manager. Click Create Account.
Enter an Account Name and select your Country. Next, choose a Container name and choose Web as the Target platform. In the end, click Create.
Then, accept the Google Tag Manager Terms of Service Agreement and click Yes.
Next, let’s create a new Google Analytics tag by clicking Tags > New.
Call it GA - Pageview and click Tag Configuration.
Choose Google Analytics: Universal Analytics.
Select Pageview as the Track Type. In this tutorial, we are not going to create a Google Analytics Settings variable so let’s click Enable overriding settings in this tag.
In order to insert the Tracking ID, head back to Google Analytics, click Admin > Property Settings and copy the value.
Now, click Triggering, choose All Pages, and save the tag.
Now click Submit, enter Google Analytics Pageview for the Version Name, and click Publish.
Our container is now ready.
2. Installing and Configuring the Plugin
Now head over to the admin panel of your WordPress website, click Plugins and then Add New.
Then search for Google Tag Manager and install and activate the plugin as shown below.
Now we should set up the plugin by clicking Settings.
The first thing we need is our Google Tag Manager Container ID.
Open Google Tag Manager, click Admin > Install Google Tag Manager.
We just need the GTM ID, not the whole code. Copy the ID from the box.
Then paste the code in the plugin’s settings, and click Save Changes.
As you can see, there are four options available for Container code placement. These placements decide where to put the <noscript> part of the container code which is only added to the <body>. It only runs in rare cases when a browser does not support JavaScript. The main GTM container code will be put in the <head> section of all our pages anyways.
Now let’s make sure that the Google Tag Manager container has been added to this website.
Get back to the Google Tag Manager Workspace and click Preview to refresh the container.
After refreshing the website, we can see that the container has been added to our website and that the Google Analytics tag fires.
We can also open the Google Analytics interface and click Real Time > Overview to verify that it is receiving the data.
We can also check other information, such as Locations, Traffic Sources, Content, and so on.
3. Setting Up the Plugin to Send Useful Data Into the Data Layer
The plugin can not only be sued to add Google Tag Manager to our WooCommerce WordPress website, but it can also be used to add more useful information to the data layer.
Let’s take a look at the Google Tag Manager preview window. We can see a Message event in the Summary section alongside the default GTM events. Having “Message” as the event name means that there is no name associated with the event key when the data layer push has happened.
If we select the Message event and click Data Layer, we can see that the plugin has added three pieces of information to it.
We can likewise use the plugin to provide us more information in the data layer.
Basic Data → Posts
In Basic data tab, we can decide what kind of information this plugin pushes into the data layer.
These options include Post Type, Category, Tags, Author ID, etc. You can enable all or some of this information based on your preferences. Let’s check all of these options and refresh the website again.
Now we can see the Message event as before, but clicking Data Layer shows that much more information has been pushed into the data layer
Basic Data → Visitors
We can also use other tabs under Basic data in the plugin and choose more information to be pushed into the data layer. By clicking Visitors, we will be able to enable Logged in status, Logged in user role, and so on to be pushed into the data layer. Similarly, let’s check all of them and refresh the website to see new information.
Now we can see new information related to the website user inside the data layer.
Before we continue covering other features of the plugin, let’s see how we can access and use the information in the data layer from within Google Tag Manager.
We can either send this information to marketing and analytics tools or use them to make decisions on which tags to fire.
Here, I would like to use the visitorType information to avoid tracking the page views done by website administrators. This way we can improve the quality of our data by only tracking the page views done by website users.
To access the information in the data layer, we need to use Variables in Google Tag Manager. Click Variables > New.
Name it DLV - visitorType and click Variable Configuration.
Select Data Layer Variable.
Enter the Data Layer Variable Name, which is visitorType in here, and click Save.
Refresh the container by either clicking Refresh or Preview.
Refresh the website again, click Message and then navigate to the Variables tab. Now we can see the DLV - visitorType variable in the list.
In simple words, when the Message event happens, Google Tag Manager wants to evaluate the value of the DLV - visitorType variable. It goes to the data layer, looks for the key: visitorType, and returns its value. Now we can use this value for any purpose we have.
4. Blocking a Tag From Being Fired
I want to block the Pageview tag for the website administrators. There are multiple ways to this, and here I will show you a simple method.
Create a new Trigger, call it Pageview - NOT Administrator, and add Page View as the Trigger Type. Since we don’t need this trigger to fire on all pages, we should click Some Page Views.
Now enter DLV - visitorType, does not equal and administrator, and then save the tag.
Next, we need to change the GA - Pageview tag and choose Pageview - NOT Administrator as its trigger.
Refresh the container and website again. We can now see that the tag is not fired on the page due to the limitations that we have just defined for it.
We can click on the tag to see the reason why it has not been fired. As you can see in the Firing Triggers part, the DLV - visitorType criterion has not been met.
We can also verify it by clicking Variables. It shows that when Page View happened, the value of the DLV - visitorType was “administrator” and thus it has prevented the tag from being fired.
5. Additional Features of the Plugin
Now that we know how we can use the data pushed by the plugin into the data layer, let’s continue and view other capabilities of the plugin.
Basic Data → Google Ads
Google Ads is an advanced feature that includes a dataLayer variable in which all dataLayer values are stored and can be used in Google Ads remarketing.
Basic Data → Browser/OS/Device
Browser/OS/Device lets us access the user’s browser, operating system, and device data in the dataLayer. For instance, it can be a useful feature if we want to fire a tag only on a mobile device. Don’t forget that these are beta features and you should test them out before using.
Basic Data → Weather & Geo Data
Weather & geo data uses the IP address of users to show geographic and weather data using the IPStack.com website. In order to activate it, we need an API key from IPStack. We can include the weather data inside the dataLayer and also choose the temperature unit we prefer.
Basic Data → Site
For website owners who use WordPress multisite environments, the Site feature can include the Site ID and Site name in the dataLayer.
Events → General Events
The General events under the Events tab let us push various events into the dataLayer such as form-fill, new user registration, and logged in users.
Events → Media Events
We can also get media engagement information using the Media events section. Although now there’s a built-in functionality inside Google Tag Manager for tracking YouTube videos, the plugin can still be used to track Vimeo videos and Soundcloud clips.
The Scroll tracking feature is now included in Google Tag Manager by default but we can still use the options here especially as the method of scroll tracking and the options are different from what Google Tag Manager offers.
Integrations > Contact Form 7
The options within the Integration > Contact Form 7 tab let us include a dataLayer event after a user successfully submits a form. Contact Form 7 should be already installed and activated on the website for this feature to work.
Integrations > WooCommerce
The WooCommerce integration feature lets us push eCommerce specific information into the data layer either in Standard or Enhanced Ecommerce format. For example, if Track enhanced e-commerce option is selected, the plugin will push information about product impressions, product detail views, add to carts, etc. which can be used in Google Tag Manager to setup Enhanced Ecommerce tracking.
Another practical and fairly advanced option we can use here is to set the number of Products per impression. This is useful for collection pages that contain a lot of products, because sending all of the product impression hits to Google Analytics at once could cause the hit to be rejected as it hits the maximum of 8KB per hit limit. But using this feature, you can break the product impression hit into smaller pieces so the hit size would stay less than 8KB, for example by choosing to send impression information for 8 products at a time.
We can choose to have the cart page as the first step of the checkout funnel by selecting Cart as 1st checkout step or choose to push all Cart content in the data layer to enrich the data we track into Google Analytics.
We can use the Include full category path option for enhanced e-commerce tracking and also choose which Taxonomy to be used for the product brands to organize the products based on their brand.
Customer data in data layer and Order data in data layer are other practical pieces of information that we can enable based on our tracking scenario and how we want to collect ecommerce data. We can also Exclude tax and shipping from revenue so that the transactions are recorded for the real value of that products.
Google Ads Remarketing adds dynamic remarketing variables to the dataLayer and also allows us to choose a prefix for Product IDs.
We can also choose to use SKU instead of product ID if we want our Google Analytics data to match the SKUs recorded in our inventory software.
The Do not flag orders as being tracked option is another advanced feature that allows you to change the order flag behavior that the plugin uses to prevent duplicate order tracking. Normally, the plugin will flag each order to prevent it from being tracked twice. E.g. when the page is reloaded or when the user returns to the order confirmation page to review their order status.
For the purpose of this tutorial, I only activate the Track enhance e-commerce option.
Now let’s refresh the page and click on a product to see what happens. We can see in the Data Layer that an e-commerce object with all the information such as the name and SKU has been pushed into the dataLayer. We can use this inside Google Tag Manager to send product detail views into Google Analytics.
Next, let’s take a quick look at other integration features of the plugin. The Google Optimize integration not only allows us to install Google Optimize on all pages, but it also can help us add the page-hiding snippet to our pages to prevent flicker.
The Accelerated Mobile Pages option lets us implement AMP GTM Snippets.
There are also some Advanced features. Among them are two very helpful options:
Include browser ‘Do not track’ setting adds a value to the data layer that indicates if a user has asked not to be tracked. Some users prefer not to be tracked by websites and knowing this helps us respect their choice by using the value of this data layer variable to prevent marketing and analytics tags from being fired.
Also, we can activate the Load GTM container as early as possible option to make sure that Google Tag Manager starts earliest during a page load.
The last feature that I am going to discuss is Blacklist tags. You can see two options in this section, Blacklist tags, and Blacklist macros. Macros were previously used to refer to what we currently know as Variables in Google Tag Manager.
Tag Manager tools were introduced to make it easy for marketers to add scripts to the website for marketing purposes without the need to directly access and change the websites’ source code. As a result, without writing lines of codes, we can fire a tag based on the users’ activity which brings us much power and flexibility.
This flexibility can sometimes become dangerous for our website since anyone with the access to publish the GTM container can use fire tags that can potentially break the websites’ functionalities. This Blacklisting feature of the GTM4WP plugin gives the power to the website owners to control or blacklist what tags marketers can fire through the Google Tag Manger container on the website.
Let’s consider that we don’t want anyone on our team to be able to fire any kind of Custom HTML tags on the website. Start by adding a new tag, call it CHTML - Test, and choose Custom HTML as the Tag Type. Write the below code:
<script>
alert(“Hello World!”);
</script>
Then choose All Pages as the trigger and save it.
Now refresh the container and website. We can see the Hello World! popup right after refreshing the page.
We can block this kind of tags from within the plugin settings by clicking Allow all, except the checked items below (blacklist) and then Custom HTML Tag.
Refresh the website again after saving the settings. This time we see no Hello World! popup since we have blocked the Custom HTML tag that was executing the JavaScript code. We can also see from the Data Layer that two new pieces of information have been pushed before pageview, which are gtm.whitelist and gtm.blacklist.
We can also see from the Tags that the tag we created is not fired.
This way, website administrators can block and limit the types of tags or variables that the team can use inside the Google Tag Manager. Some of the variables that can be blocked include Constant Variables, 1st Party Cookie Variables, URL Variables, etc.
Summary
In this tutorial, we used the Google Tag Manager for WordPress plugin to add a Google Tag Manager container to a WordPress/WooCommerce website. We used the plugin to add multiple useful pieces of information into the dataLayer and learned how to use these values to set criteria for firing tags or report them to a marketing or analytics tool.
We reviewed the integrations provided by the plugin, especially the enhancements it can provide us for tracking Enhanced Ecommerce on a WooCommerce shop. And in the end, we learned how to blacklist tags and triggers that can be used in the Google Tag Manager container.
Join Newsletter
Community
Tools
Learn Analytics & CRO
