[GUIDE] Google Tag Manager for WordPress Plugin (GTM4WP)

The Google Tag Manager for WordPress Plugin, or GTM4WP is the most used Plugin to install and enhance GTM on your WP site. Ahmad from Siavak is back again to give us an in depth walkthrough of this plugin. He’s going to explain how to install GTM with the plugin, setup important dataLayers and connect it with GTM.

1:20 – Introduction
1:50 – How to create a new GTM Container
4:00 – How to install and setup the GTM Plugin for WordPress
11:51 – How to improve data quality
18:19 – Other useful options (Google Ads remarketing, Browser/OS/Device. Weather and Geo Data, Multisite Environment, Events, Scroll Tracking, Contact Form 7 integration)
22:24 – Woocommerce integration
27:58 – Rest of the integrations (Google Optimize, AMPs)
28:53 – Some advanced features (“Do not track” setting, GTM Loading)
30:05 – How to prevent the implementation of damaging Tags and Variables
36:47 – Recap

πŸ”— Links:

Google Tag Manager for WordPress Plugin

GTM4WP Website

In this complete tutorial, Ahmad is going to show us all the configurations of the Google tag manager for WordPress plugin. All and more, coming up.

Hey there, measuregeeks. Julian here back with a another video. Today we have Ahmad on the channel again because he took an in depth look at the Google tag manager for WordPress plugin. Now this is a plugin that I personally also recommend when you install Google tag manager. Why? Because it brings more functionality with it to enhance your Google tag manager tracking deployment and fill that ominous data layer. So sometimes in the videos you might have seen me pull something from the data layer and how did they implement this well with this little plugin. So if you’re on WordPress and have Google tag manager installed, you might want to take a look at the Google tag manager for WordPress plugin and see what it can do for you as well. There are tons of features inside of the plugin and Ahmad goes through almost all of them. So if you want to jump forward to one or the other configuration and check out our timestamps down below where we have everything marked up. And once again we’ve got lots to cover so Ahmad take it away.

Thanks Julian. This is Ahmad with another Youtube tutorial and in this video I’m going to show you how to install Google tag manager on a WordPress website using a free plugin named Google tag manager for WordPress made by Thomas Geiger. This is the demo e-commerce store that I’m going to use, which is running on WordPress woocommerce and I’ve already created a brand new Google analytics account to track the page views off this website to. Now I’m going to create a new Google tag manager container at a Google analytics tag in it and then we are going to use Google tag manager for WordPress plugin to add this container to this eCommerce shop that is running on wordpress. Okay, let’s create an account. It is Ahmad’s demo shop. I live in Budapest, Hungary. So let’s choose that and I want to share my data and a container name would be again, um, it’s, it’s a web container and we can now create, let’s accept the terms

and here we go. Okay, so this is our container ID, which we will need later on. But first let’s add the Google analytics tag and published a container. And I’m going to create a new tag. It is Google analytics page view. It would be a Google analytics universal analytics stack. It’s a page for your tag. I’m not going to create a GA setting variable for this demo tutorial. I’m just going to override and put the tracking ID here. But let’s go back to Google analytics and figure out our tracking ID. Okay, that’s it. Back to Google tag manager paste tracking ID and for to trigger all pages save. And you’re done. Let me dismiss this and published the container Google analytics page for you. Always add a version name when you’re publishing a container. It just helps everyone to figure out what has been done under container.

Okay, our container is ready. So let’s go back to the demo store and actually the admin area of the demo store and add the Google tag manager for WordPress plugin. We’re gonna navigate to plugins. Add new. I’m going to search for it. Usually it is the first result. Yes, that’s it. Google tag manager for WordPress by Thomas charger. We’re going to install the plugin and now activate. Okay, here’s our plugin activated. Let’s go to the settings. And the first thing we need to configure for this plugin is that we need to add our Google tag manager ID and the plugin is telling us the same. To start using Google tag manager, please enter your GTM ID. Now, we have to go back to Google tag manager, admin install Google tag manager and we can grab the GTM ID from here. We don’t need all of the code to plug in.

