The Most In-Depth Google Tag Manager (GTM) Class for 2021 | Ziga Berce | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

The Most In-Depth Google Tag Manager (GTM) Class for 2021

teacher avatar Ziga Berce, Founder, Entrepreneur & Lecturer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

16 Lessons (2h 31m)
    • 1. Introduction to The Course

      2:40
    • 2. Time Triggered Tags Part 1 Custom Facebook Events For Remarketing

      9:39
    • 3. Time Triggered Tags Part 2 Time on Site With Google Events

      8:22
    • 4. Scroll Distance Tracking Part 1 The Basic

      8:46
    • 5. Scroll Distance Tracking Part 2 Time Triggered

      6:00
    • 6. Click Tracking Part 1 Outbound Links

      12:37
    • 7. Click Tracking Part 2 Buttons and Other Elements

      9:30
    • 8. Reading and Writing First Party Cookies

      13:10
    • 9. Simplifying UTM Links With the Help of Lookup Tables

      13:21
    • 10. Subdomain Tracking

      4:56
    • 11. Visibility Trigger

      16:17
    • 12. Exclude Internal Team (Custom Dimensions)

      10:24
    • 13. Conversion Tracking Part 1 Simple Google Ads Conversion Tracking

      9:25
    • 14. Conversion Tracking Part 2 Custom Variables & Data Layer

      13:50
    • 15. Google Analytics 4 Setup & Event Triggering

      11:02
    • 16. The Wrap up

      1:02
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

146

Students

--

Projects

About This Class

In this class, we’ll dive deep into details of setting the 14 most useful tags for your online business.

We will start with the basic tracking tags like, scroll, time, and click tracking and transition to some more advanced concepts like lookup tables, cookies, and custom dimensions for Google Analytics.

By the end of this class, you will become a tracking superstar capable of executing advanced marketing experiments and installing 3rd party tools without the need of an IT expert.

You’ll be able to come up with your own tag ideas, implement them confidently, and all that without any special technical knowledge.

  • We’ll send custom events to Facebook, learn to track scroll distance, time on site and link clicks, and send all this data to Google Analytics. We'll also play around with cookies and URL parameters.
  • We’ll take a look at how custom dimensions can help you exclude your internal traffic and how the visibility trigger can replace or improve your scroll tracking. 
  • With the help of the data layer and custom events, we will track purchases and mark them as conversions in Google Ads Manager. We'll also take a look at Google Analytics 4 (GA4), how to set it up, and trigger custom events.

If you don’t know anything about the Google Tag Manager then I would strongly suggest you take the “The Most Complete Introduction to Google Tag Manager (GTM) for 2021” class first as it will give you the base upon which you can build in this class.

But, if you are familiar with Google Tag Manager and need to expand your knowledge or learn how to set up a specific tag then jump right in.


So, let’s get started!

PART ONE: A beginner class about setup and basic GTM concepts is available here:https://skl.sh/3tMksrm

Meet Your Teacher

Teacher Profile Image

Ziga Berce

Founder, Entrepreneur & Lecturer

Teacher

Hello, I'm Ziga and I help businesses grow.

I'm a marketing professional with 8 years of experience in leading teams, accelerating growth, strategic positioning, brand building, and campaign management involving both B2C & B2B start-ups. Result-oriented, decisive leader with a strong entrepreneurial "can do" spirit and track record of increasing sales and growing bottom line through product-led growth.

