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.