Actually does the heavy lifting. And we’ll add these piece of code in the head section of all pages. And this piece of code in the body section of all pages. We just need to give the plug in this uh, Google tag manager ID and it’s will take care of the rest. Okay, so here we are. Let’s paste it and save changes. Now something that I like to bring into your attention is the container code placement configuration. So there are four different types that this plugin can ask the container into the footer, custom code less injection and off. And it is a little bit confusing because some people are saying that this is for the main part of the container. They had point which is not. So if you read this description down here, it says cold placement. Decide where to put the second so-called no script part of the GTM container code.

So if we take a look back into a Google tag manager installation scripts. So we have the first piece of code and second piece of code. This second piece of code is the no script piece of code and it is added in the body and it only runs when a browser does not. Our support JavaScript, which is rare, but it happens. So actually if the browser supports Java script and can run JavaScript code, this piece of Google tag manager code, which is the main part, will run and will execute in the head section. Otherwise as a fail safe mechanism. This piece, the no script piece, which is an eye frame where it’s a image kind of tag, it will run in the body section. So this configuration is just about the placement after the second part, not the first one. So the first part, the main G Tim container will be placed into the head section of your page anyway.

Okay. So there’s nothing to worry. We just, we can just leave it in Z footer and browsers that do not support JavaScript aren’t going to be, I’d say less than 1% anyway. Now, let’s verify that Google tag manager container has actually been added to its website. Let me navigate to who will tag manager to our workspace and preview the container. Now we’ve been navigating our website and refresh the page. We should be able to see the preview panel. Yes. Okay. So this shows that Google tag manager container has been added to this website and is loading on this page. Our Google analytics page view tag has been fired one time, which has group. And we can also go to Google analytics interface and check the real time view to where find that Google analytics is actually receiving the hits that was sent to Google tag manager, which is here.

This is me, Budapest and we consider refer and active page. And how’s it information about this visit? Now, if you just want to use this plugin to add Google tag manager container into your WordPress or commerce website, that’s it. You don’t need to do anything else. It works and it works reliably. But the actual power of this plug in comes from everything else that it can do other than just injecting a Google tag manager container on your website. It can actually put many types of useful information into the data layer. Let me show you. So when we tested, uh, to verify Google tag manager installation on this website, you can see here that other than page for you Dom ready and winter loaded, which are the default events that fire in a Google tag manager container. If you also have one event firing before these, which is a message means that we don’t have any events name associated with the event.

If we click on this and check the data layer at this time, you can see that deploying has actually added three pieces of information into the data layer page posts type, page, post type two and page post also. So we can already know that this is a front page and this is a single page and it was created by the admin, but the plugin can actually do much more than that. Let’s take a look under basic data. We have some tabs here. So here we can decide what kind of information this plugin actually pushes into the data layer. When a page loads post type category, post alter ID, so we’ve seen the name admin but maybe you wants the ID of the user that has published a post as well the date of the post being published, the title of the post, how many posts are being shown on the page, the idea of proposed format and terms to based on your usage.

You might or might not need all of these information. Okay. But the fact is this plugin can actually push all of these into the data there that save head back to the website and refresh the page. Now again, we see this message but if you take a look at the data that now it has much more information inside of it. It’s, it’s eight of posts being published. Yeah, two months say etc. Now let’s check the rest of the configuration for display login and see what other kind of information it can actually put into the data layer for us. Sash data visitors is something actually nice, so you can see if the user that is visiting the website has actually logged in and if they’re logged in, what is their role? Are there an administrator and moderator, an editor, a customer? What is their ID? What is the name, what is the email?

And of course we don’t want to send email to Google analytics because it’s a PII, personally identifiable information. What is the date that the account for you user has been created and what is their IP? Again, we don’t want to send our IP to Google analytics, but we can use it to kind of look competency, geographic locations, et cetera. Let’s save changes and take another look under data layer when it refresh the page, check the data layer values. Here again, let’s take a look. Okay, so we have some new pieces of information added to the data layer. Login state. I’m logged in, I’m an administrator. This is my email. This is the date I’ve been registrated. I’m an admin and this is my ID and this is my IP. Now before I go back to deploy in settings and show you all the other types of information that it can actually push into the data layer.

