Google Tag Manager. You want to know what it's all about. Want to get started using the
tool and deploy, tracking with it. You came to the right place. Hi there. My name is Julian and I have trained
thousands of marketers over the last past years to use GTM effectively. And in this full, GTM beginner's
course, I'm going to show what you can do with Google Tag Manager. What it's all about, how to set it
up, to deploy your marketing tags and send data to tools like Google
Analytics 4, or the Facebook ad system. And during that, I'm going to
show you some best practices in Tag Management as well. If you're interested in any of these
topics and want to skip forward, you can do so down below, we have
all the timestamps that you would need, and you don't just have to sit
down and watch all of these videos one by one, but you can actually
participate with a few quizzes that I've prepared for you for each section. Just check them out at
measureschool.com/gtmquiz and follow along. And we got lots, lots,
lots, lots to cover. So, yeah, let's dive in Google Tag Manager, a tag
management system from Google. It solves a simple problems for us. Marketers. We frequently need to install, tracking
onto our website in order to determine success of our campaigns, to track
the sources that a user came from or what users are doing on our website. In order to do that, we need to
oftentimes installed a tracking script onto the website itself. And these are also called marketing tags. Now, previously, you might have gone
into your code editor and editor script, customize them to your needs, and
then quickly lose the overview of how many tags you have already installed. And what they're actually
doing can get quite confusing. With Google Tag Manager you actually only installed one central
snippet onto your page and henceforth all your different tracking codes
are deployed through a graphical user interface of Google Tag Manager. You just need to determine the
data that you want to send over in your tags, then create triggers,
which are basically rules. When your task, you should fire and
configure your tags that are then sent over to your marketing vendors. If it's all set up, Google Tag
Manager deploys your tracking code in the background. But there are many more advantages
to Google Tag Manager, like a version control system, a preview mode. So you can test your tags before
going live with them and, and management functionality to
keep an overview of everything. Overall, you can be way more flexible,
granular, but also more organized in your managing of your marketing tags. Google Tag mentioned here we are inside of the Google
Tag Manager interface, but before we get started with everything
that's going on in here, let me show you a little example here. So oftentimes tools like Google Analytics
or Facebook, ask us to install some tracking code, and oftentimes they
give us a little bit of JavaScript code and that, that is something we
then need to install onto our website. So an actually into the code of our
website, Google Analytics does the same. So here we have the global
SITECH that we need to install. And for that example, I have
created a website right here. And if we look into our little tools
that we have available inside of the Chrome extension store, you can see
here that the global SITECH is already installed and also the Facebook Pixel. Now, when I right-click and view
page source, you can see where I've placed, placed these coats. So we have the little JavaScript code
from Facebook here, and we also have the global SITECH here from Google. Now, when we go back to the page
and switch over to my second example here, we can see that we have a little
slightly different interface here, but at the same time, we can look into our
extensive and we see, we have the same codes installed right here, and also
a page view Pixel for, from Facebook. But if we right-click and view page
source, we don't really see our different codes here anymore from Facebook. But rather a big Google
Tag Manager snippet. And this is what the snippet
is all about and Google Tag Manager are really all about. It consolidates all our different
tracking codes into a little tool called Google Tag Manager and hence falls. We can deploy all our different
tracking codes, also called tracking tags through Google Tag
Manager and this little snippet. So we don't really have to touch
the code anymore and can dive into Google Tag Manager from now on. So what Google Tag Manager gives us
is a central management interface, a interface that we can deploy
our tracking texts through. So if I go over to tags here,
we can see all of the different tags that we have installed. And they're actually not code. There are tracking templates
that you can install and can see. On a visual interface,
how to configure them. So here we go here, we have our Facebook
Pixel and we just need to put on our Facebook Pixel ID and henceforth here,
some more configurations, but at least we don't have to dig through the code
anymore to make this actually work. And Google Tag Manager brings tons of
more functionality into the system. We can actually go here to preview,
which will put our browser and only our browser into a special mode
that we can connect to our website. And one that once it's connected,
we can actually see what tags are deployed on our page. So here we can see our Facebook Pixel
was deployed our Google Analytics 4 tag. And if we jump around on the page
itself, we should be able to see that this is installed on all the pages. So this. Preview mode can be quite handy
when we want to debug tracking and find any errors in it, or see
what's going on under the hood. That is obviously far harder
than trying to dig through the code here inside of our browser. Now Google Tag Manager is obviously
a management tool of tags and here we can always get a great overview of what
is actually installed on our website. You can give tags a name, we
know which tag type it is. And then we have our fire and
triggers these tags, all fire on a all pages trigger, which means. This tag that we configured should
deploy on all the pages, but Google Tag Manager is actually pretty great
and handling any kind of exception. So if you only want it to fire a tag on
a special page or even on interactions. So let me take, take you through
a little tag deployment here. Let's say we want to track, if
somebody clicks on this add to cart button, how would we be able to
build that into Google Tag Manager? So, first of all, let's go
ahead and to find the trigger. As I always said, we wanted to
fight on the add to cart button. So I'm going to go over to triggers
here, create a new trigger, which fires on a click event for our add to cart. And as the tank configurations, we
can see all of the different events or interactions that you can track
with Google Tag Manager, or also like form submissions or scroll Def. But we'll go with the
click, all elements here. And then we go with some clicks
because we don't want to fire on all the clicks, but only where the
click text contains add to cart. Let's save this. And now we have a trigger rule prepared
that we can attach to a marketing tag. So let's say we wanted to transfer
that information over to Facebook. So I'm going to go ahead
and click here on you. And we have our Facebook Pixel for our
click, and this will be add to cart. Well, actually let's call this event. And now we choose from our tools
here and we have many different tools available templates that let us just
get an input, the configurations of attack, rather than digging through code. So I'm going to choose the Facebook Pixel
here and now I need my Facebook Pixel ID. So let's go over to the ads
manager here and copy my Pixel ID. Paste that in here. And then as the event, this
should be a, not a Page View event, but the add to cart event. That's what I want to
send over to Facebook. Now I just need to configure
my trigger, which we have already prepared and click save. Now, this is not yet
installed on our website. We can actually control our tracking
first and see what it does and how it behaves on our website by
entering again, our preview mode. So we connect to our website and let's go ahead and
view this product again. And add this to cart. Now in our tag assistant, we should
be able to find here in the stream of different interactions, in a different
events that happen the click event. And here we go, our Facebook
event, Pixel fired add to cart. Now we didn't quite test this yet. Let's go ahead and clear this activity
and test this in our demo shop. So let me go ahead and add
something again to the card. Let me reload this one first and I'm going to add to cart again. Our tag assistant should show us
that something has fired here. We have our clicks and our
Facebook event, Pixel fired. And then in our Events Manager, we
see now an add to cart was sent over to Facebook since we have now shown
that everything is working and our tracking deployment is something we
want to bring live to the website. We can go ahead and publish a version
because right now our tracking is not yet deployed on the website itself. It just works for our browser, which
obviously is great for testing, but once it's time to go live, we
also need to have a method to do this inside of Google Tag Manager. And there's a best practice of
first testing your tracking and then deploying it on the website. So here we can go ahead and use the
version control system to submit a version and give this a name and then publish it live to the website. And henceforth all the users who click on
the add to cart button will be tracked via our implementation of the Facebook Pixel. The great thing about this version control
system is that at any point in time, you can actually go back to the old version. If you find out that it's something is
wrong with your checking deployment, just like in a development cycle of a website. But obviously there is way
more to Google Tag Manager than what we went through just now. And we'll go over this in the next slide. So for that, and I'm already on the
marketing side of Google Tag Manager, but actually when you use Google
Tag Manager, you will access it by going into tagmanager.google.com. And here you are, first of all,
greeted to sign in, you can sign in with any kind of Google accounts, or
this could be your YouTube account as could be your Gmail account. And if you don't have a Google
account and I trust that you will be able to create one right here. I already have my demo account right
here, and we are going into login and we are inside of Google Tag Manager. If you do this for the first time, you
probably greeted with this screen where I actually wanted to get to, because here's
where we are going to create our account and our container. Google Tag Manager is made up
of accounts and containers. And an account is simply a
collection of containers. And what are containers? Containers are the snippets that
you install onto your website. So a good naming convention would
actually be to use your company name. So for example, demo ink, and
then you can choose the country. This is especially important
for privacy reasons. You might want to choose
something in Europe. If you need to adhere to certain
standards here, I'm just going to leave this at United States
and I'm going to share my data. And I'm going to say with Google as
well, then I'm going to go ahead and use as a container name, my website. So in our case, it would be demo shop.com. This is where I'm going to install this. You don't have to put any URL here,
but in order, if you have multiple of these containers to distinguish
them, you will be able to do this with this easy naming convention. And then you choose your target platform. So you can install Google Tag
Manager on web platform, iOS, Android, amp, and server side. But we are in this tutorial going
to choose web because this series is concentrating on web users, but check
out our other tutorials, where we go into some of the other platforms here as well. So we're going to create this here, and
then we have a terms of service agreement. You can read through this and
then also accept it's click. Yes, here. And we have set up Google Tag Manager,
at least the account portion, because now we need to install our snippets. This is very important in order for us to
deploy codes through Google Tag Manager. So we stayed away greeted with installing
Google Tag Manager onto our website. These are the snippets
that you need to install. If you don't see this, or if you want to
join us here from a different account, you can always find your container centers by
clicking up into the GTM ID right here, or going into the admin section and then
installing your Google Tag Manager option. So here we have these two codes and then
need to be placed onto your website. Now these are the last,
hopefully last code set. You ever need to install onto your website
because henceforth we can do our tag deployments through Google Tag Manager. No, obviously this would require
a little bit more wider access to your website itself to then place
this high up in the head section. And then also underneath
the opening body text. So we have two kinds of snippets here that
we need to install to give you an example. I have my demo shop here,
which runs on the CMS. WordPress. Now WordPress is a very well known
and widely used CMS, but you might use something completely different. So the steps will actually differ here. And even within platforms, you have
different ways of installing Google Tag Manager onto the platform. So for example, for WordPress, we
can put it into the theme files. We could install a plugin, or we could
write it into the functions PHP file. But once we install it, the
outcome should really be the same. So on our website itself, if you go to
right-click and view page source, we can see the HTML that gets downloaded
from the server to your browser. And here we should see in the head
section a GTM code number one, and then also under the body section,
which is further down here right here. We should also see a second snippet. So how do we install this with
our WordPress website here? We have different ways of installing it. I'm going to go through a way that
is most applicable to most of the web first websites, but you could
also put it into your functions PHP. So for that, we need to log
into our website backend, and I already have this prepared here. We'd go to appearances
and then theme editor. And I'm going to edit my theme here,
but I have actually a child theme. Installed. So these changes that we are making
are not overwritten by any kind of updates that go on in our main theme. And then I'm clicking here on the
header PHP file, and here's where we are going to add our snippet. So we have here our opening head
tag, and here's where it had starts. And then we also have our body tag
somewhere, where's it right here. And we need to place our codes now. So let's go ahead and copy this
first coat and we need to put it as high up as possible into the head. So right here would be fine. And then also our second snippet that
needs to go beneath the opening body tag. So we're going to put this in here,
it's update our files and then once it's installed, we should be able
to actually inspect our HTML again. So the files were edited. It's reload. This. And look into our page source. And now we see here, our Google
Tag Manager has installed. And at some point also our
second snippet right here. All right, we should
have Google Tag Manager. And so how can we actually make sure that
it's working, there's a little tool by Google called the Tag Assistant, and you
can install it onto your Chrome browser. And here you would now see that
Google Tag Manager is installed. When we click on it, we get this
in yellow, which is not a good sign because we are still getting
a 404 response from our snippet. This is because we haven't published
a version yet from Google Tag Manager. So GTM is now installed, but
not really getting any data back from Google Tag Manager. And that can be solved by going
into our Tag Manager account. Let's go here to our workspace
and then submitting a version. This will now be our
initialization version. So we're not going to deploy any kind of
tracking, but we're going to make sure that our container is ready to be used. And so I'm going to give this a
name, let's call this initialization. So just in it, and I'm going to
simply publish this onto our website. And we see here, our version
number one is now being published. We have zero tags and zero triggers
and five variables, but no tracking has been deployed right here. So on our page, if we now reload
this, we should see inside of our tag assistant that we at least get
the blue sign, which is a good sign. Sometimes even green, which
would let us know that our Tag Manager is installed correctly. The first step that we can go through
is to actually connect us to Google Tag Manager in our preview mode. And this will put our browser
into a special mode where we can see what is going on on the page
relating to Google Tag Manager. But it also gives us the ability
to preview any kind of changes that we have made in Google Tag
Manager and on our tracking. So I'm going to go here
into the preview mode. This will put our browser
into a special mode. We need to connect us to the website. So we put an hour URL right here
and then click start, and this will connect now to our website. It will actually open it up in a new tab
and you see up here that it's connected because the FEFA, I can actually changes. And this is now connected to
this tech assistant tab as well. And here we already have some little
bit of information we see here, we are currently on this demoshop.com site. And if we go and navigate on the page,
we should get more information in here and you need to make sure that
Google Tag Manager has installed on any website that can be reached by the user. So click through your website and see
if all of the pages actually show up. And Google Tag Manager
is installed correctly. If not, then you might have a problem
with the theme or something is wrong in, in your plugin settings. Make sure that Google Tag Manager is
installed correctly on every website of your webpage in order to make sure that
you're tracking also to get supplied on every page later on, but this looks
pretty promising and pretty good. So we have Google Tag
Manager now installed. If you want to exit out of the Tag
Assistance, you can just click this X here, stop debugging this, and we should
be back to normal on our page as well. And we are now ready to deploy our first
tag with Google Tag Manager, but that's what we're going to do in the next In this video take a look at
how we can analyze our current implementation that we have on our page. So we know what we should migrate
over to Google Tag Manager. And in order to have a proper
plan of what we want to track, we are going to set up a tag plan. This is a crucial piece of information
that only for your planning of implementing checking, but also for other
people that might join your project later on, for example, a PPC manager, he wants
to know what tracking is already set up. And with this crucial little document,
you will be able to show him what you already set up and have documentation
and proof that this is installed. Obviously it's also really
great to show your clients if you install tracking for them. But the real magic behind this
little process is that you won't be setting up randomly some tracking
and track data into your system. And you end up with way too much data
that you can't really do anything with. We will set up intentional tracking,
tracking that actually brings you value by tracking the right things that are
important to you, and then be able to analyze the data later on in your system. So don't gloss over the step. Let's take a look at what I mean here. So we are here on our demo shop and on
a demo shop we already have tracking installed, and this is actually
not through Google Tag Manager, but hard-coded, we already saw that in
our introduction when I right click here and go to view page source,
we see some tracking codes that are floating around on the page itself. Now you could look through all of
the pages and all the source codes of all the pages on your site, but that
would be a little bit cumbersome. So there are some tools that
I could recommend to you, which make it a bit easier. And these are Chrome extension. So first of all, we have the
Chrome extension by Google, the Tag Assistant legacy, which there's
a new version out, but the legacy actually shows you these tags that are
installed from Google on your page. So we have the global Sci-Tech
and this obviously is AWS, which stands for Edwards. So there's something
going on with Edwards. We have, um, a global site tag, which
deploys our Google Analytics 4 code. And then we have conversion
tracking as well, set up. So quite interesting information. We also have other tools,
obviously, this only shows you what Google tags are on your page. For example, there's also the Facebook
Pixel Helper, which could show you the data on the Facebook pixel. Or if you want to go more generally,
there is a extension by ObservePoint or tag debugger, where you can see
information in the developer tools. So we've got to open this up. And go to modules here
and developer tools. And then on the observed point, we just
need to reload our page and it should show us all the information from the
different tools that are installed. So Google Analytics, Facebook and
Google Ads, another plugin, if you want to dive even deeper and
want to know where these codes are coming from is the wasp extension. Web analytics solution profile. So let's reload this, and here
you can actually see where different scripts are coming from. Might not all be marketing
scripts, but definitely helpful. But for debugging, obviously there
are more extensions out there. If you want to dive deeper into
certain texts that might be installed. So for example, there's also a
Twitter pixel helper or U T tech helper for Microsoft advertising. At this point, it is also a good
idea to talk to anybody else who might be involved in tracking. So that might be your it department that
has previously installed some codes that might be some other marketers or agencies
that have installed codes on your page. Just to get a general sense what
is needed and what might be already installed or what might not be needed to
migrate over to your Google Tag Manager. So in order to document all
this, I have a little sheet here that you can make a copy of. Which is a tag plan
for our demo shop here. So you can change that image
around and then you can fill in some helpful information. So when was this tag implemented or a
date when you are actually auditing this? So let's put in here just today
and then this will actually change. So I'm going to paste
this as just the value. Then we can say, is this
actually selective on our page? Is it still being used? What is the type here? So it's an, a conversion
event is at the base. Pixel is an audience tag
is a B testing and so on. So we have here an event tag, for example,
which tool is at Google Analytics 4, and we might want to give it a name later on. So for example, Google Analytics 4 event,
button click, then the description, some notes or other configurations. Then the responsibility and
if there are any to dos, so for example, migration to GTM. So yes, this might seem a bit cumbersome
at first, but it really will give you a clear vision before you actually start
doing and then getting tripped up. Also, if you have a big tech migration
going on, then you want to keep track of what has been migrated and what still
needs to be removed from the site later, once it is inside of Google Tag Manager. So as an example, here I come up with
a little demo where I inputted some tags here that we might want to install
inside of our Google Tag Manager. And this will really give us a good idea
of what we want on the page, but at the same time, what is the configuration? So we don't might not need
to go into our Facebook advertising account and find out our
pixel ID or into our Google Analytics account to find our tracking ID here. All right. I hope you can see how this can be
super valuable for your clients, for anybody who comes after you for
anybody who works with the tracking. And here's a little challenge for you,
make a copy of the spreadsheet and actually go through your pages and think
through what tracking you want to install. And in the next lesson, we're going
to take the first steps in order to deploy our first tags step-by-step. So you can actually take
this plan and put it in, right? All right, if we go over here to
our Google Tag Manager account, we have already our first
version deployed, but no tags are actually inside of this container. What do we want to install today? Well, that should be
already in your tag plan. I have come up with an example here of
a Google Analytics Page View tag that we want to deploy via Google Tag Manager. This should be our GA for base
tracking, and I have some notes here for the configurations. Where did I get this from? Well, I already have Google
Analytics 4 installed on the website. So if I go to view page
source, I should see the code. Yes, here it is. The G-Tag code right here. And we done a little bit of an audit
of our account in the last lesson. Now that I know that Google
Analytics 4 is in here, I actually want to migrate this over. So I mark the as migration to GTM. So what are we doing next? Well, this is the configurations
that we already need. This is just the little code here that
we would need as the configuration. If you don't have Google Analytics 4 yet,
and you want to install it, then head over to analytics.Google.com and open
up a new account and a GA 4 property. And then you will find your GA ID, your
measurement ID, and a setup assistant. And here we have tag installation. Then we have here our data
streams, and you would need to set up a web data stream. And here we get our measurement ID. This is the ID that we want
to send over in our code. All right. Let's start out with the first
step of our tag deployment process. Well, we actually went through
the first step already. We prepare our implementation. We planned that out. Now we actually going to implement it. This is the second step. So instead of Google Tag Manager,
we can deploy our new tracking tag under the tag options, or
just go here on the add new tag. The first thing that I would urge
you to fill out is the actual name. Now, remember if you deploy a lot of
tags, then this can get quite messy. So I would recommend that you use a
naming convention to keep it consistent. So my naming convention, I already
have this in here is to say which tool it's from, what it actually does. So it deploys page view on
configuration and it will be the scope. So in our case, it would
be deployed on all pages. Cause some people that might be
a little bit excessive, but in my case, I always run really well with
this because I know what the tag does just by looking at the name. The next step would be
the tag configuration. When you click on this field,
it gives you a lot of different tools that you can choose from. These are tag templates that let you deploy different
tracking with Google Tag Manager. We obviously want to go
with Google Analytics 4. This is our Google Analytics
4 configuration tag. This is the base tag
that you need to install. And here you see this as
kind of like a little form. So nothing would. So like we saw it in our source here. It is actually just a form and you
need to fill out the right fields in our case, it's actually pretty easy. We just need to fill out
this measurement ID field. Where we need to put in our measurement
ID that we got from Google Analytics. So we have this already prepared here. Let's put this over and we also want to
send a page view event with this tag. Next step would be to
simply choose our trigger. Now triggers are the conditions under
which you want to deploy your tag. We don't have any special
configurations here. We just want to deploy this on all
pages that are accessible to the user. So we can go with the all pages trigger,
which will deploy on any site where Google Tag Manager is installed, or our Google
Tag Manager container it's installed. Let's save this and now we can try it
out by going into the preview mode. So you click here on the preview
button and you choose your page, click start, and then your preview
mode will connect to your website. We'll open it up in a new tab, and then
you see this little message debugger connected, and you should be able. To now see in the tag tab that just
opened that our Google Analytics 4 page view tag has fired correctly on our page. So we see inside of the tag assistant
that everything is deployed fine. On our page itself we should be
sending data over to Google Analytics. So inside of Google Analytics,
we have a handy tool which is called the new debug mode. This is the debug view. And here we see that our page
view is now deployed on our page. And it's apparently sending data over. Let me just test this again. I'm going to click on this new and then
see if we get anything in right now that might take a while because there's also
a batching functionality within Google Analytics 4, so we might not see it right
away, but hopefully in a second here and here we go, we get user engagement. But here are page views. And now we see that there are
two page views being sent over. Why is that? Well, there is a tracking code
attack installed in the view page source here, and also it's
supplying through Google Tag Manager. So it's totally natural. And we would see two page views, but we
know now that our Google Analytics code is the plot through Google Tag Manager. And therefore we can get
rid of this tracking script. Now you should be doing this kind of
simultaneously, but what I'm going to do right now is now that we have verified
our tag deployment, we go over to Google Tag Manager, and now we're going to
submit this as a version to all our users. So it goes live onto our website. So I'm clicking here, submit, and
we can give our version of name. I would always give a descript of
what you have changed in this version. And then you can publish this. And that should go out
now to all our users. So it's permanently installed on our
website, but as I mentioned, we still have this quote here on the page. So at this point now that's being
deployed through Google Tag Manager, and we know that it's working correctly. We can actually go in and turn off the
plugin that deploys those, or get rid of the code inside of our theme files. So that's what I'm going to do
here and set up our theme files. I have the global Sci-Tech here and
let's delete that, update our site. And now back on our page and I'm going
to close the Tag Assistant actually here. So here we see that Google Tag
Manager was deployed and our global Sci-Tech through Google Tag Manager. So that's not, shouldn't
be in the page anymore. Let me just check here to make sure. Yeah, we just have Google Tag
Manager installed, or we can see only Google Tag Manager and global
Sci-Tech is deployed through GTM. Let's do another test here and
actually go into our analytics and actually this debug view, we cannot
use it because it only functions if we have the preview mode enabled or
a connection to the Tag Assistant. So what I'm going to do right
here is actually going over to the real time reporting. And here we go, I'm in Berlin right now. We have one user from Berlin that should
be me and our page views are counted. So we have Google Analytics 4
correctly installed on our website is now deployed to all our users. And we have stepped through the
whole tag implementation process from planning out our implementation
to implementing it via Google Tag Manager, doing a little bit of Q&A,
and then deploying it to all our users. Now we also removed our hard-coded
implementation of the G-Tag right here. And that's something you would
need to do if you actually migrate. If you deploy completely from
scratch, then you don't have to delete any kind of codes, but it
would be necessary if you are actually migrating over to Google Tag Manager. So this is now active and we can continue
with the next tags in our next lesson. Yeah, I'm already in our demo shop. And on this side, we have already
the Google Analytics 4 tag deployed. Now we want to install some new tags. I put this actually in my tag plan here
that I want to install the Facebook pixel. First of all, the general Facebook based
tag, which would the be the page view. And then also a conversion tag,
which would track if somebody submits a form and this will send
over a lead event to Facebook. I already have the
configurations here of my pixel. If you want to test this out
yourself, you can go over to your Facebook Events Manager. And then here you should find your
Facebook Pixel or under settings. There is your Facebook Pixel,
which you just need to copy. So let's implement this on the page. First of all, our page view, which
would be deployed through all pages. We actually did this in
the last lesson already. So we just go over to tags here
and click new, and then we choose the tag configuration and we have
many different templates available. Unfortunately, the Facebook
templates, not one of them. Luckily there is a community gallery
where users can submit templates and we also have one for the Facebook Pixel. So right here, this is made
by the Facebook incubator. And we can add this to our workspace,
need to confirm that we want to add, and then we get our template
and you can put in our pixel ID. Now you can ignore all of these
different other settings for now. And just go ahead and
give this all a name. So we'll send over a
page view on all pages. Obviously we need to still add our
trigger here, which we'll deploy our tag on all pages, save this, and let's
put our browser into the special preview mode where we can see which tags are
being deployed, live on our web site. And if you go back to the tag assistant
team, we see our Facebook Pixel now fired. They should be on all pages. So obviously you can do a spot check
by going to some random page here. And hopefully still seeing that
our page view is still fired. That is the case. We also have the ability to look into the
Facebook Pixel Helper and extension that you can install to your browser, where
we see the page view has been sent over. And then the last method is actually
to go into your events manager and there is something called test events. And here you can test a new event here
by entering your URL into this little field and open this on the website. Now this will not happen on this
tab because this is not connected to the tag assistant, but here, if
I should reload this, you should be able to see something here. Yes, we get a page view and it
happened on our data Ninja page right there so that we have the Facebook
Pixel already installed in order to actually take this live to our website. We would deploy a version, but since we
have one more tag that we want to install, we can actually push this to later on. And publish this all at once. So let's take a look at the second
part that we want to install here, which is our confirmation page. Now this tag is example for all
of the different other conversions that you might want to track. Really what you would need
to find out is on your page. What are the events that you
want to optimize for in order to get more traffic to this and
make your users do this action? Now, in our case, I just chose a
form here, which is just one of many conversions that you could track. Obviously, if we are an e-commerce
store, which we are here, you could also track purchases, which
is a little bit more complicated. So for the short and simple tutorial,
I wanted to do this in the form. So let's take a look at actually
what this action would look like. We go over here to the forms and I
have one prepared here in Ninja form. And when we fill that out, We
get to this confirmation page. Now Facebook has many different
standard events that you can send over that can be interpreted by Facebook. And you can look at them in
the reference here under the Facebook developer reference. So to have add payment in
force, for example, one actual add to cart, add to wishlist. This is all data that
Facebook can then interpret. And therefore it's a good idea to send
over one of these standard events. And here we have a lead which would
fit quite well to our standard form that we are filling out here. So in order to send over such a
standard event, we first need to create a trigger that only triggers on this
confirmation page that we have right here. Now, we already went to that
confirmation page and we can look into our variables right here. In order to see, for example,
on this container loaded, how variables get filled. Now, variables are kind of
like placeholders, which Google Tag Manager uses to evaluate
whether it should fire your tags. So we can, for example, use the page path
and say, if the page path is Ninja forms confirm, then we want to fire our tags. So I'm going to copy this over here. And if we compare this with other
pages, obviously the page path will change based on which page you are on. And therefore we want to set our
trigger to evaluate on this variable. So let's go ahead. Inside of Tag Manager, go to
variable, go to triggers and create a new trigger, which is not our all
pages trigger anymore, but this will evaluate on our page view and it will
only fire on Ninja forms confirm. Now in the configurations of such a
trigger, we can choose different events and we'll get to some of these events. In a later lesson. What I wanted to do is fire us on the page
view, and then only on some pages where my variable, which was page path contains,
or let's go with equals, which is a bit more stricter Ninja forms confirm. So this is a trigger that we have now
created, which should fire our tech only on our Ninja forms confirm page. So let's go ahead and now
configure our tag for Facebook. Again, I'm going to go to new
here and then tag configurations. It's search for our Facebook Pixel. And we need to put in our idea again. We have right here. And then we have our event names
and there is a standard event name we sent over Patriot that's
pre-configured like last time, but now we can see all of these different,
other standard events that are also available and I wanted to go with lead. So this is what I'm going to choose. And then as the trigger, I'm
going to choose our new defined trigger of Ninja forms confirm. Let's give this all a name. This is still our Facebook Pixel
for this time, our lead event, which will fire on our confirm form page. Let's save this. We need to click on the preview
button again in order to save this and then reload our page. And now it's connected. We are not yet on the form page. So I'm going to go over to Ninja forms
and just to show you on our tag assistant. Our Facebook lead form has not fired
on this page view because when we click into it, you can actually see, well,
you need to choose an event here so you can actually see why did this not fire? Well, the page path does not
equal Ninja forms confirm. When we click here on
values, it was Ninja forms. So it's a page view before only if
we now click on submit, we get to the confirmation page and now we should
actually see, yes, our Facebook lead fired and our container loaded. When we click into the lead. Now it gives us the check marks throughout
an hour trigger actually fired this tag because Ninja forms confirm equals
Ninja forms confirm, witch is right. If you want to see the names again, the
page path equals our ninjas from confirm. So if now sent off the lead, obviously you
would do a little bit of a spot check of has this actually been
sent in a tag assistant? Yes. Has this been registered here
in the Facebook Pixel Helper? Seem so as well. And if we go to events manager,
we also see now a lead event that has been put into our events
manager on the test events. So this is now sent over and you could
build a custom conversions off that it would also show up in your Facebook
ads manager later on, and you can optimize your campaigns based on that. Well, actually it's not yet quite
implemented because we haven't yet created a version and publish this to our website. That's always the last step
that we actually need to do. So we'll go over to submit
and add a version name here. Okay. And then when we click on publish,
this will go live to all our users. So Facebook Pixel with our conversion
tracking is now implemented.. So back in our demo shop, we already
have our tags firing or Google Analytics per page view and our Facebook pixel. And when we go to our confirmation
page of our lead form, we also fire our tag for Facebook. But what about this interaction tracking? For example, when we would track,
if we go here to a product page and we would like to check as somebody
clicks on this, add to cart button, how would we be able to track this
with the help of Google Tag Manager? Well, before we get started, I have
already a new entry in my tag plan here where I want to fire an event tag to
Google Analytics 4, and this is what we're going to try to achieve right now. Now auto event triggers are these
special kinds of triggers within Google Tag Manager that we can see right here
that are able to pick up interactions such as clicks, a user engagement, like
element visibility, form, submit, scroll triggers, YouTube videos, but also
JavaScript and history change events. No, it's always important to understand
that there are multiple ways of tracking interactions on our page. So for example, with our form submit,
we could use the form submit listener, but we already said that the page
view, the thank you page after the form is already sufficient to track
our lead inside of the Facebook Pixel. So there are always multiple ways,
but today I'm going to show you how to utilize one of these event triggers. And for our purpose, we obviously want to
go with one of the click triggers here. We have two, one is for
a specific link click. So a link would be something that
leads to another page, but in our case, we would just go with
the all elements, click trigger. I find this more versatile,
and it's usually what I choose. When I work with click triggers, so
let's go ahead and click on all elements. And what we're going to do right now
is to generate a generic click trigger. So this will not have any tags attached. We just want to see how this
click trigger is auto event. Click trigger will react in the real
world because auto event triggers actually have two functionalities. One is the click trigger itself, but then
there's also a listener functionality that actually listens to interactions. So I'm just going to give this a
name here, just call this click. And this will find all
clicks that are on the page. You're not going to attach this
to attack, but before we go on to preview here, I would like to enable
some variables that I have stored here under the built in variables. And these are our click variables that
will be filled by our click trigger. So here we have all our variables. We can just enable them and see how
they get filled by our click trigger. So once they are all enabled,
we go on the preview button. And then reload our preview on debug mode. And this time I'm going to go straight
to the hoodie and zipper page with zipper page and bright here, we
should be in the Tag Assistant. We see our page has loaded, but
what happens, what should happen is when I click for example,
on the title of this page. So I'm going to click here. I should see inside of my Tag
Assistant here that we have a new click that was registered and
our variables get filled as well. So click classes, click element,
click ID, click texts, and so on. So I just clicked on our title and
therefore the title is hoodie and zipper. So for example, if I click into this field
or it's click into this field right here, we should have more clicks that came in
and we see here that we click once one time on the search field, which gets. Filled out by the click classes or our
quantity fields, which got picked up. And now the ultimate test,
what we actually want to track is the add to cart button. So I'm going to click on this
and our site actually reload. So it goes to the next page, but
that shouldn't be a problem with our new tag assistant here, because
we can see the 17th click was our click on the add to cart button. And here we have it actually in the
click classes, single add to cart button. That should be our add to cart click as
we can also see it in the click text. Now the next step is to find our trigger,
to choose one of these variables that is actually unique to our add to cart button. And we can do this by going through
the previous clicks that we have generated and seeing what is unique
about this, add to cart button click. So I'm going to go to 15 here. This is obviously a bit
longer and it says cart. We have here a click
to our quantity field. And this has a different click
ID and here we don't have much information, but the click classes
gets filled out by the search field. And if I go back here to the 17
and it's pretty clear that one item that is quite unique is that the
click classes has single add to cart filled out in the click classes. So that should not be the
case for any of the others. Let me just click here
through here again and see. Yep. That is pretty unique for our 17th click single add to cart button
is within the click classes. So what I'm going to do right now is
copy this and then head back to my Google Tag Manager and turn my generic click
trigger, which just has the listener functionality into a specific one,
which would own the turn true when the user clicks on an add to cart button. So I'm going to make this an add to cart. Click trigger. Oh, we have to click already on there and
let's go ahead and now refine our trigger from all clicks to just some clicks. And we have all our
variables here available. I'll click classes, variables, and we're
going to go with the click classes, which should contain, and we have many
different other back matching options here, but we already made up our mind, it
should contain single add to cart button. By the way, you could also choose
a completely different approach and say, well, let's go with the click
text because the click text is also very unique here and it doesn't get
overwritten or accidentally picked up by any of the other events. So add to cart could also be a solution,
but for now, I'm just going to go with the click classes and save this. Now the next step is to attach
our new click trigger to a tag. And this time we want to fire
a Google Analytics event tag to our Google Analytics 4 instance. So we're going to go for new here and
then click on tag configurations and then search for our Google analytics
GA for event, as the configuration tag, you can simply choose the tag that you
have set up at the beginning of our course, which is the GA4 Page View tag .
And then we come to some configurations. So Google Analytics 4 has a new data
model, which entirely is based on events. So all we can send in are really events
and we can give our event in name. So for example, any kind of click,
and then we can send over more data, more attributes of that click
via this event, parameters, menu. We can enter anything we want here. So for example, if you have a parameter
called click text, then we might want to fill this out dynamically with
our variables that we have available. For example, the click text right
here, and we could attach any more parameters that we might want, for
example, which product was added to the cart or what page URL was the user on
right now when he clicked the button. But I'm just going to go with the click
text for demonstrations take here. And then we attach our trigger, which
we have already prepared right here. So let's give this all a name. This is a GA 4 event tag for add to cart. Let's save this and now
go into the preview mode. Okay. Back on our page, I'm going to
click the add to cart button. And hopefully now, instead of the tag
assistant, we should find a click right here and we see our Google Analytics
4 event add to cart click fired. Now, if we are inside of Google
Analytics 4, you should be able to go to your debug view right here. And then you see all the different
events that were automatically checked. But one of them is actually
our click right here. We can see all the different parameters
that were sent over automatically, but also our click texts, which is
our property that we've entered. And it's filled out
correctly with add to cart. So the data has been sent by Google
Tag Manager, and it now arrived inside of Google Analytics 4. That seems to work fine, but let's make
sure that this actually only happens when I click on the add to cart. And I'm going to click here and
on the price and here and here, which should have a lot of clicks
inside of Google Tag Manager. And when we click on them,
we see that no tags fired. And that is great because we have
configured our trigger correctly to only fire on button clicks
on add to cart button clicks. See if this is actually dynamic. So if I go to a completely new,
different other page here and click on, add to cart, you also get a click
and our add to cart fired as well. So it can be pretty sure that our
add to card click has been registered correctly with our Google Tag Manager
auto event, trigger for clicks, but the cool thing, no about Google Tag Managers
as well, that you can reuse trigger. So we have this trigger now set up. We could configure attack to
send data to another tool. So for example, we have here Facebook,
nothing is stopping us from going and creating a Facebook tag, just
like last time with our Facebook ID. Now the ID, I don't have saved,
but I have my tag plan right here. So let's copy that. Put it in here. And then we have our event name, which
we can choose dynamically unless we send over custom event, but we have
a standard event called add to cart. So let's choose that and
attach our trigger here. So Facebook event add to cart
and let's try this out as well. Ah, let me actually go into the
events manager here and test our pixel on our demo shop. So we look at this as well, and
we're going to click on the add to cart button and we see our
Facebook event now fight as well. And then the events manager, we see
our add to cart click that has now been picked up by Facebook ads as well. And we can build an custom audience or
create a custom conversion if we choose so. So this has been created
inside of Tag Manager. All you need to do in order to take
this actually live is to go over to your Tag Manager and submit this
as a version to all your users. And this is how you can create
auto event tracking with the help of Google Tag Manager to
fire your tax upon interactions. Hey, there Measure Geeks Julian
here, and I wanted to invite you to pat yourself on the back for a job. Well done. We have gone through quite the journey
over the last few lessons from learning. What Google Tag Manager is all
about to installing it, setting up our tack plan and then implementing
our tags, triggers and variables. We even set up conversion tracking
for Facebook and took a look at auto event, tracking quite a
bit of stuff we've covered here. Surely you want to even learn more
about the capabilities of Google Tag Manager and what it makes possible. Well, where do you go from here? Obviously, there are many paths
to go down, but I always advertise the GTM is not a book skill
you will need to do in order to learn and master this tool. That's why I usually recommend
setting yourself up with some challenges, something that excites
you and drives you to do something. It takes you go into action. In terms of Google Tag Manager, it
means that you actually practiced what you have learned and push yourself to
learn new things now, how to do so. But the best way to learn
would be an actual project. Maybe start with implementing GTM on a
website of your client or your friend. If they give you access to it, they
probably appreciate the tracking work that you do for them, the
tracking help that you give them. But I know, I know not everybody has a
website available or a client that they can just test their new you skills up on. So the next best thing would actually
be to create your own little sandbox, a website, just like our demo shop,
which isn't a real project, but you can play around with things and
try out new tracking techniques. You'll find a link to a blog post
that I've written down below in the description where you will find out
how to set up up your own demo store your own little website by yourself. And then, well, just ask yourself, what
would a client, or what am I myself interested in, in gathering data? What do I actually want to measure? And then go from there, get
interested in tracking techniques and installed them onto your website. For starters, on this channel, you'll
find many different videos on the popular tracking techniques and I walk you
through many of them step-by-step, but again, don't just watch the videos, but
build them out and actually follow along. Yeah. So in the end, you have a tracking
deployment that you have learned. So for example, maybe start out with
all the different triggers that we have skipped in the last lessons. How about tracking? What is visible on the screen with
the element visibility trigger or tracking 404 errors, or maybe you
are wondering how you are able to prevent certain tags from firing. So you could look into blocking
triggers or trigger groups. Simply take a look at all the
catalog that is already out there and start implementing this
stuff day by day step-by-step. Now, what if you get stuck? Well, everybody does. And that says part of learning itself. For every problem, there is a solution
out there, this YouTube, and that's just one of many resources on from the
cool Google Tag Manager community that has gathered around this tool writing
about this doing podcasts and so on. So I've gathered all these
resources in a handy guide that you can also download down below. Where you will be able to find out
all the resources that I would point you to in order to get your problem
solved communities that you could join. For example. And I really think these steps are
quite good to get you started with continuing your measurement journey
on your own and make progress going Beyond the Basics in Google Tag Manager. But if you are one of those people
who needs a clearer structure and some guidance going forward,
I want to invite you to join our GTM Beyond the Basics course. It's exactly what we just talked about and
what I would recommend a challenge based cause to help you go Beyond the Basics
and GTM, we provide you with your own demo shop, which you can install your tracking
on and try out new tracking techniques. Then we'll give you challenges
to solve them and see if you can actually handle the situation. And if not, we always have a
solution video that wouldn't talk you through it step-by-step, but I
would recommend it to actually try out to do it yourself because there are
always multiple ways of implementing tracking onto your website and maybe, my solution is not even the best one. So maybe you come up with something cool
and new and can be proud of yourself. In the end of the course, you can submit
all your challenges and answer our quiz. And then you can earn a certificate from
measure school, to show around to brag to others that you have gone Beyond
the Basics and Google Tag Manager. Now, as a special bonus you will also get
recordings of past trainings that I've done, where we go a little bit deeper into
some of the aspects of Google Tag Manager. So does it sound something you'd
be interested in we'll head over to measureschool.com/beyondthebasics
and check out how you can sign up to this course. And even if you don't want to go Beyond
the Basics, we always come up with new content around tracking measurement and
analytics every week on this channel. So I'd love to see you again next week. Make sure to subscribe right over
there and also check out this video explaining, um, different techniques
on how to use form tracking. Now,my name is Julian for next time.