In the past few years I've:
  ★ Raised over $3 Million through Crowdfunding campaigns.
  ★ Spearheaded 8 successful international B2C marketing campaigns, which increased sales by 8%.
  ★ Managed a Kickstarter launch campaign in Slovenia resulting in $4.3 Million raised in the first 2 months.
  ★ Built and led growth ma... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction to The Course: Hello and welcome to this Google tag manager course. I'm Žiga and I'll be your instructor. By the end of this course, you will have a deep understanding on how Google tag manager works and what you can do with it. Then we’ll dive straight into the meat of the course. We will slowly transition from essential scripts and tags into more advanced concepts you might use on your website. Along the way I will show you real-world examples so you can build your own project as we go along. By the end of the course, you’ll be able to come up with your own tag ideas and implement them confidently. OK. So you must be wondering, who am I and why am I teaching you all this? Well, I’ve been in digital marketing for over 8 years and in this time I’ve had 2 successful crowdfunding campaigns and helped more than 10 others raise over $1 million. I've spoken at various conferences and marketing events and even lectured multiple generations of small business owners on different topics of digital marketing. And for the past two years, I've also had my own agency focused on helping businesses automate their marketing. Through all this time, I've been actively using Google tag manager to help me and my clients set everything up. Before we dive in, I just want to explain how you can get the most out of this course. If you're new to Google Tag Manager, I strongly suggest you start from the beginning and work your way all the way to the end. This will ensure that you have all the necessary knowledge for more advanced topics. Once you start the course, don't let days or weeks pass between lessons or you will start to forget what you've already learned. Trust me, having to go back and sit through lectures you've already watch is a drag. Carve a study space and eliminate all distractions. Then stick to it as you would in college. This space can be simple as a desk with a chair and some unobtrusive background music. If you have a question or problem during the course, feel free to ask them in the Q&A section or contact me directly. I'll be more than happy to help you. One more important tip. Take notes. If possible in an actual notebook. The physical act of writing will help you better retain the information. Last but not least, have fun and enjoy your learning experience. I'm super excited to share everything with you. So let's get started. 2. Time Triggered Tags Part 1 Custom Facebook Events For Remarketing: In this lesson, we'll take a look at time triggered tags and what you can use them for. But let's start with why would you even need them? For example, if we go back to our single page, you will see that if we scroll or if we click on the link we stay on the same page. It doesn't reload. Because of that Google Analytics, even though loaded, won't get a signal that we are actually doing something on the page. And once we leave this page, it will be considered a bounce. Also, Google analytics tracks time on site between different page loads and since we don't have any page loads, you won't get any time on site data on your Web site. We'll be able to sort of mitigate these with time events and we'll take a look at this. Also, another thing for which we can use time trigger events is if we want to do a better remarketing. For example, we only want to remarket people that stayed on our site for longer than a certain period. They didn't bounce immediately so they are more relevant to us. We can also trigger pop-ups after a certain amount of time, or we can track how long somebody was reading our blog. We're going to take a look at two different examples. One will be triggering custom Facebook events, which you can then use for doing remarketing. And the other one, how you can trigger time events in Google Analytics and see how long people have been watching your Web site. So for this, we have to create a new tag that will basically fire this Facebook pixel event. But this time, we're going to do it a little bit differently. And we're going to setup the trigger first. It basically doesn't really matter if you setup triggers, tags or variables first, as you've seen in previous lessons. You can just basically do it's as you go. But I want to show you first how this trigger works and then we'll build upon that. So for this, we need to create a new trigger. A trigger that will fire after a certain time. Google tag manager provides us with different triggers. And for this purpose, we'll use a timer trigger. A timer trigger basically works like this that after a certain amount of time, it triggers an event. And this is the name of the event that will be triggered. And we can change it. And I'm going to add 30 as we are going to be firing it after 30 seconds. So we know that this timer is different from the rest. Then we'll need to set up an interval when it's going to trigger. And as it says here, it's in milliseconds. So we need to write 30.000 for that, which basically translates to 30 seconds. We can limit the number of times that this event triggers. And since we only want it to trigger, once a person reaches this milestone, we write here number 1. The last thing we need to do is set up the condition upon which this trigger actually executes. And we'll need to select something here and we need to create a filter. If we wanted it to fire on just specific site or when a specific variable is set, then basically we could do so. We want it to run on every page. I could basically add our hostname in here, but I'm going to use a little trick and I'm gonna match it with REGEX. If you don't know regular expressions, I would suggest you to look into them a bit as it's a really powerful tool for pattern matching. In this case, a ".*" basically means any domain. So this trigger will run no matter what's in the hostname. So let's just see how this trigger triggers on our Web site. We've got it here. And even though there's no tags connected to this trigger, this trigger will still fire on our Web site. Let's refresh the tag manager and do the same on our demo store. And basically, after 30 seconds, you'll see the trigger has fired. The 30 seconds have passed and as you can see, we've got the new trigger firing. At this time since there are no tags connected to it nothing has happened. But we can see that the trigger itself works now. If we would wait another 30 seconds, nothing would happen because we limited The execution to just once. All right. The next thing we need to do is set up a tag, so we'll create a new tag. But before we continue, we have to actually get to the event triggering code from Facebook. Let's go back to our Facebook business manager and we'll continue from where we left off in our previous example. So let's go back to the overview tab. And under the "add events" drop down. You'll see "add from Pixel". So this basically allows you to add custom events, either through Facebook events set up tool or by installing them using your own code. Since we're doing it this way, I'm going to show you how to do it. When we click, we will see a detailed explanation of how you can trigger custom events and also some standard events with the help of code. I won't go through all of it. But basically what we're looking at is this snippet of code. If we go under the custom events, we'll see an example here. And I'm going to copy this code and we'll paste it in Google tag manager. Please remember that this is just the update of the Facebook interface. So the code pasted from now on will be a little bit different. Let's go back to our tag manager. Now we have to paste somewhere this code. And as we learned from the previous lessons, we can use a custom HTML for that. So we just paste it here. Since we don't want to trigger the view content event in Facebook. But we have a specific trigger in mind, which basically fires after 30 seconds. We can just rename this in to "viewed for 30 seconds". This is all we need to do here. And we can select a trigger we just created before we want this teg to fire after 30 seconds. So let's just select this Let's save it and test it. We'll, refresh the page and then we'll have to wait again for 30 seconds and we'll see if our event fired successfully. When you're testing time related events, it's best to just lower the number of seconds to maybe like 5s so they will execute faster and you don't have to wait. But since I left it at 30s, let's just wait till it triggers. And it has triggered just now. And we can see that custom Facebook event up to 30 seconds was successfully fired. We can also check in the Facebook pixel helper and we'll see that we got two events fired, the page view, which was set in the previous lesson, and viewed for 30 seconds event, which was just set up. And if we check it in Facebook testing events, we can see that there have been some events fired. You could use now a custom audience and do a remarketing campaign that targets only people that viewed your site for 30 seconds. This way you will target only those people that at least showed some interest in your Web site. And you're not going to target all those people that stayed on your Web site for, let's say, 5 seconds or 2 seconds and didn't even have the time to read it through. 3. Time Triggered Tags Part 2 Time on Site With Google Events: The second thing I wanted to show you is how you can track time spent on a Web site with the help of Google Analytics. OK. For this, let's create a new tag. And Google allows us to trigger events with the universal analytics tag type. So we'll just select this universal analytics tag type and we won't select the page view tracking now, but will select events. Then we'll need to fill in the event details. We'll have to select a category action label or value. If you're familiar with Google Analytics, you know you can find these events under the behavior tab and they can help you analyze what people are doing on your Web site. So let's name the event that is going to be registered in Google Analytics. For the action it would be great if we could see how long a person has stayed on the site. So this has to change with each event that is triggered and for this we will need to input here variable. So let's check if we have any variables in our arsenal to achieve this. From our past variables we can see that we have nothing appropriate and we'll have to create a new variable. So let's create a new variable. And under the pre-defined variables unfortunately, we don't have any variables that would give us back the time. We could use a custom Java script to program it, to return our current time or the difference between the page load and now. But there is an easier option. And we can discover more types in the community template gallery. I already know there's a variable for this called Elapsed time. We've briefly discussed the community templates in the previous lessons. But as you can see, these are sort of like scripts or variables that will extend the capabilities of Google tag manager. This one specifically, as it says in the description, gets the elapsed time since the GTM snippet tag started processing. And this is basically exactly what we currently need. This is why if you don't find any predefined variables or tags, you can always look into the community repository. If you don't find them here either, then unfortunately you'll have to make it happen in JavaScript or you'll have to look somewhere else. Okay, so let just add it to our workspace now. It asks us to confirm that we give its permission to read data layer. And let's just accept it for now after we select it. It's automatically added to our variable configuration and we get some more settings. Since this time is returned in milliseconds. And this is going to look quite confusing in our Google analytics. We can just convert it to seconds. Let's name this new variable. All right. So for the label and the value, we'll just leave them empty for now. We also have an non interaction hit option, which we can set to "false" or "true". For our purpose we don't want the bounce rate to be impacted by these events so we're going to set it to "true". So it's a non interaction hit. If we would create an event, for example, like adding to cart or something similar, we could set it to "false". This would give Google Analytics a signal that this event was user trigger and that user is not considered to be bouncing. Let us select our Google analytics settings that we already created. And this is it. We also have to set up a trigger. We could use a trigger we already created but this trigger only fires once. So for this purpose, let's create a new trigger. We'll also select a timer trigger. We're going to name it timer 20. Because we're gonna trigger it after 20 seconds and we're not gonna limit it. Again, we're gonna select Page Hostname and match it with REGEX, as we wanted it to trigger on every page. All right, so we're all set and done. Let's just save it and test it. 20 seconds. All right. Now, the tag has triggered and we see that our custom events, our every or 20 seconds has fired. We can also check if everything works by going to Google tag assistant, selecting Google Analytics and see that two events, because two have already been fired, have already triggered. We can, of course, check it in real time under the events tab. And you'll see that that's our event time on site with the event action holding the seconds have been successfully triggered. All right. I'm not going to leave these event triggering every 20 seconds. I just wanted to demonstrate to you how you can use this trigger in a different way. So I'm going to remove this custom event for every 20 seconds. I'll also remove the trigger. And as you can see, because I haven't published the version yet I can simply abandon these changes right here. All right. So this is how can use a time trigger. One more thing to note here is that these time trigger will keep on triggering. No matter if there is a focus on your Web site or not. So, for example, I've had this tab running in the background. Nobody was actually looking at the page. Yet the trigger kept on triggering, as you can see here. And as well as you can see also in Google Analytics. So this is not a super effective tool of measuring the correct time on site, but it's something that might give you an insight of most people, before they actually close the window. There are, of course, some work arounds you can do to make this work perfectly. Like when the tab is focused. But this requires you to program a little bit and use JavaScript for that. And we're not going to do it in this lesson. 4. Scroll Distance Tracking Part 1 The Basic: All right, one more thing that you can track is also the scroll distance. So, for example, if you write a blog, then you're probably interested in how much of that blog people actually read. Did they just read the first paragraph, half of the block or did they read the whole thing. For this, we can implement a scroll trigger connect it to a tag and again trigger events and record them in Google Analytics so you can analyze them later on. If you don't have a blog that you have like a long form sales page or you have a regular page and you would just like to know if people actually see some offers you offer, maybe a little bit lower down the page. Then again, you can use this method to track how far along the page people actually came. We already know how to set up Google events so let's first take a look at this trigger. Under the triggers, you will see that we have a scroll depth trigger. This trigger can be triggered on either vertical or horizontal scroll. For our purpose we're going to use a vertical scroll depth. We can select then whether we want it to be triggered on the percentage of page scroll or specific pixel distance. We're just going to selects percentages. And you can either select a 1 percentage, for example, when people scroll 50 percent of the page or you can add more and it will fire on all of them. Lets just make four sections 25, 50, 75 and 90 percent of the page scroll. So we'll see how far along people get on our Web site. I would suggest you to limit this trigger to just some of the pages. You don't want it to be triggered everywhere because you will just get a bunch of data. So if, for example, you're focusing on your blog, then I would suggest to just limited to your blog. So let's do this now. So if we go back to our demo shop site, we can see we already have like a block section with a couple of blog posts. So if we select a specific blog post, you can see that in the URL we get our domain/blog / the name of the blog post. So what we can do is use this information to create a filter in Google tag Manager. For our purpose we'll just select this "blog" part as anything after it is basically a blog post. If you have a different kind of setup on your Web site, for example, each blog post starts with blog-name of the blog. . Or if you have a subdomain, for example, blog.your-domain.com. Then of course you will have to set up this filter a little bit differently. I will show you how to set it up for this specific case. We'll have to go to filters and we'll select page URL. . And we're just gonna leave contains "blog". Now, this trigger will fire only if the page URL contains "blog" and when I scroll this far along the page. Before we test this trigger, let's set up some of the built in variables first. So Google tag manager gives us some built in variables that we can use for different purposes. Some of them have already been enabled for us. For example, like Page URL, Hostname and some others. And for the scrolling trigger, we also get some built-In variables that will give us some extra information. For example, scroll depth threshold, scroll depth units and scroll direction. And if we enable all these variables, we'll be able to see them in the debugging window when these trigger fires. So lets just test it now. All right. The page has reloaded. And let me just scroll a little bit. As soon as we reach the 25 percent scroll depth trigger fired, if we click on it, of course, there's no tags connected to it yet because we haven't done that. But if we click on the variable section, we can see some more information about this event. So if we scroll a little bit lower, we'll see that these three variables have been added and filled in. And we can see that scroll depth threshold on this event was 25 that depth units were percent because we didn't select pixels and the scroll direction was vertical. If we scroll a little bit lower and we fire another scroll depth event then it's going to be 50 percent... And 75 percent... And right at the bottom of the page, 90 percent. So this trigger works. OK. And let's create a tag now. So we've already created a Google Analytics event triggering tag. So let's just make another one. We're going to select an event. We're gonna name it "Scroll" For action, we'll just use the distance scrolled so we can track it. So let's add a variable. And as we've seen a scroll, that threshold variable holds the distance. We can just click on it. If, for example, you would like to remember whether this is percent or if it's pixels or something like that. You can simply type after the variable, for example, like "%" and this will basically add the number and the percent sign in the action parts. For the label we can just leave it as it is, or we can select, for example, a page URL for some additional information in your Google Analytics account. You can decide if you want these kind of events to be an interaction, hit or not. We're not going to have them interacting with our site. We just need to select our Google Analytics settings and then we have to set our trigger. We'll select our scroll depth trigger we made previously and let's test this tag. Now, when we scroll past a certain point, a scroll depth event will happen and our Google Analytics scroll track trigger will be fired. We can also check it again in our Google tag assistant. The 25% action has been successfully sent to Google. And we can also check it in our Google Real-Time overview. And it's a scroll 25%. So we if we scroll a bit further again, the scroll depth will fire and another event will be registered in Google Analytics. 5. Scroll Distance Tracking Part 2 Time Triggered: OK. This is all good. But as you see, I can scroll through this article quite fast and this doesn't give me a really good metric to follow, because if somebody just scrolled up, then up and down, it doesn't mean that they actually read the article. So how can we improve this tracking? Well, one thing we can do is go back to our Google tag manager and not trigger these events only on scroll, but also after a certain amount of time. So let's go to our triggers. And open this scroll depth trigger again. This time we wanted to fire not just on specific pages, but we also wanted to fire after a certain amount of time. So how can we do that? We can simply do this by reusing one of our previously created variables elapsed time in seconds. So if, for example, we want this trigger to fire after a person spends 30 seconds or more on our Web site, we basically check if this variable is greater than 30. So let's save it. And. Try it again. Let's refresh our page. And now as we scroll, you will see that the scrolled depth event still fired. But if we check it, we will see that no tags were executed. And if we scroll, it further. Again, same happens. If we check the variable section, we will see that. The number of seconds elapsed was 19. As this timer already triggered after 30 seconds. We now know that if we scroll further than the next scroll, depth shood trigger the tag. So let's do this. OK, let's check it out. Now we see that elapsed time in seconds is higher than 30 and our GA scroll track event on Google Analytics has been fired. So we can check it out and Google Analytics as well. And we'll see that the 75% trigger has been successfully fired. If we scroll further down again, the 90% will be registered as well. So this is a much better and more efficient way of tracking scroll distance with the help of a timer, as it will give you more relevant data on which people are actually reading your articles and which don't. You have to have in mind that these triggers only trigger ones. So when I scroll back up, they're not triggered again. So have in mine when setting up this timer on, how much time do you want a person to keep on looking at your website before you start triggering those events. If you set this time too high, then maybe a person could read most of your article before any of the events get triggered and you get some analytics in and you get some data in Google analytics. If this time is too low, then of course it might happen that the people are just scrolling up and down your site, actually not reading anything. OK. Before we finish this, we can check if our filter of tracking is also working on some other sites. Because we limited it to "blog" page only if I go to our shop site, the scroll depth should not be firing any events. Let just wait for the 30 seconds. And we'll check again in just a while. All right. The 30 seconds have passed because our timer has triggered and if we scroll a little bit further down the page and check the scroll depth, we now see that none of the tags were fired. There's also a cool way to sort of debug these tags and see why they were or were not fired. So if we click on our GA scroll track tag we'll see a red cross here, which basically means it's not been fired. You can click on any tags like this and you will get more details about the firing of this event. And if we scroll a little bit lower, you will see that under firing triggers, the scroll depth on blog didn't trigger. And why didn't the trigger? Because the page URL doesn't contain "blog". The elapsed time in seconds was greater than 30 and everything else was OK. But since this wasn't the right site, this event didn't trigger. If we check on the previous one, we'll see that two of these constraints were not met. The time on site was less than 30. And we were not on our "blog". And this is a great way that you can check tags if you're not sure why they're not firing or if they are firing and shouldn't be firing, why this is happening. 6. Click Tracking Part 1 Outbound Links: Let's take a look now on how we can track different kinds of clicks on our Web site. From clicks on buttons to clicks on outbound links and even internal links like file downloads, form clicks and so on. So why would you even track all these kind of clicks? Well, the most common reason is to better understand your users behavior. As you can imagine, all that users do on your Web site is click on different links, different sub pages, buttons, call to actions, forms and so on. So what you want to know is the whole picture of what's going on for example, a specific sub page you have or on your whole page. Of course, you might be interested on a specific page which links are clicked most often. And if you have some outbound links like your partners or maybe your social networks, you would like to know which of these are most interesting for your visitors. Of course, if you're doing some sort of an affiliate promotion and you drive traffic to some other pages, then of course you would want to measure that as well. These are some of the cases that you can cover by tracking all those interactions. The first thing you really should have a solid plan. What and why you want to track specific clicks. If you're just going to track everything at once, then you'll probably be lost in all the data that you gather. And at the end, you'll probably not even going to look at it anymore. So that would be a total waste of your tracking data. First thing that we''ll again do is set up a click trigger so we can check it out on our Web site and see how it behaves and what we can gather from it. So we have two trigger options, all elements and just links. The difference between them is that the "just links", only checks if a link was clicked. That drives you to a different page subpage or if it's an outbound link to another Web site. And "all elements" will be triggered on clicks on any part of the Web site. It doesn't matter if it's linked to anything or if it's not. And we'll check both of them. But let just start with "just links", because it's a little bit easier. Once we create this trigger. We have a couple of options. The first one being "wait for tags". If you'll check this, you'll get some more options to set. And what this does is basically it waits for any tags that might be fired because of this trigger. If you can imagine immediately as you click on a link, your browser will want to send you to another page. And if this link doesn't open in a separate tab, then the tag that is tied to these trigger might not completely fire or fire at all. So in this case, you would really want to wait just a little bit to make sure that all the tags connected to this trigger have successfully fired and completed their tasks. By default, there's a two second delay. You can change this, of course. The other one is check validation. And what this basically does is check that the link clicked will actually do its intended action. Sometimes you can have JavaScript blocking the execution of the redirection of the link or execution of forms submit or something like that. It will basically make sure that once the link is clicked, that it will actually do the required action and not just get stopped by script or something. I'm just going to leave it unchecked for now. If you have selected wait for tags, then you basically get an notification, warning you that it should be run on just specific pages because every time you will click a link. Google tag manager will pause it for this amount of time. So your page might really look slow and with these filters, you can set where this trigger should be fired for our testing purposes. I'm going to disable it for now and I'm just going to leave it to all clicks. Name it and save it. As we did for the timer trigger, we also want to set some built-In variables to get extra data on the clicks that will be triggered. So let just go under the built in variables and see what we have available. Under the click section you see, we have a bunch of predefined variables available. From click element, click classes, click ID target, URL and text. And for now, let's just check all of them. And later on, if you see that you don't use some of those variables, you can basically disable them so they don't clutter your variable space. All right, let's test this on our site. As you can see, if I click randomly around the page, nothing happens. But if I click on, let's say blog, then you'll see a link click getting triggered. But since the page loads too fast, I loose this event. So to overcome this, we can basically hold our command (cmd) or control (ctrl) key and click on some link. This will force most of the browsers to open it in a background tab. As we do this you can see the link click events being triggered. And if we click on it to get some more details, we see that none of the tags are fired because we haven't set any. But if we go under the variables, we'll see all these extra variables that we enabled being populated. Click elements, click ID, targets, click text and click URL. . So these are all the variables that we can use when we work with these links. Let's go back to Google tag manager. And now if we want to focus just on outbound links, then we have to modify our trigger to just trigger when an outbound link was clicked. So we can do this by filtering to only some of the linked links, not all of them. And then we have to select a variable that will basically define that. We could use our click, URL and check that it doesn't contain our domain. But Google tag manager actually gave us a better way of doing this. We have a special variable for that and we can create it, especially for this purpose. So what we need is basically an auto event variable. This is a really powerful variable that will give you some extra data. So we'll use it to detect if an element URL is actually an inbound or outboud URL. We'll just select is outbound and will write here all the affiliated domains. What we need to enter here are now all our subdomains or our primary domain that we wish to group together and consider as the same domain. If, for example, we would write. gtm.outtale.com This would allow us to have all the links that are not coming from this domain and subdomain to be considered as outbound links. Then if we would want to add a shop, subdomain, then those two domains would be considered the same. We don't need to do this for all the subdomains if we don't want to. We can just send our primary domain and basically it will check if this part is anywhere in the domains. So we're done. And this variable will actually return "true" if the elements clicked is outbound or "false", if it's inbound. So let's just name it and we'll test it out. OK. Let's check if it equals to "true". And if it is, then we'll trigger this and we'll just rename this click from all links to outbound links. OK, let's save it. And... Create a tag. So if we want to log all these clicks in a Google analytics account, then we basically just select Google Analytics will fire an event, will set the category and action. We can just select, for example, page hostname and for the label we can maybe use click URL . So we get some extra data. We don't want this to be interaction hit and we then just select Google settings variable and now we choose the trigger we have just selected. So click outbound links. We'll name it. And then we can test it. As we click on our shop link and this is an internal link, you'll see that none of the tags have fired. But if we click on the Google, which is an outbound link, then we can see that's a GA outbound link click tag actually fired. So if we click on it we'll see that this is an outbound link. If we click on the previous one and we check it, we'll see that this is not true. Just close all this tabs. because we don't need them. We can also verified in Google Analytics will just go under the real time and events and we'll see that our outbound link click has been triggered. 7. Click Tracking Part 2 Buttons and Other Elements: All right, so let's take a look now, how can we track some other buttons like add to cart or image click On my setup This is an actual link. So the click on this button, actually triggers this link events, even though it doesn't fire the tag. But if we check on the cart page. We have some buttons that have JavaScripts tied to them. For example, this apply coupon. If I click it, it basically just says enter a coupon code and we don't register a click because there is no link tied to it. So let's take a look on how we could track these kind of buttons or clicks anywhere on the Web site with Google tag manager. Previously, we have selected just links event type, and now we're gonna add a new trigger with all elements. This trigger will trigger every time we click anywhere on the Web site. So let's just test it. And as you see, as I click on the Web site somewhere, the click event triggers if I click in the form or cart totals. Wherever I click basically, this event gets triggered. If we want to filter to only register clicks on buttons. What we can do is we can click on the button itself or control click it. If we know it's going to redirect a somewhere and then check what variables get set by this click, we can see that we have a click classes variable set and it's set to button. We also see that the click element is an HTMLbutton element. We don't have any IDs or Target set. And we also have a click text set to "apply a coupon" if we would want to just track this specific button. We could basically set a filter for this trigger to only trigger when click text equals "apply coupon". So let's just copy it and we'll set it up. So we need our click text to equal "Apply coupon". Let's save it. And before we can see it in action, we also have to tie a tag to it. So let's just do this now. I'm going to create a new Google universal analytics event triggering. We're not going to set all the other parameters because we currently don't need them. We're just going to set these variables and select our trigger to click everywhere, which basically is not everywhere anymore. But for now, we're just leave it. Lets save it. Now, if we click anywhere, the click event is still registered, but the tags are not fired. But if we click on the apply coupon our tag is fired, as it should. Again, we can check why this is happening and we'll see that click everywhere firing conditions has been satisfied while on the previous click click text wasn't equal to "apply coupon", and because of that, it didn't fire. Generally, you would like to track all the buttons that have been clicked. So that's why it's important to use variables. And here you can see that this is a class button. So let's go back to our shop and see if all buttons have this class set. . So let's click on Add to Cart. And let's check it out. Well, this button has multiple classes set. One is button, one is product type simple, add to cart button and so on. So we can now change our trigger to trigger on all the buttons. So let's go back to triggers. And select click everywhere. Change the name to click on Butons . And basically, let's take a look back. We have to make sure that click classes contains button. So we'll select a click class cells, and we're not gonna put it at equals because that would mean it has to be just "buttons". And as we saw on some buttons, we have some extra classes so we'll just select contains and write "button". Let's save it. Refresh our page. And let's click on "Add to Cart". Let's check this click and we'll see did the tag fire. As click Classes contains the name button, if we go to the cart Page and we click on the "apply coupon". We see the same event fires. And if we check it in the Google Analytics, we'll see that all the clicks have been attributed to "apply coupon". Which is not good. And we need to change our tag as well. So if we go back to our tag. And select events click on Apply Coupon. And now change, it on two buttons. Then we will change the category into button click. We can set the action to click ID. If we have different buttons with the same text and then we can change the label to click text and we'll get more details about each click, let's save it. And refresh it. And let's try again. Now we'll click on "Apply Coupon". And in our analytics we have a button click with event action "undefined" because the ID hasn't been defined, but we can click onto "undefined" and we'll see that the apply coupon has been triggered. Now, let's go to the shop and we'll also click on Add to Cart Button. And now let's check it out in our Google Analytics. We'll see that two events have fired. If we click on the button, click category we'll see there was no click ID set up, but under event label we can see that an add to cart and apply coupon event labels were set. Of course, you can check all of these with, Google tag assistant as well, and you'll see that button click with add to cart label has been triggered. This way, you could track all the buttons and all the links on your website. You just simply have to decide which ones are really important for you to track. 8. Reading and Writing First Party Cookies: In the previous lessons, we checked how you can track what your visitors are doing on your Web site? Let's talk a little bit about how you can persist this information throughout the session or between different pages or maybe longer periods like days or weeks. For this, we need some sort of storage container where we can store some data and retrieve it later on. . Browsers already have this mechanism and it's called cookies. So we're going to talk a little bit about why you would want to store this data. Which data would you want to store and how to set and read the cookies from Google tag manager. Let's discuss first why you would actually use cookies. For example, if you want to do an action or if you want to fire a tag after your visitor has visited your Web site five times, or if they viewed a specific form three times or if they clicked on some products so you can act when they reach a certain threshold. And this is where cookies come in really handy. You can store this kind of information in cookies. Also, if you have a registration form, you can preemptively store some information that this user has previously registered or was logged in your Web site. And you can maybe show them some other data on your Web site. Also, if you're running an affiliate program and you're not using any of the existing platforms, you can simply store the affiliates ID from who your potential customer actually came so you can attribute them the conversions if it happens. We're going to take a look at how to use cookies in a specific scenario where you want to remember where from the initial traffic came to your Web site. So for this, we're going to use a referral parameter and we're going to take a look. Which page sends you to traffic so you can use this information later on in the analytics? By default Google Analytics already stores this information. But if you're using different subdomains or if you're driving traffic to an outside third party payment provider, it might get lost. Storing it in the cookie will assure that on the thank you page or when the conversion actually occurs, you will have this information in. You will be able to store it in Google Analytics. One more thing to note is that cookies are browser dependent. So they will only be stored in the current browser. Come to your Web site with different browsers, then these cookie won't be transferred. Also, if they visit in private mode or from a different device like mobile and then their PC, you won't be able to read those cookies. Now let's get straight to it. I prepared a testing page, where we basically have only the link that redirects us to our GTM test course shop. And you can see the domain up here. And if I click on it. Our shop loads and we can check in the page view events under variables. That the referrer was this domain. And this is exactly the thing that we want to store in the cookies. Once you're browsing the Web site. If I now go to blog. A referral to a blog page will be the previous page, so the default gtm.outtale.com So let's take a look at variables. And you see, the previous page is a referrer. What we want to do is remember the first referrer and save it in the cookie. And let's take a look how we can do that. The first thing we'll need is some sort of a way of reading and writing these cookies. For reading cookies. You can basically use a user defined variable and you can simply retrieve the value of a cookie in this variable. But for writing, them there is no mechanism currently in Google Tag Manager. So for this will go to templates and we'll add a new tag template. And we'll just search and the first one you see is a Cookie creator. So I just added to our workspace. For now, we'll just agree. And we have this tag template created. We have to set up some permissions in this template as well so go under the permission step here, you will see all the permission. This template has so it can log to console and you can change it or it can set cookie value. Inside this section we need to set all the cookies that we want to use. Let's just change this into what will be storing inside "original_referrer". I'm going to save it. And now we can actually do some work. So the work process is going to be like this. First, we need to check if the cookie is already set. If it is, then we already have this original referral and we shouldn't set it again. If it's not set then we have to get the value of the referral and store it in the cookie. For this, we're going to create a new tag. And we have to check it on all pages. But this won't give us the extra information we need so we have to create a new trigger for that. And we'll create a new page view trigger as we wanted to run on all pages but with an exception, only if this cookie hasn't been set yet. So we have to check a variable that holds our cookie value and check if it's set or not. We don't have this value yet because we haven't created it. So let's create new variable for reading cookies. As I mentioned, we have a variable type already set. And here it is, first party cookies. So we can just select it, set a cookie name. And now we have to make sure that this variable hasn't been set before. Unfortunately, Google tag manager doesn't give us any way of checking if a variable has been set or not. So we'll just check if equals "undefined". Let's name, the trigger. OK. This tag is going to fire on all pages. If the cookie hasn't been set yet. So if this is the case, then we need to set this cookie up and we can do this by selecting our newly created template cookie creator. Name it and set a cookie value for this. We'll just use the variable referrer. And now we need to select the expiration mode. This basically defines when will the cookie expire. So by default, the session is selected and session is tied to only the session of the browser if the browser closes. This cookie will be lost if we want to remember this for longer. Let's just set it up for 30 days. We're basically done. Now, we can test if this works. Let's go back to our referral page and let's click the link. When our page loads, we can check the page view event fired and we'll see that our cookie creator has triggered successfully if we click on it. We'll see that all the constraints have been met. The cookie referrer hasn't been set before and that everything works. Now, how do you check if the cookie has successfully been set? There are some chrome plugins you can use for that, or you can use a native developer tool of your browser. If you're using Firefox or Chrome, you can simply activated by pressing "F12". What we're interested is the application part of it. And in the application, you will see that under storage we have cookies. And if we select our domain, we'll get all the cookies that have been set on this domain. So let us search for our cookie. And as we click on it, we see that the value has been correctly set to this domain. Now, we can also check our variables to see if our first party cookie has been read successfully. And as we see the cookie referrer variable that we have set also reads the same value. But, this value isn't formatted nicely. So let's fix this first and then we'll refresh the page and see if the cookie gets reset or if we only get the previous value. So to fix this, we can go under the variables and under our cookie referral variable and we can enable URI decode cookie. This basically replaces all those encoded characters with the normal ones. And you will see the crrect URL. . Let's just save it. And refresh it. And let's click on, for example, on our blog. Now, if everything works correctly, we shouldn't see the tag firing any more. And already in the summary, we don't see it. But just to make sure we can click on the page view, and true, this cookie creator hasn't been fired. We can click on it and we'll see that of course, cookie referrer variable has already been set. It's not undefined anymore. And that's why this trigger didn't fire. If we go under variables and find this variable then we can also see that the URL looks much nicer. This is basically it. We have this value stored and it's gonna be in the cookie for 30 days. And you can do with this variable now whatever you want. 9. Simplifying UTM Links With the Help of Lookup Tables: In this lesson, I want to introduce to you look up tables. So a lookup table is basically an array that holds indexes and values and assigns an output value based on the input one. Let me just quickly show you how this looks. I'm just quickly going to open on a lookup table just so you can get a better idea about it. OK. So as you see, we have an input variable and based on the type of the input variable. For example, 1, 2, 3 or 4 we define an output value. For example, one in word, two, three and four. So what this lookup table would basically do is translate numbers into words. Why would you need lookup tables? You could use them, for example, if you're running your same container on multiple accounts and have different Google analytics code. So this way you could tie one domain to one Google Analytics account and the second domain to another one and so forth. The same goes for, for example, Google ads ID and maybe Facebook pixel and so on. So this is one case. Another one could be that you have, for example, affiliate ID and then you can assigned each ID to an affiliate name and store it maybe Google Analytics or somewhere. So when you look at the reports, you immediately know from which affiliate you're getting the traffic from. Not that you only see numbers. Or in our example, as I will show you, we'll basically create UTM parameters from hash fragments in the URL. Let's say you have a UTM parameters for a specific campaign and you're driving the traffic from an email newsletter to your shop and you're doing a hat sale. For example, in the newsletter and usually what you would do, you would add all these UTM parameters in the URL. But this looks long. A lot of times you can make mistakes when people copy them, reuse them. If you're not proficient enough in writing this straight up, you have to use some other tools. You can use a more cleaner and simpler version, which also sort of hides all these parameters. And it kind of looks like this. So instead of all these parameters, you can use this hash fragment and just create those UTM parameters in Google Analytics based on these. And this is exactly what I'll show you how to do. First things first. What are these fragments? These fragments are usually anchor links on the Web site. So if you click on a specific link and it just drives you somewhere on the same page. This is usually achieved with these anchors. And since Google Analytics doesn't track them, they're the perfect tool to replace UTM parameters. I would suggest that you should have a separate plan, at least for these so you won't mix up all these campaigns. There's one downside for using them. If you have a lot of single pages that use hash tag ragments for links or for the navigation throughout the page and you are pushing your campaign to that specific section, then you cannot use two different hash tag fragments. You can only use one at a time. So in that case, you probably won't want to use this method. But as the purpose of this whole experiment is to show you how lookup tables work, let's get started and we'll see. OK. So the first thing we need to do is get this value from the URL and we have to store it in our user defined variables. And how we can do that is quite simple. We create a new variable and we select the URL because this is the part of the URL and then we just select which part of the URL we want to save in our variable. And we're just select the fragment part. We're going to name the variable. Next, we need to create a Look-Up table, so we'll go back to our variables and we're gonna select a lookup table before we do this. I want to point out that there are actually two variants of this table, and the one we'll be using is lookup table. But there's also a RegEx table which works really similarly. But instead of indexes, it uses patterens. And I'll explain how it works after we finish this. But for this purpose, we'll just use a lookup table. The first thing we need to select is our newly created URL fragment variable, which will return only the URL fragment part. When we're planning our campaigns, you should decide on what these values or what these patterns should be. I like using a "C_1" as a campaign underscore and then the number of the campaign. This specific lookup table will return only one part of the whole UTM series. As you can see in UTM parameters, we have source, we have medium, and we have campaign parameters. And the first thing we'll do, we'll just set it up for a campaign. If we want to set it up for medium and sources, as well, then we'll have to create two more lookup tables, which will do in just a second. So this is going to be related to the campaign section. And for "C_1" we will select the hat sale. And then, of course, we can have another campaign. "C_2", which will choose as a spring sale. So basically, for every campaign that you make, you will have to add a new row. You'll have to assign it a value and then assign the UTM parameter that would correspond to that. Now we need to create two more Look-Up tables. And for this, I'm just going to use the GTM copy and paste and I will duplicate this variable two times and then I will just basically update them and rename them. All right. And let's add another one. Now, let's just modify those tables. So the second one will be medium. And will make it an email. And for the source, they can be newsletter. All right. So we have both of our campaigns set up and we can save those variables. Now, every time that you want to add a new UTM campaign, you basically add one row in the campaign medium and source section. After we do this we can now just check the value variables on the Web site. And then we can create a tag that will fire them in the Google Analytics. So let's refresh it. Let's go ahead and refresh this one. If we select now the page view and go under variables, we'll see if those three variables have been populated correctly. OK. So here they are. If we write a different campaign we'll see that those parameters will be populated by the other campaign. So spring sale. OK, so let's put all these variables in our Google analytics. Let's do this now. For this to work, we don't need to create a new tag we only need to modify an existing Google analytic settings. Basically, Google Analytics allows us to send some extra data with each hit or page view. And if we are using Google analytics settings, then you can simply send this data which all those events. You go under your Google analytics settings, click more settings and you have a bunch of things you can set here. And we're going to focus right now on those UTM parameters. So let's set the fields. We'll add a new field and we'll choose campaign source. And for the value, we'll just add our look up table, with UTM source parameter. We're gonna do this for all three. All right, so let's see how this works. Now we can simply check it by clicking on Google Analytics, page view, and we'll see that some extra parameters have been sent with our Google analytics settings. We can also verify this with our Google tag assistant and we click on Google Analytics. And under campaign data, we're going to see that are compain data has been populated. We can also verify this in Google Analytics as we see that this UTM parameters have been successfully pushed here as well. If we click on the email, we'll see. It's the "Spring sale" campaign. And if we change it to the first one. A different UTM parameters should be sent. Let's just check it quickly. And it says "hat sale" and we can verify it in analytics as well. This is one of the ways you can use lookup tables. I just want to quickly show you the RegEx tables as well as I promised you. And you'll see that there's not much difference upfront. You'll get the same interface. You can simply add rows, as you did before. Difference is that here you input the RegEx pattern instead of an index value. It basically means that you're not gonna translate a specific value into specific output. . But you're gonna match a pattern and everything that will match that RegEx pattern will translate to the same output. And this is basically it for to lookup tables. 10. Subdomain Tracking: In this lesson, I want to quickly talk about how you can track all this data across different subdomains. I'm not going to talk about cross domains so between different domains you might own, but only between different subdomains. What I mean by that. If we take a look at the sub domain is the part that is in front of the domain. So, for example, it can be shop. It can be blog. It can be www or something like that. What I want to talk about is how you can enable tracking in Google Tag Manager as well as the Google Analytics. So you will have joint data from all those domains in one place. So why would you want to do this? The first thing is you don't want to have fragmented sessions. If you have a blog on a different sub domain or if you have a shop on a different subdomain or anything else, you want to see the whole story of your user. You also want to have conversions properly attributed. Most of the things we'll check are on by default. So you shouldn't have any problems tracking it already. But I just want to show you how to check if everything is setup correctly. The first thing we'll go under variables and into the Google analytic setting variable. We have set before and we'll check if the cookie domain is set to auto. This is set to auto, then Google Analytics will automatically determine the best domain to set the cookies to. As we talked in the cookie section, you now know that you can set cookie domains to your whole domain or just specific sub domains. And if you have them set here to a specific some domain, you have to change it to auto. The next thing we'll have to check is in Google Analytics. We'll have to go in the admin section and under the property tracking info will click on the referral exclusion list. This is a list that excludes domains from the referral traffic. In the cookie lesson we were saving this referral domains into the cookie and sending it back to Google Analytics, which can simply add those domains to the referral exclusion list. And you won't need to do that. This is especially useful if you're using some sort of third party payment providers and you're driving your traffic from your domain to their domain to verify their payment and they drive the traffic back to your thank you page. If you don't add them to the referral exclusion list, all of your conversions will be attributed to that third party payment provider. If you drove some traffic from social networks or from organic traffic, the conversion won't be attributed to them. For this to work for all of your subdomains, you just input your full domain. If you're hosted on a specific server where your full domain is basically a subdomain, then this is a little bit different. But if you own your own domain, this should always be the case. One more thing to note is that this whole process of tracking subdomains will only work if you're using the same Google Analytics property on all the subdomains. If you have multiple properties and you use each property on each subdomain, then this will not work. So, for example, if you're using the same property on the shop.your-domain or blog.your-domain . This will work okay if you're using different properties for those two subdomains. This is unfortunately not going to work. So make sure that you're using the same property on all your subdomains. One more little detail I want to mention is that once you start tracking different subdomains, you will get mixed pages under your pages lists in Google Analytics and you won't be able to tell which page goes to which subdomain. I would suggest you Google how to enable this in Google Analytics. It's not that difficult, but it's gonna save you a lot of time. 11. Visibility Trigger: In the previous section, under scrolling distance, tracking lesson, we talked a little bit about shortcomings of that method. In this lesson, we will talk about visibility trigger and how you can more accurately track when person scrolls to a specific element on your Web site. So let's first look at some of the examples where this would come in handy. If you have a long page and you want to see how many people actually saw a specific section. For example, let's go to our blog post and let's scroll of a little bit further down the page. You can see we have sort of like a featured product here, and we have another one a bit lower down the page. We also have a live reply form, but we could also have a registration form and any other kind of sections that we would want to see how often they are viewed. There are also some other cases when some elements are dynamically shown on the Web site. Like when you submit a form and you're not redirect to a thank you page, but instead you just get a confirmation pop up. Or, for example, on the checkout's page, you leave a coupon and there might be a problem with it or if it's successful and pops up. All these things that can basically track with visibility trigger. So let's go back and see how it works. Let's go under triggers and create a new trigger. We see it under "user engagement". And if we select it, we get all these options. Let's go slowly through what you can actually do with this visibility trigger. As it kind of hides two different functionalities in one package. Let's start first with the selection method here. We have actually two options one is ID and one is CSS selector. The second one is tied to the selection. If we select an ID, then it's going to say element ID here. If we select the selector is going to write element selector. Right. So the other part is when to fire this trigger. You can fire it only once per page, once per element or every time an element appears on screen. If we select once per page, this trigger will trigger only once on a specific page. If we select ones per element and we have multiple elements that might trigger this trigger, then it's going to do it once for each element. And if we select every time an element appears on screen, that basically means no matter how many times we pass this element, then this trigger will be fired every time. The next thing is what is the minimum amount of this element that should be visible on our screen before we trigger this event? Let me just show you what I mean by that. So if I go back to blog and if I scroll to this feature product section now, it's basically almost 100 percent visible. If I would scroll up and just show it partially. And this would be, I don't know, about 10 percent or this is over 50%. So we can specify if somebody scrolls just like one third of the element visible, that we don't trigger this trigger. So we can define here how much of the element we wanted to be visible. Have in mind that if the element is really small this will trigger immediately. And also, if it's too big, then it might not fit in the viewport and this trigger might not be fired at all. The second thing is set minimum on screen duration. This is sort of like the workaround we need for the scroll where we triggered the scroll event. Only after the person has spent 30 seconds on the Web site. Here, we can set amount in milliseconds, for example, if we want the element to be visible for two seconds in our viewport. And this will enable us to trigger this event only when a person looks at the this specific section for more than two seconds. If they just scroll past it really quickly, this trigger won't be fired. The last checkbox, which is "observed on changes", is basically the functionality of this trigger that allows you to trigger it when an element appears on the Web site. As we saw in the checkout example. Let's create this trigger for that as I mentioned at the beginning, we need either element ID or a CSS selector. And I'm gonna explain it a little bit more about how to actually obtain them. So let's go back to our blog example and scroll through this beanie section. To be able to get the ID or the CSS selector of a specific element you will have to look at the HTML code. We can use the developer console. This is the same thing we did when we were checking if the cookies were successfully saved. So let's press F12 on our keyboards and let's hide the tag manager for now. And under the Elements section, you see we have the whole HTML of this page. Then we can simply click on this arrow where it says select an element on the page and we'll be able to select different elements like this button, maybe this paragraph. And we want this whole section to be selected so let's make sure it's colored in blue and let's click on it. Now when we scroll down in the HTML, the elements also get selected so we are currently at the correct position. And if we look at these elements, we can see there are a bunch of parameters set here. If you don't know HTML, basic yet then I would suggest you get familiar with it. For our trigger we need to pass either a ID or a CSS selector. And currently we only see that this element has class and style parameters. So there is no ID parameter. So we have to go with the CSS selector. Similarly to the button click lesson we can use the class name for this. There are a bunch of class names here and we can see that there is also a feature product class name here. We can use this one for the trigger. So let's go back to our tag manager and do this now. Since you can select really specific elements on the Web site by using CSS selectors, it's not enough to just paste our class name here. I would also suggest you, if you don't know how to work with CSS selectors, that you check out this topic as well. For class names, you have to append "." in front of, the class name and so I'll just do this. We also have some built-in variables that we can enable and we'll do this before we test our trigger. Here at the bottom you'll see the visibility variables and I'll just enable both of them. This is it. Let's test it out now. Let's hide the developer console for now by pressing F12 again. And let's scroll down our page until we get our featured product in view. As you see, as soon as we do this and the two seconds lapse, we get our element visibility triggered. Let's look under the variables to see our two newly created variables. The first one is percent visible, and it's 93.4. This is how much percent of this element was visible at the time this trigger fired. And on-screen duration, which was set to 2 seconds or 2000 milliseconds. So this trigger works great. Now, if we change our trigger to trigger every time an element appears in the viewport or on screen, we'll see what happens. Let's refresh. . Let's scroll down now and we'll see the element. Visibility trigger fire. If we move past it and come back it's going to fire again. Of course, it takes two seconds as we set up this delay. And if we scroll it and go quickly over it, you'll see that no element visibility triggers fire and if we go really slowly, Yes. Again, after two seconds in the viewport, this trigger fires. Now, you could basically set up Google Analytics event trigger and fire an event in your Google analytics if you would like to track these events. But there is one more thing I wanted to show you. So let's scroll a little bit further down the page and let's open up the developer console again and let's inspect this title. As you see, this title has an ID of "hoodie". And this is also the value that we can put in our trigger. Here the things are a little bit simpler because each ID on the website should be unique. So we can just copy it and put it in our trigger. Change it from CSS Selector to ID and just paste it in. Let's save it and we'll test it. Now, this trigger won't fire on the feature product, but it's going to fire on this title. And you see the elements, visibility triggers when we scroll up to this ID. And it's not going to trigger on any other element. So this is a really powerful tool for you to track specific elements on Web sites. The other thing that I wanted to show you is regarding the showing of an elements on the Web site, which wasn't visible before, as we checked in our example. Let's go back to our cart. Let's just click apply coupon. If we want to have an action tied to when this pop up shows on the Web site. If you have registration forms or contact forms where you don't redirect people to thank you page, but you just show them a message saying thank you for your submition we will get back to you. I currently don't have any such forms on this Web site so this is why I'm going to show you on this example. By the same logic basically applies there as well. Before we can have our trigger triggered we have to get some information about this pop up. So let's open the developer console again. And let's inspect this element and we can see that the class name for this element is "woocommerce-error" element. Encapsulating this error is "woocommerce-notice-wrapper". For example, if we're write and a valid coupon here then this message will be just "woocommerce-message", not "woocommerce-error". Depending on our situation and what we want to track we have to make sure that we are tracking the right thing. So if we want to track when the coupon code was applied successfully and we only want to track this, then we should use this class name. If you want to track any kind of messages that appear then basically we would use "woocommerce-notice-wrapper". So let us use this class name. Let's hide the console and let's change our trigger. We're going to go back to our CSS selector. We're gonna write "." and class name, and we're not gonna set a minimum on screen duration. We can set the percentage of something really low because we wanted to fire immediately. But then we will also want to check the observed DOM changes. Observing all these changes will take a lot of resources and strain your website. I would suggest you use it really carefully and that you set some filters to only trigger on specific Web site or at specific events. You don't want this to be tracking all over the Web site because your Web site will then feel sluggish and slow. And for our example, we can do it on the cart page. We'll also trigger it only once per page. Now just change it to "Coupon Code". Since there is no element visible yet, the trigger isn't firing. After we click, apply coupon and this error is shown, we see the element, visibility, trigger firing. We could now create a Google Analytics event that we would track and see whenever a coupon code has been applied. As you have seen now, visibility trigger is a really powerful tool to see when something is visible to your end user or when something appears on your Web site. You can tie some tracking events to it to see how your users behave on your Web site. And when a certain conversion you wouldn't be able to track. Otherwise, like these sort of pop up occurs and then you can set up your analytics in Google Analytics or any other tool to track those conversions. 12. Exclude Internal Team (Custom Dimensions): In this lesson, we'll take a look at how you can exclude internal traffic like your traffic, like your colleagues traffic or maybe some third party subcontractors. You can easily do this in Google Analytics by setting filters on your views, by excluding those people and their devices, by their IP. This might work really well if you want to exclude traffic from your office, but if people are working remotely or if they're moving a lot, this might not be the best option. Also, if they use different devices on their mobile network, this will be literally impossible as those devices don't have a static IP. We'll take a look, at two different ways how we can do this with the help of Google tag manager. First one will be using Google Analytics custom dimensions. So we'll take a look how you can pass different values in those custom dimensions, which, of course, you can then use for all your custom dimension related projects not just this one. It's quite easy to set this up, but it has some downsides. Like if you have multiple properties, then you'll have to do it for all your properties. Also, it's tied to Google Analytics only. So if you're using some third party tracking software, this won't work for them. Also, depending on how you perceive this can be a positive or negative thing. But the data will be sent to Google Analytics and filter there. So, for example, if you have different views, you can still have some views excluding your internal traffic and some views including it. If this is something that you wish to have, then this method will allow it to do so. The other method we'll take a look at will be using cookies. So we'll set them up in Google tag Manager only and you'll be able to control triggering of any tag for any software, not just Google Analytics for any user and any device. And of course, it will work for multiple Web properties that you might have in Google Analytics. So the basic idea behind those two methods is to create a special URL that you can send to your coworkers or different devices. And on all devices that they will click on this link we will be able to remember this and exclude them from future reports. So, for example this might look sort of like parameter at the end of URL, that says "nternal=true". And this is what will use. So let's start with the customer dimension example first. For this, we'll have to create a new dimension in our Google analytics. We'll have to go in the admin section and under custom definition we'll find custom dimensions. We can simply create a new custom dimension. When deciding on the scope of a custom dimension you can basically use session or user. If you want this traffic to be excluded forever on this specific device, or at least till Google analytics cookies are cleared then use the user scope. If, however, you want people to be removed, just temporary, then use a session scope. For our purpose we'll use a user scope. Let's just create it. After we do so, we get some extra data that we'll use a bit later on. So let's go now to our Google tag manager and set everything up. First thing we need to do is create another variable that will read from these get parameters. So let's just create it. This parameter is a part of URL. So we'll just select URL variable type and then we'll simply select the query parts. The query key is "internal", as we saw before. And this will basically store the value of this key into our variable. So let's just name it. If we want to send this into Google, into the customer dimension, we can again just simply modify the Google analytics, setting their variable and just go under the custom dimensions. We'll add a new custom dimension and we have to fill in two fields. The first one is index, which we'll get from Google Analytics, and the other one is the dimension value. . So first, let's get our index. As our custom dimension is created we get these parameters and you can see here that it says Dimension one. If you already have a couple of custom dimensions created, then this number at the end will probably be different. So this is basically the index value you should input there. For my case this is "1". So I'll just put in here "1". And for the dimension value, we want to add the variable we just created. This is basically it. We can save this. Now the only thing we need to set up is in Google Analytics. We have to go under the View. If you want to create a separate view with the filtered traffic, then you would create a new view. If you want to set up this filter under the current view you have, you can just simply go on there filters. Add a new filter, name the filter, select the field and select a custom dimension. We just create it. We'll filter the pattern by the value which in our case is "true" and will save it. And this is basically it if you want to use custom dimensions. Now, let's take a look at how you can do this with cookies. As we are using a template to write cookies from our previous examples, we have to first set the correct permissions. So let's go under the permissions tab and add a new allowed cookie value. We'll, just name it and save it. Now we can basically create a tag that will set up our cookie. So let's create a new tag. Let's use our cookie creator. We'll, set the cookie value to the same parameter. And again, if you want your tracking to be disabled only for the session, you can simply leave this expiration mode to the session. If you wanted to be longer than you can simply set it up here. We'll just set it up for 12 months. Now we have to create a trigger for this tag. We want it to fire only if the get parameter is set already. So let's create a new trigger. On page view. But only if our query parameter does not match "undefined". One more thing that we can do before we save this tag is to make sure it fires before any other analytics tags. We'll just write 50. Now that our cookie is set, we can create a new variable that reads it so we'll be able to exclude all other tags as we wish. So we have to select our first party cookie variable and get the value of our cookie. Now we can simply modify any trigger that is tied to the tracking tags you wish to exclude from these reports. You can also create a new trigger, simply select "page view" and exclude our internal traffic. Then you can simply use this trigger to trigger tags that you don't wish to fire when your internal traffic has come to the Web site. I hope this helps you better manage your internal and external traffic and all the analytics and reports tied to it. 13. Conversion Tracking Part 1 Simple Google Ads Conversion Tracking: Let's take a look now at how we can track conversions. So a conversion is any action that you wish your visitors to perform on your website or store. In this example, we're going to focus when a visitor completes a purchase. So why would you want to track this? If you're doing any sorts of ads and drive paid traffic to your store, then, of course, you want to know if those ads are performing well or if they're performing poorly. Also, if you're able to attribute a conversion to a specific ad, then you can optimize your campaigns by disabling the ads that don't perform well and increase the budget to the ones that do. In this example we're going to check out how you can do this for Google ads. First, let's take a look how this kind of a conversion would actually look like. If we go to our shop and we just select a specific product add it to cart and let's just complete this purchase. We are just going to fill in some test data and we'll place an order. After we do this, this is considered a purchase. And this is where we should mark that the conversion was completed. Now let's go back to Google tag manager and see which tags we need to create to be able to track this. Let's create a new tag. And for this purpose, we will use Google ads, conversion, tracking. Because we are using Google ads as an advertising platform. But before we start creating this tag, we first need to create another tag, which is called Conversion Linker. Linker.. Now, since Google ads make a Third-Party cookie, which might be blocked or limited by browsers like Safari, which only allow a 24 hour window for these cookies to be active. Then basically all the conversions that might happen after this window will not be tracked. For this purpose, we use a conversion linker which basically stores all the ad data in a first party cookie, and when a conversion happens, it's properly attributes a conversion to a specific ads. Let's set up our trigger to fire on all pages. And now we are ready to create our Google ads, conversion tracking tag. You can see it's quite similar to the remarketing tag we did in one of previous lessons. So we have to go to our Google ads manager and get some extra parameters that will be able to input here. So let's go there now. Under the tool section, you can see that under the measurement part, we get a conversion link. We can go here and create a new conversion. Just click on this plus button. And since we are working with a website, not an app or phone calls and we don't do any imports. We're just going to click on the website parts. The first thing we need to select is a category. And Google ads gives you a bunch of things you can track But we are working with purchases, so we'll select a purchase. We can leave the conversion name as it is. And under the value section, you have a couple of options. The first one you can use when you have, for example, one product and, you know, exact value of that product. So you can attribute the direct value of that product for this conversion. I would suggest you use different values for each conversion as we have more options to later on change this value to whatever we like. In the count section, you will set whether this conversion is tracked every time or only once. As you can read here in the comments, if you select every time. This is mostly recommended for purchases which are really important. And even if the same person in the same session creates two purchases, you want to track that. But on the other hand, if the same person sign ups for your newsletter, then you would want that conversion to only count once. There are some other parameters that you can set here. If you don't know what they do, I would suggest you just leave them on default. The click through conversion window basically is an attribution window. How long do you consider an ad to be responsible for a specific conversion. By default this is 30 days, you can increase it or decrease it. Or view through conversion. If a person didn't click on an ad, but only saw it and later on somehow got to your website. Then these ads would still be attributed, this conversion. And the last thing I would like to mention is just the attribution model. Lets just leave it for now as a last click. And let's create this conversion. Here we get some of the options, how we can install this conversion tracking. Since we're using Google tag manager, wWe're just going to click on this. And now we got our conversion ID. Which we are going to copy and paste in our Google tag manager. Then we'll go back and we're all do the same for the conversion label. And as you see, we can set a conversion value here. But for the purpose of this example, we're just leave everything else intact. Now we have to trigger this tag and we cannot trigger it on all pages since that would happen every time. We only need to trigger it when a person completes a purchase. So we'll have to create a new trigger for this. We'll create a new page view trigger. But we're going to limit it to just some page views. And to know to which page views we're going to limit it we'll go back to our store and we're going to check the URL. And as you can see here, the "order-received" part kind of signifies that we received this order. So we can select these part. Go back to we Google tag manager. Go to click URL and in the Contains part, just basically paste this section. This will now only trigger on this subpage. Let's now just save this tag and test it out. As we refresh our order, we received page, we will see that our Google ads, conversion tracking tag has been fired. We can also verify this in our Google Tag Assistant. And we see that Google ads conversion tracking is working properly. Now, if we go back to our Ads manager. We'll see that even though we have just triggered, a purchase. The tracking status is still unverified. This will stay unverified until somebody actually clicks on an ad and converts. You can do it yourself or you can wait for a real conversion to happen. And then the tracking status will change to confirmed. This is how you can simply track conversions. If you want to track conversions with Facebook ads, then you would set it up similarly, as we talked in our custom Facebook events lesson. 14. Conversion Tracking Part 2 Custom Variables & Data Layer: In the previous lesson, we checked how we can track conversions in a simple way. And in this lesson we'll see how we can send some extra values with that conversion to our Google ads manager. Specifically, how we can send revenue and transaction ID. So, first off, why would you need that extra data' When you have the value of a purchase you can then calculate return on ad spend. How much invested in advertising and how much you got out of it. This metric can help you better optimize specific ads and specific campaigns. So if you have a specific ad that has a lot of conversions, but all of those conversions are really low value, then you would disable those ads. But you might, on the other hand, have some ads that have less conversions but all the purchases there are really high value. So you would probably focus on those groups of people and target them more specifically. For this example, we're going to use our store based on WordPress. If you are using Shopify, Squarespace or any other e-commerce platforms, then this will be a little bit different for those. So, as I said, we are going to be working in WordPress with a Google tag manager plugin that will push all this e-commerce data in the data layer. In one of the first lessons I already mentioned, the data layer is JavaScript object that holds different values. And it's also a Google tag manager's central repository of structured data. How does this look? We can quickly check on our shop. In the debugging panel you will see a tab called Data Layer. And if you click on it, you'll see which current values are stored in the data layer. There are multiple ways of pushing this data to data layer. As I've mentioned, will be using this plugin that automatically pushes this data for us. But if you don't have this plugin, then you could, for example, do it with the help of JavaScript. Or you could ask a developer to develop a solution that pushes all the values that you require in the data layer. We're not going to talk about these two options in this lesson. So if we go to our WordPress Dashboard, you'll find that under the settings in the Google tag manager plug in, there are a couple of settings you can check. So if you go under the integration tab and under the woocommerce part, you'll get a list of checkboxes that allow you to send extra data in the data layer. If you're using a classic ecommerce tracking, then check this checkbox. But if you're using an enhanced ecommerce tracking, then check this box. I'm using an enhanced ecommerce tracking, so I'll use this option. Let's just save these settings so the plugin will be able to send this data to the data layer. Now, before we are able to use this data, we will need to create a variable that holds or basically reads this data from the data layer itself. So we'll go under the variables and we'll create two new variables. The first one will store the revenue and the second one will store the transaction ID. If we scroll down just a little bit, you'll find a data layer variable. Now let's go back to our website and do a conversion so we'll be able to know which data from which variables we need to read and store in our newly created variable. OK, so let's proceed to the checkout. And let's complete the order. OK, so if we go now under the data layer, you will see that we get more information from the purchase itself, which was passed down by the plug in. As you can see here, we have a new section which is called e-commerce, and it holds a bunch of values. What we need to get is the revenue parts and ID part of this out of this data layer. Now, how data is structured in data layer. Is important because when you'll be trying to get these values out of the data layer, you need to be aware of how the structure looks like. If you want to get to the ID part, it's not going to be enough to just write ID because there might be multiple ID parameters inside the data layer. So we have to kind of traverse these objects to come to this ID. We need to go step by step. So we have to use a key and then we have to use a subkey and another subkey and so on. Those subkeys and keys are separated by a dot. For example, if we want to get to our ID, we would use an "ecommerce" and just copy it here. Then, write dot. Then we need to be careful because the next parameter is actually currency code. But we are trying to get to the ID. And you need to be aware that the sub keys starts with these parentheses and are indented a little bit inside. So this is a new one and this is a sub parameter. And this is another one. The next one in our list is the "purchase" part. And we'll write the dot again, and then we have "actionField". and the dot. And if you're writing them down and not copying them, be careful of the caps as this is case sensitive and it should basically be identical as it's written in the data layer. And now we come to our "ID" part and we can copy our ID as well. All right, so this is our data layer variable name, and I'm just going to coyp it as we're going to reuse it for the revenue as well. And let's just name this variable and save it. We'll create another value for the revenue. And we'll paste it here and replace the "ID" with the "revenue". . Now that we have our values created, we can again test it just to make sure that they are actually stored in the variables that we just created. So we'll refresh the page and we'll go back to our store. Will need to do the whole process again as the purchase variables are passed on the data layer. only once you complete a purchase. Not if you refresh the page. So let's just do it. All right. Now let's check if our newly created variables actually hold the correct values. So we have the conversion revenue and transaction ID, and if we check in our data layer, we'll see that the revenue is 65 and the transaction ID is 97, which is correct. OK, now that we got those variables, we can modify our existing tag. We'll go to our conversions tracking tag and we'll add those two variables in conversion value and in transaction, ID respectfully. OK, now, basically, we're almost done. But this conversion tracking tag is triggered on page view. Now, if our customers accidentally refresh our order received page, this trigger is still going to fire and it's going to trigger this tag we created. But there won't be any values in the data layer variable. So let's just try it. Just refresh the page, and if we check. Now, these two variables we'll see that they are "undefined". Now, if we go under the container loaded, we'll see that our conversion tracking tag was still fired even though these various variables were empty. Now, there are two ways we can solve this. One way is that we modify our trigger. Simply by adding a new condition here and checking if one of those variables or both are undefined. But I'm going to show you a different way of triggering tags with custom events. So let's just close this. Now, unfortunately, we'll have to repeat the whole checkout process. All right. And we're back. The cool parts of that plugin is also that it creates a custom trigger and it's triggered only the first time the order is completed. If we tie our tag to this custom trigger, then it's only going to fire when this custom trigger is going to be present. So how we can do that is by copying this custom trigger. And we'll modify our tag to accept it. And just remove this trigger and create a new one. That creates a new trigger. And this time this is going to be a custom event. And now we paste in here the name of this custom event we just copied from the debug panel. We'll name it and we'll save it now. This is now done and we can check it if everything works as it should. So let's just save this tag and we'll refresh the tag manager. OK, let's just make sure everything works now. In the summary, we can see that our conversion tracking was fired, but if we check on which event, we'll see that it was fired only on this custom event. So it works OK. Now, we can also check if those two variables have been properly sent to ads manager by clicking on Google tag assistant and going to Google ads, conversion tracking. And we'll see that a conversion value of 26 was also sent there. Now, if we go to our Google ads manager. After these conversions get tracked, you will see a conversion value for this conversion action listed here. Also in your ads campaign. And you'll be able to see how much revenue each ad or ad group was bringing in. 15. Google Analytics 4 Setup & Event Triggering: In this lesson, we'll take a look at how we can set up Google Analytics 4 or GA4 for short and how to trigger some predefined and custom events. Let's first set up a new tag. You'll see that under the tag configuration, we have tag types for Google Analytics 4 configuration and events. So let's click on the configuration. First, what we have to get is the measurement ID. So let's go back to our Google Analytics and get it Right now and in the old version of Google Analytics. And I'll show you just quickly how you can convert this property to GA4. You can simply do it by clicking on this setup assistant and it will guide you through like two or three steps which you have to complete to transform this property into the new one. You'll still keep this old property and you'll just get a new one. Or you can create a new property, and select the GA4 set up. I already created mine. And if I just click on this, you'll see that it's already created. So I can see it here. Or I can select it under my properties list. Here in the new GA4 admin property settings will go under the data streams. And we'll click on our data stream. And here we get our measurement ID. So the interface of this new Google analytics is quite different than the old one and I assume you are already familiar with it. If you're not, there are many tutorials out there that you can check and get familiar with it. I'm mostly going to show you how to set it up in Google TAG manager and we'll quickly go through debugging So you will be able to see and verify if all the tags you created this way work correctly. So let's copy the measurement ID and paste it back into our tag. We don't need to create a new variable as we did in Universal Analytics. In just a few minutes, you'll see why. So let's just trigger this on all pages. And let's name it GA4 - Page view and just save it. And let's see if it works. You can also see the new debugging mode of tag assistant, which we discussed in one of the previous lessons. The first thing we can do is verify if our tag is working in a tag assistant. And we see it does. . We can also check in our debugging window to see if the tag triggered correctly. GA4 PAge View has been triggered. If we go now, just quickly back to our Google Analytics and verify there as well. And will use the debug view. So we can see that the page view has been registered. There's some other events that triggered as well, like session starts, first visit and so on. So now every interaction with Google Analytics is basically an event. We don't have page views separate from the events or from sessions or any other metrics. Everything is recorded as an event with some custom parameters. So let's just check what Google has to say about this. So Google now has three different types of events. They have automatically collected events, as we saw with page view, sessions start, first visit and so on . And they have some recommended events for different situations like for e-commerce or travel or just general properties which apply to all websites. And then you also have custom events. And let's just quickly check what are automatically collected events, the Google stores. These are different ad clicks, app data, errors, file downloads, first opens and so on, screen views, page views. There's also scroll event if we'll find it. Scroll. So these are the events that Google automatically collects and for each event they collect also these parameters. The ones mentioned here, are collected for every event triggered even for your custom events. If we check now some of the recommended, for example, e-commerce events. We'll see, that they give you a bunch of events you can leverage like purchase and you can add properties to it. Or when you are when somebody's selecting an item, adding to cart, or whatever related to e-commerce. There are also custom events. And if we check how you can create those events, you'll have a great explanation here under this section. One thing I would like to mention before we go back on topic, please check the collection and configuration limits as they mostly apply to your custom events. If you have an option to use one of Google's predefined events or automatically collected events, do so. as there are some limits for custom events. For instance, five hundred custom events per app or per web. And there's also some limits for properties like 25 custom properties which you can create. This might seem a lot, but you might soon run out of them if you make all of the events, even the ones that Google provides totally custom. OK, so let's create a new event now. How we can do that is simply by creating a new tag. We already have GA4 events tag type in the configuration so we can simply start working on it. In the beginning, I mentioned we don't need to create a new variable for the measurement ID. And the reason being is we can select a configuration tag basically from the first one we created. From the page view, which was also the configuration tag. So we simply select that tag and then we can name our event. This event name is similar to the event name we had in Universal Analytics events and here under the event parameters, we can add as many event parameters as we want. We can add one, maybe two and so on. So let's go back to the Google Help Center and select one of the predefined events. For example, let's go with the purchase events. Just copy this purchase events and let's paste it in our event name. Let's, for example, use value, which is a required parameter. And we'll just think of a value, let's say 50, and then we can go back and maybe do a coupon as well. 20OFF. And so on. In a real world scenario, you would fill up these fields with dynamic values, you would gather from your store. But for now, we're just doing a test event and I'm just going to leave it as it is. We also need to trigger this tag. And from our previous examples, we already have a trigger order received. So I'm going to use this. Let's just named the tag and test it out. All right, now let's do a quick check, just to see if everything works. Let's place the order. All right, so the first thing we can check is in tag assistant to see if our event fired. And we can see that you have both of the events fired. The pageview and the purchase event. Event parameters, which we preset to 50 and 20OFF, have been also passed to Google Analytics. Now, let's just check it in our GA4 debugging tool. And as you can see, we got our first purchase event registered. We also have a lot of automatically collected events. Now, this new Google Analytics is quite different than the old one so I strongly suggest you get to know it better. But as you can see, setting it up in Google Tag Manager and creating events is quite simple. So you shouldn't have any problems of modifying the old events to the new Google Analytics 4. 16. The Wrap up: Congratulations, you made it to the end of this course! As you have seen, there are many different things you can use Google Tag Manager for. I sincerely hope these lessons will help you in your marketing activities. I set up this course as a platform upon which I will build in the future. So you can expect to see new lessons in the upcoming months. If you have any ideas about the topics you would like me to cover. Please let me know. Also if you have any comments or suggestions on how I can improve this course, I would be more than happy to hear them. Any feedback you give me helps me improve this course for other students. So don't be afraid to tell me what you liked and most importantly, on what you didn't. If you know someone that wants to learn Google Tag Manager, please share this course with them. And if you found it helpful, feel free to rate it and leave a review. Thank you again for sticking with me. And good luck in your future endeavors.