Let’s see an example of how can we access this information in Google tag manager and what can we do with this types of information. Usually we can do two sings with a piece of information that we have in the data layer. We can either send it to a tracking or marketing tool or an analytic tools like Google analytics or we can use the information to make some kind of decision. In this example, I would like to use this piece of information visitor type and if wizard or type econs administrator, I don’t want to track that page for you into Google analytics because it’s an administrator of the website. We just want to track our users, not our own administers doors or internet team and this is a useful example of how we can use information into data layer to increase our data quality. So first let’s navigate to Google tag manager and see how can we access that piece of information, who access to information that are into data yet we need to use variables.

I’m going to create a new variable name. It’s Z L V visitor type which means data layer value and what value we’re interested in. Is it a type, this is not a critical rule to follow, but I would like to have my naming convention clean so when looking at the name of a variable I can immediately see that. Okay, this is a variable that is getting its data from data layer and this is the information in the data layer that the valuable is getting the data from. I’m going to click here and use data layer variable as the type of the variable and didn’t name of the variable. As we can see here. The name of the variable is a visitor type, which I’m going to type in here was utter type and that’s it. Let’s save it and preview to container. Again, when you make a change to your container in order for it severe available on the website, you either need to click preview again or also you can click refresh here.

Now we can go back to a website and refresh the page, select the first message and take a look at the variables that we have access to at this point in time. Okay. We can see that we have a variable right now, but the name of the L we visit a type and a value of administrator. This value is being taken from this value here. Okay, so when this message happens, when this event happens, Google tag manager wants to evaluate the value of this. It goes to the data layer, looks for visitor type, which we have defined in Google tag manager and returns the value of it as the value of the variable. Now we can use this variable to either send a value to stomp tool or use it to make some kind of a decision. If we check the summary and the tags that have been fired, I can see that Google analytics page view has been fired on this page.

What we are going to do is that we would like to take a look at the value of visitor type and if it’s an administrator, we want to block the Google analytics page view tag from being fired. So there are multiple ways of blocking a tag from being fired based on some criteria like exception triggers or actually limiting the trigger itself. For this purpose, I’m going to use a simple method. I’m going to create a page of a trigger that fires only when the value of visitor type is not equals to administrate. I’m going to call it page view, not administrate. This is a page view to trigger it fires only on some page views and it fires when DL we visit a time, which is our valuable does not equal administrate. Say. Now what we’re going to do is to switch the trigger of our Google analytics pageview tag with this trigger because right now our Google analytics page view fires on all pages. We don’t want that anymore. We want it to fire. Let me remove this. First. We want it to fire only on page views that are not being viewed by a user with a role of administrator that ms saved is. I can again click on preview again or refresh here. Let’s go back to the website and refreshed a page this time. Hopefully we should not be tractable analytics. Okay. As we can see in the summary tags fired on his page, none tags not fired on this page. Google analytics page view. This is not fired on this page because of the limitations that we defined in Google tag manager. Okay, let’s take a look why and uh, for this we need to first click on the events that this tack was supposed to be fired on.

Okay, so I’m clicking under page for you because this was the event that we expected this tag to fire but it did not fire and now we can click under tag to see why. First of all, we can see the properties of the tag, but here under firing triggers, page view, not administrator, we can see that the event equals GTM, GS with a green check. What this GTM JS means page view, so the events equals page view, but the data layer value of visitor type does not equal administers disc area has not been met and we can actually verify that by clicking on the variables and see yes when Patriot happens, the value of data layer visitor type ways administrator and it actually prevented the the GA tag from being fired. Now that we learned what kind of information this plugin can add into the data layer for us to use and how we can actually make use of them.

Let’s go back to the plugin settings and see what else it can help us to put into the data layer. So onto the basic data tab, we’ve already seen the options we have for the post. For search for visitors, we actually use this one to prevent a tag Google ads. This setting actually includes all the data layer values into a single data layer variable to be used for Google ads remarketing. This is an advanced use case. I’m not gonna activate it right now. Browser, OS and devise. If for any reason you want to have the name of the browser being used by the user, uh, the operating system or their device data, whether it’s a desktop, tablet or mobile inside the data layer, you can uh, check these data are in beta, so be careful and test them out before actually using them in a live environment.

But that can be useful. For example, if you want to fire some tags only on desktop only on mobiles or only for some operating systems. This one is interesting. Ziploc in can actually use the user’s IP address who called IPN stack dotcoms API and received some geographic and vetted data so it can actually push the latitude, longitude and a country city after user in to do data layer. So we can use it, either report it to some tool or again, just like our example, use it to make some decision about tags being fired or not. Ah, you will need an API key from IP stack.com and if you have a really high volume website you might need to pay them as well for your usage. And here you can define whether you would like to have Veta Zeta inside a data layer or not. And what kind of unit do you want to use?

40 temperature. If you are using a multisite WordPress multisite environments, you can have your site ID and site name be pushed into the data layer on each page load to plug in can push events into the data layer when a foreign fields are being with and user moves between let’s say first name and last name and password off a form. It can also push an event into the data layer. Went in new user registers on your website or logs in or an existing user logs in. You do a website, it can help you get engagement information with the videos that you have on your pages. This is experimental and of course what YouTube videos are. There is a belts and YouTube video trigger inside Google tag manager and there are several other scripts available for Romeo and SoundCloud, but you might want to use these instead of having another script on your website, you can test it, see if it works for your case.

And if yes, you can activate it and use it. There are some deprecated events here. I’m not gonna cover them a scroll tracking again. Uh, it is now belts in, in Google tag manager so you can do it right when in Google tag manager, I’m going to cover blacklist later. And for integrations you can see that the plugin actually allows you track interactions and form submissions on contact form seven or which is a plugin that I have activated and the ER can actually detect that. The plugins active and recommends to enable disintegration and also integration, which we need to use for this website, which is a real commerce shop is full commerce integration. So let me just save this first before covering the Hubble commerce integration. Okay, so let me navigate full commerce. So for root commerce and uh, we can see that the plugin is active.

So yes, I’m using WooCommerce. We can choose to track classic or enhanced eCommerce. And for enhanced eCommerce, the plugin actually pushes so many useful values about product impressions, add to cards, transactions, et cetera, into the data layer. And we can use the data layer that is already formatted into way are required for enhanced eCommerce tracking and we can use it in Google tag manager to track transactions, revenue, product impressions, add to cards, et cetera. This one is a fairly advanced feature which allows you to batch your product. Impression hits into different payloads because sometimes if you have a lot of product on a page, let’s say 48 products are being loaded on a page and you want to send product impression hits for all of them at once to Google analytics, the size of the heads, uh, and the size of the packet of data, let’s say that is going to Google ethics is more than a can get more than eight kilowatts.

And in that case, Google analytics will not register, uh, such a hit. So in this case, you may want to, uh, use this plugin to break this product. Impression heads into smaller pieces like eight products at a time. So in case a 48 products on a single page, let’s say, it can break it down to six differences, smaller hits and send six small hits to Google analytics rather than a really large hit that is likely to be ignored. And this is for checkout, a step tracking. Uh, you can have your cards page be the first page of checkout. This depends on the, uh, where you want your data to be recorded in Google analytics. It can push all the contents of your shopping cart into the data layer to be used for Google optimize or other purposes can include full category pads. You can select which taxonomy to be used for product brand because a product brand assumption that in enhanced eCommerce or can report to Google analytics and here you can select what type of taxonomy are you going to use as the brand.

So if you are organize your products in a way that each brand has its own category or its own tag, you can select here which one to be used. You can have customer data inside the data that you can have all the data inside data layer. These are all useful pieces of information that based on the tracking scenario that you’re having, you might or might not want to activate if can also exclude tax and shipping from the revenue. So if you sell something for $100 and they choose it to be shipped, we are DHL let’s say, and they actually want to pay $200 for the shipping and some foot tax as well. Then instead of recording a transaction for more than $300, you might be interested to having actual product revenue recorded in Google analytics. In that case, you can exclude tax and shipping from the revenue being been reported.

They plug in, can add Google adds a dynamic remarketing variables inside data layer and it can add any prefixes to the product in case you have any prefixes in your product feeds. And it can also use the product SKU instead of product ID. Because if you use an inventor inventory software, you have escaped use recorded in your inventory and you might want your Google analytics data to actually match those ASCO used instead of the product IDs of full commerce. And this one is another advanced feature which allows you to actually decide do you want to flag an order as being already tracked? So when an order happens on your website, are you able to track it in tools like Google analytics, Facebook analytics, et cetera. And uh, the tool can actually flag debts, a specific audit as being already tracked. So if someone re reloads the page or there is another circumstance that actually causes the same transaction hits to be fired into Google analytics and Facebook and you can prevent that.

And so not receive duplicate transactions in your tools. No, I’m going to only have the uh, track enhanced eCommerce active, so only the first check box and save changes and head back to the website to see, ah, just quickly how it pushes enhanced eCommerce data layers. Okay, let’s go back to the website, refresh the page and I’m going to wizards, a product page to see what kind of values does it push into today. Talia. Okay, let’s uh, was, is it chop here we have some products. Let’s take a look at this one for example. And now, well let’s take a look at the data layer values that have been pushed into the data layer at the time of page load. Okay. So here we can see that any eCommerce object has been pushed into the data layer. It’s all the information about the product that has been viewed.

We can see the currency code, we can see product ID, product name, product SKU, the category is it price and stock level, which is not available. So this was a quick overview of full commerce integration in Google tag manager for WordPress plugin. Now we can also take a look at the rest of the integrations quickly. They can actually help you add Google optimize container to your website and it will also add the page hiding snippets to all of your pages, which is a small piece of our JavaScript that actually helps Google optimize, reduce flicker of a page when deciding, you know, whether to show the control or the variation of an AB test. It actually prevents the page from being loaded before the controller radio shaping decided in order to prevent page flicker. The next integration that this plugin can help with is where it’s a and PS accelerated mobile pages, which if you use amp pages on your website, you can actually uh, answer a commerce or printed list of GTM containers for a and P G Tim containers in here and deploy in helps with implementing them on your website.

So also some advanced features like uh, what name to use for data layer and environments, et cetera, which I’m not going to cover in this tutorial, but the two final checkboxes are actually useful so I’m going to cover them quickly. Uh, first is the do not track browser setting. Some people, uh, configure their browser to tell tracking tools their preference of not wanting to be tracked. Okay. If you check this, it actually sends this value into the data layer, which you can again, just like we use the visitor type value, you can use this value to decide if you want to fire any kind of marketing or analytics tag or not. If you want to respect the user’s preference of not wanting to be tracked. And also in some cases you might want to load the Google tag manager container as early as possible, underpaid.

And in this case you can activate this checkbox and save your changes. And instead of adding Google tag manager container at the end of the head section, it will try to put it as early in the head section of the page as possible. The final feature that I’m going to cover in this tutorial is blacklisting, tags and variables. Now this is called macros, where the names of variables in the first versions of Google tag management right now we called them variables so we can use macros and variables into tangibly. Now what does it do? What does it actually mean? Blacklisting tags or variables. Now sync about is why do we use a tag manager in the first place? So tag managers were introduced to make it easy for marketers to actually add scripts to the website to track interactions to marketing tools and analytics tools, et cetera, without the need of developers.

So we now in the need to access the actual code of the website. It can easily go to Google tag manager, add a Google analytics tags, and it’s bill load that Google analytics tags on all pages of your website. You actually sewed that without having to touch any line of code or write any PHP or Java script. We could actually set a criteria to fire or not fire attack based off the role of the user that was logged in to a website without Google tag manager and without using disp logging to push those values into data layer. That would be something that we would need it to call our developers or email someone to actually write some code to make it possible. So Google tag manager and any kind of tag manager actually gives marketers so much power and flexibility to inject as to say what’s ever tag or script that they wants into all pages of a website.

And yes, this is flexible, but it can also be dangerous. Someone can add a custom HTML tag that actually breaks a website or some kind of some parts of its functionality. Nope. This section of this plugin, this tool, the blacklisting tax actually gives the power to the administrator of the website or whoever has access to the settings off this plugin to blacklist or control what kind of tags a marketer can later go and add and run in Google tag manager. Okay. Because by installing this plugin, by adding Google tag manager container to website and giving someone access to the admin panel of Google tag manager, we have actually giving them the possibility to add any kind of tag or script or HTML to the website if you might not want to do that. Okay, so let me show you an example. Let’s say we don’t want anyone on our team that has access to good Google tag manager to be able to fire any kind of custom HG Multi tag.

Now custom HTML, as I call them, see HTML tags. They allow you to add some piece of HTML code to the website. Okay? Now what I’m going to do is I’m going to write a JavaScript because frankly I can do that. Okay? I can write a script alert. Hello Walt. Okay, so using a custom HTML tag, what I’m going to do is that on all pages of this website, I am going to show you a pop up, same color word. Let’s save it. Preview. We don’t have to do this. I just do preview and refresh for example. So you know that both ways are possible. And now let’s go back to the website. Let’s refresh the page and see in under one minute what could I do with this website? I just broke it. Okay. Demo shop says hello word. Okay, I’m a marketer without any access to the code, I could do that.

So this is the kind of flexibility and power that I have within Google tag manager and the level of responsibility that I should have, uh, on how to use it. Now as the administrator of this website, because you’re using Google tag manager for voters par game, you can see allow all of the tags except there is it a custom HTML tack to be executed within this container? And you can use, uh, you can block the other types of tags as well. You can block Google analytics universe on lithos tack, but that is a safe tag. It just tracks data. There is a little chance of it breaking your website. So I’ve saved the changes and now I’m going to go back to this website and refresh the page again. This time there is no hello word. Why? Because the custom HTML tag that we have active and running on this container has been blocked by the tool itself.

Okay. And the mechanism to do so is like this. As you can see here in the fence data layer push that be used to just get the information about where Zitter page type, et cetera. It has also pushed two new pieces of information to areas of the types of variables and tags that are whitelisted or blacklisted and on disliked you can see Google tag manager blacklist, HTML, which even before the page view happens, it tells Google tag manager you are not allowed to run any HTML or custom HTML tag. Okay. That is why and page view if you take a look at tags, this one has not been fired. The criteria for firing triggers were met. There was no blocking trigger, but because we had this limitation set at the time of page load that we cannot have custom HTML tags firing on this page, the TAC was not fine.

So this is a way for website administrators or website owners to actually block and limit the type of tags and type of variables that eMarketer or their team can use inside their Google tag manager container. Okay, so this is a list of all of the variable types that can be used. So custom Javascript Dom elements, variables that gets values from the URL or variables that get their values from this atelier. This is the same type of value we used to get visitor type and to prevent the Google analytics tax to be fired if the visitor was an administrator. So to recap, we had a website running on WordPress and woo-commerce. We had a brand new analytics account and we use the Google tag manager for WordPress plugin by Thomas Georgia to add a Google tag manager container to this website and to also add many useful pieces of information into the data layer.

We learned how to use the values into data layer to prevent some tags being fired. We quickly reviewed the types of information that this plugin can add to the data layer. We quickly reviewed the integrations and how deploying can be used to add enhanced eCommerce data layer values to track transactions and revenue and product impressions in a real commerce store and we also saw how could we blacklist the kind of tags and triggers that can actually be used into Google tag manager container that has been added to this website. I really hope that you’ve enjoyed this video tutorial. This is Ahmed and until next time, bye.

All right, so they have it. This is how you can utilize the Google tag manager for WordPress plugin and all its defense configurations to enhance your Google tag manager tracking deployment. I hope you found this useful and thanks again to our match who helped us produce this video. You really went in-depth and if you want to find out more about Ahmad, we have a link down below to his website and all the contact information that you would need. And we have come to the end of the video. This time, I want to ask you a question are you subscribed to the school channel yet? If not, then hit that subscribe button down below and we’ll see you in the next video. My name is Julian til next time.

Julian Juenemann
About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

2
Leave a Comment

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Julian JuenemannAgnieszka Recent comment authors
newest oldest most voted
Agnieszka
Guest
Agnieszka

Unfortunatelly I don’t have information about visited product (with variations!) in the DataLayer. All others: impressions, cart, but not the product… πŸ™