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

Playback Speed


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

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

teacher avatar Ziga Berce, Head of Marketing @scaleup, Entrepreneur

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

    • 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

      5:29

    • 4.

      Scroll Distance Tracking Part 1 Basic

      8:32

    • 5.

      Scroll Distance Tracking Part 1 Time Triggered

      5:37

    • 6.

      Click Tracking Part 1 Outbound Links

      11:05

    • 7.

      Click Tracking Part 2 Buttons and Other Elements

      8:04

    • 8.

      Reading and Writing First Party Cookies

      13:10

    • 9.

      Simplifying UTM Links With the Help of Lookup Tables

      13:21

    • 10.

      Visibility Trigger

      16:17

    • 11.

      Conversion Tracking Part 1 Simple Google Ads Conversion Tracking

      9:25

    • 12.

      Conversion Tracking Part 2 Custom Variables & Data Layer

      13:50

    • 13.

      Simplifying UTM Links With the Help of Lookup Tables

      13:31

    • 14.

      Detecting Ad Blockers with Tag Manager

      7:13

    • 15.

      The Wrap up

      1:02

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

921

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.

WHAT PEOPLE SAY

⭐⭐⭐⭐⭐
"Well, I'm a digital marketing manager with over 15 years of exp. This course was great as it add value to my work and fill up some blank space. Thank you and I'm waiting for the next courses from you."
 
Mariusz Maćkowiak

⭐⭐⭐⭐⭐
"Excellent course - Ziga goes above and beyond with this GTM course. It's terrific for beginners - but he also covers some surprisingly advanced topics as well. If you already has a basic understanding of GTM, this course will take your skills to another level. Bravo!"
 
David Eyler

⭐⭐⭐⭐⭐
"Amazing! Super informative yet condensed so you're not spending too much time learning basics. Highly recommended!!!" 
 Devin Mickles

SOME OF THE TOPICS WE WILL COVER

  • 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.

WHO IS THIS FOR

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.

Let’s get started today!

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

Head of Marketing @scaleup, Entrepreneur

Teacher

Hi, I'm Ziga and I help businesses grow with the help of marketing.

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 the bottom line through product-led growth.

In the past few years I've:

  ★ Raised 7.2+ Million USD through Crowdfunding (Kickstarter).
  ★ Grew two of the largest communities in the region with +20% YOY growth.
  ★ Built and managed international marketing teams ranging from 2 to 8 members.
  ★ Spearheaded eight successful interna... See full profile

Level: Intermediate

Class Ratings

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

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 want to show is how you can track time spent on a website with the help of Google Analytics. For this, let's create a new tag first. We will use GA4 event Tag, then we'll need to fill in the event details. First, let's select the GA configuration tag and name the event time on site. It would be great if we could see how long a person has stayed on the side. So let's also add extra parameter called time. But we want this variable to change every time an event is triggered. OK. let's check if we have any variables in our arsenal to achieve this. We can see that we have nothing appropriate in our past variables, so we'll have to create a new variable. Let's create one now. Under the predefined variables, we unfortunately don't have any variables that would give us back the elapsed time. We could use a custom JavaScript to program it to return the difference between the page load and now, but there's an easier option and we can discover more types in the community template gallery. I already know there's a variable called elapse time for this, but if you don't know, you can always search it here in the search bar. We briefly discussed the community templates in the previous lessons. But as you can see, there are sort of like scripts or variables that would extend the capabilities of Google Tag Manager. This one specifically, as it says in the description, gets the elapsed time since the GTM script started processing and this is basically exactly what we 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 you have to custom program it in JavaScript or you'll have to look somewhere else. OK, so let's just add it to our workspace now. 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 elapsed time in seconds. All right. 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 the time trigger, and we're going to name it time 20 because we're going to trigger it after 20 seconds. And we're not going to limit it. So we're going to select page host name again and match it with regex as we want it to trigger on every page. Alright, so we're all set and done. Let's just save it and test it. Now let's wait for 20 seconds. All right, now the tag is triggered and we see our custom events for every 20 seconds has fired. We can also check if everything works under the debug view and you'll see that our event on time on site with the parameter holding the seconds has been successfully triggered. All right, I'm not going to leave this event triggering every 20 seconds. I just wanted to demonstrate to you how you can use this trigger in a different way. So now I'm going to remove this custom event for every 20 seconds. I'll also remove the trigger and you can see because I haven't published the version yet, I can simply abandon the changes right here. So this is how you can use a time trigger. One more thing to note here is that this time trigger will keep on triggering no matter if there is a focus on your website 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 in the debug view. So this is not a super effective tool for measuring the correct time on site, but it is something that might give you some extra insights. There are of course some workarounds you can do to make this work better, like only triggering the event if the tab is focused. But this will require you to program a little bit of JavaScript for that, and we're not going to do that in this lesson. 5. Scroll Distance Tracking Part 1 Time Triggered: OK, scroll tracking is all good, but as you will see there are some problems with it. For example, if I scroll through this article quite fast. I obviously haven't actually read the article and the events are still triggered so this isn't the best way to measure if the visitor has seen or read the specific page. So is there a way we can improve this tracking? Well, one thing we can do is go back to our Google Tag Manager and not trigger this event only on scroll distance, but also only after a certain amount of time. This will have a better effect. If somebody has scrolled too fast, the events won't be registered, but if they actually read the page, the events will fire when needed. So let's go back to our triggers and open this scroll depth Trigger again. This time we want it to fire not just on specific pages, but we also 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 called elapsed time. So if for example, you want this trigger to fire after a person spends at least 30 seconds or more on our website. We can basically check if this variable is greater than 30. Now let's save it and let's try again. If we scroll now, you will see that the scroll depth depth event still fires, but if we check it, we will see that no tanks were executed and if we scroll a little bit further again. And go back, the same happens. Now. If we check the variable section, we will see that the number of seconds left isn't yet 30, but if we wait a bit longer so the timer passes 30, we'll be able to trigger the scroll event as well. So now if we scroll further, the next scroll depth event should trigger the tag. 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. We can also check it in our Google Analytics and we'll see that the 75% trigger has been successfully fired. If we scroll further down the page, the 90% will be registered as well. So this is a much better and more effective way of tracking scroll distance with the help of timers and this will give you more relevant data on which people are actually reading your articles and which don't. You have to keep in mind that this type of triggers only trigger once so when I scroll back up the page. They will not be triggered again. Keep this in mind when setting the duration of this timer. If you set it to low, it might not have the desired effect, and the same goes if you set it to high. Then a visitor could read most of your page before any of your events ever get triggered. OK, before we finish this, we can check if our filter for tracking is also working on some other sites. Because we limit it to blogs page only, if I go to our shop page, the tag shouldn't be firing. So let's test this out. And wait for 30 seconds and we'll check again in just a while. All right, the 30 seconds have passed. And we see that because our timer has triggered. And if we scroll a little bit further down the page and check the scroll dedpth, 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 weren't fired so if we click on our GA scroll tag. We'll see a Red Cross here, which means it hasn't been fired. You can click on any tag and you will get more details about the firing of this tag. And you can see that under firing triggers the scroll depoth on blog didn't fire. And why didn't it fire? Because the page URL doesn't contain blog even though the elapsed time in seconds was greater than 30. If we check the previous event, we'll see that here both of these constraints weren't 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're firing and they shouldn't be. 6. Click Tracking Part 1 Outbound Links: Let's now take a look on how we can track different kinds of clicks on your website. From clicks on buttons to clicks on outbound links and even internal links like find downloads, form clicks and so on. So why would you even want to track all these kinds of clicks? Well, the most common reason is to better understand your user behavior. As you can imagine, all the users on your website, what they do is click on different links. Different sub pages, buttons, call to actions, forms and so on. So what you want to know is the bigger picture of what is going on. For example if a specific sub page or a specific button has been clicked. Of course you might be interested on a specific page which links are clicked most often. And if you have some outbound links, uh like your partners for example. All your social networks. You would like to know which of these are most popular or most useful to your visitors. Of course, if you're doing some sort of affiliate promotion and you drive traffic to some other pages. Then you would also want to measure them as well. There are some of these cases that you can cover by tracking all those interactions. The first thing you really should have is 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 you get there. At the end, you're 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 need to do is set up a Click trigger so we can check it out on our website and see how it behaves and what we can gather from it. So we have two trigger options, all elements and justice links. The difference between them is 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 website and all elements will be triggered on clicks on any element or any part of your website. It doesn't matter if it's a link or anything else. And we'll check both of them, but let's just start with just links for now because it's a little bit easier. Once we create this trigger, we have a couple of options. The first one is wait for tags. If you check this you'll get some more options to set and what this does is basically it waits for any text that might be fired because of this trigger. If you can imagine, immediately when 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 it's tied to this trigger might not completely fire or fire at all. So in this case you would really want to wait just a little bit more 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, but you can change it if you want to. The other one is check validation and what this basically does is checks that link click will actually do what it's intended action is. Sometimes you can have a JavaScript blocking the execution of redirection of the link or execution of form 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 a script. Or something else? I'm just going to leave it unchecked for now. If you have selected wait for tags then you basically get a notification warning you that it should be run on just specific pages because every time you will click a link Google Tag Manager with pause it for this amount of time. So your page might really look slow and with this 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. Let's just name it and save the Tag. As we did for the time trigger, we also want to set some building variables to get extra data on the clicks that will be triggered O. Let's just go under the builtin variables and see what we have available. Under the Click section you can 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'll see that you don't use some of these variables. You can disable them at anytime. All right, let's test this on our website. As you can see, if I randomly click around the page, nothing happens. But if I click on let's say a block. Then you'll see a link click getting triggered. And if we click on it to get some more details, we will see that none of the tags are fired because we haven't set any. But if we go under the variables, we'll see that all these extra variables that we enabled are being populated. Click elements, click ID target and so forth. 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. We can do this by filtering to only some of the link clicks, not all of them, and then we have to select a variable that will basically define that. We could use our click URL to check 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 outer 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 outbound URL. We'll just select it outbound and we'll write here all the affiliated domains. What we need to enter here are now subdomains of our primary domain that we wish to group together and consider as the same domain. If for example we would write. This domain that we use. This will allow us to have all the links that we are not coming from this domain and sub domain to be considered. Then if you want to add a shop sub domain then these 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 domains. So we're almost done. And this domain variable will actually return true if the elements clicked is the outbound or false. If it's inbound. Now let's name it and test things out. OK, let's check if it equals to true and if it is then we'll trigger it and we'll just rename this click from all links to outbound links. Now let's save it and create a tag. If we want to log all these clicks in Google Analytics, we basically just select Google Analytics that will fire an event. We select the configuration tag and name the event however we like. I'll name it Outbound Click. At this point I'd like to mention the GA4 can track outbound clicks automatically if you set up Enhanced Measurement in the GA4. I'm just showing you this example, but you can alley this knowledge to other cases you might find useful. OK, let's continue. After you name the event, we can set some extra parameters. These are optional and if you don't need them, you don't need to set them. I'll just set the outbound link so we can see where they were redirected. To name this parameter URL and select the appropriate variable. Now let's just select the trigger we created. So click outbound clicks. We'll name it. And now 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 unbound link then we can see the GA unbound link click Tag actually fired. So If we click on it, we'll see this is an outbound link. And if we click on the previous one. We'll check it and see that this is not true. Now let's just close all these tabs because we don't need them and we can also verify in Google Analytics if you just go under the real time and events and we'll see that our outbound link has been triggered. 7. Click Tracking Part 2 Buttons and Other Elements: All right, so let's take a look now how we can track some other buttons like add to card or image click. On my setup this is an actual link, so the click on this button 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 JavaScript tied to them. For example this apply coupon button. 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 can track this kind of buttons or clicks anywhere on your website with Google Tag Manager. Previously we have selected just link event types. Now we're going to add a new trigger with all elements. This trigger will trigger every time we click anywhere on your website. So let's just test it. And as you can see. As I click on the website anywhere, the click event triggers. If I click in the form or cart, wherever I click this event gets triggered. If you want to filter to only register clicks on specific buttons. What we have to do is we have to set some filters. So let's take a look now how we can do that. First what we can do is we can click on the button itself then. We can check what variables got set by this click. We can see that we have a click class variable set and it's set to button. We also see that the click element is an HTML button element. We don't have any IDs or target set and we also have a click Tag set to Apply 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 they'll 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, quickly. I'm going to create a new GA4 event and name it. Apply coupon. We're not going to set any other parameters because we currently don't need them. We're just going to set the configuration Tag and select our trigger. Now let's save it. And if we go back and click anywhere on the page, the click event is still registered but this tag is not fired. OK, now what happens if we click Apply coupon button? Then. As you can see, our tag has fired as it should. Again, we can check why this is happening and we'll see the Click Anywhere firing condition 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 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. Now let's check it out. And as you can see 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 just on buttons because we know which class to use. So let's go back to Triggers and select Click anywhere and let's first rename it to Click on buttons. Now let's go back quickly and we have to make sure the click class contains button so We'll select Click class and we're not going to leave it at equals. Because that would mean that the whole class name has to be equal to buttons, and as we saw on some buttons we have some extra classes. If we want to target those buttons as well, we have to select contains and then we'll write button. Let's save it. Let's refresh our page. .And let's click on Add to carts. Let's check if this click and we'll see that the Tag fired. As click class contains the name button. If we go to the cart page. And we click on apply coupon. We'll see the same event fires. And if we check it in Google Analytics. You'll see that event apply coupon has been fired. Which of course is not good now that we are triggering it on all buttons. So let's just quickly change our tag as well. If we go back to our tag. And select Events. Click on Apply coupon and change it now to. Buttons. Then we'll change the name into button click. We can also set extra event to click ID. So if we have different buttons with the same text, we can differentiate them. Let's now save this tag. And test it out. Now we'll click on Apply coupon. And let's also go to the shop. And we also click on add to cart button. Now let's check in Google Analytics if everything fires correctly. And we should see the two button click events have fired. Of course, you can check all of this with Google Tag Assistant as well if you want to. This is the way you could track all the buttons and all the links on your website. You 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. 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. 11. 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. 12. 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. 13. Simplifying UTM Links With the Help of Lookup Tables: In this lesson I want to introduce to you lookup tables. So lookup table is basically an array that holds indexes and values and assigns an output value based on the input one. So let me just quickly show you how this looks. Just quickly going to open a lookup table just so you can get a better idea 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 words two, three and four. So what would what this lookup table would basically do is translate numbers into words. Why would you needs lookup tables? You could use them for example if you're running your same container on multiple accounts and have different Google Analytics codes. So this way you could say one domain to one Google. Analytics accounts and a second domain to another one and so forth. The same goes for for example Google ads IDs and maybe Facebook pixel ID and so on. So this is one case. Another one could be that you have for example affiliate IDs and then you can assign each ID an affiliate name and store it maybe in 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 e-mail newsletter to your shop and you're doing a head 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. You have to. If you're not proficient enough in writing these 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 it. Close you GTM parameters in Google Analytics. Based on this 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 website, 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 and list for this 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 them for links or for navigation throughout the page and you are pushing your campaign to that. Specific section? Then you cannot use two different hashtag fragments, you you can only use one. So in that case you probably don't wanna. 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'll just select the fragment part we're going to name the variable. Next, we need to create a lookup table. So we'll go back to our variables and we're going to select a lookup table. Before we do this, I want to point out that there are actually 2 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 patterns. 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 fragments part. When we're planning our campaigns you should decide on what this values or what these patterns. should be I like using a C as a campaign underscore and then the number of the campaign the 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 wanna set it up for Medium and Source as well, then we'll have to create two more lookup tables, which we'll do in just a second. So this is going to be related to the campaign section and for C1 we'll select the hat. Sail. And then of course we can have another campaign C2, which will choose as a spring cell 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 lookup tables and for this I'm just going to use the GTM copy and paste and I will duplicate this. Variable 2 times and then I will just basically update them and rename them right? And let's add another one. Now let's just modify those. Tables, so the second one will be medium. And we'll make it an e-mail. And for the source, they can be newsletter. Alright, 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 website and then we can create A tag that will fire them in the Google Analytics. So let's refresh it. Let's go here and refresh this one. If we select now the page view and go under variables, we'll see if those 3 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. For this to work, we don't need to create a new tag, we only need to modify an existing Google Analytics configuration tag. Basically Google Analytics allows us to send extra data data with each hit or page view. And if we are using Google Analytics configuration tag then we can simply send this data with all these events. So find the Google Analytics configuration tag and under Fields to set you can add extra parameters to send with each hit let's set this fields with our UTM parameters. We'll add a new field and we'll choose a campaign source. And for the value we'll just add our lookup table with UTM source parameter. We're going to do this for all three. All right, so let's see how this works. We can go back to Google Tag Manager Debugger and click on Google Analytics Configuration event and we'll see that extra parameters have been sent with it. We can also verify this in Google Analytics debug view. So let's go there now and click on Page View. And we can see that this extra UTM parameters have been successfully pushed here as well. And if we change the URL to the first campaign. A different UTM parameter should be sent. Let's just quickly check it. And as you can see, 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 wanted to quickly show you the regex tables as well as I promised you in the beginning and you'll see that they are in the different upfront. You'll get the same interface. You can simply add rows as you did before. The difference is that here you can input the regex pattern instead of on value. This basically means that you're not going to connect one value to another, but rather match a pattern. So everything that will match that regex pattern will be connected to the same output value. And. This is basically it for lookup tables. 14. Detecting Ad Blockers with Tag Manager: No one likes ads, but what if your business model revolves around ads? Then you want to make sure that your visitors actually see them. In this lesson, we'll take a look at how you can check if your visitors have an ad blocker enabled with the help of a small JavaScript and data layer. First thing we need to do is install a small script on your website. The link to the script is in the resources. If we take a look at the script, it's super simple. All it does is it pushes an addsallowed variable to the data layer and it sets it to true. You can also use this example to push any other variable you'd like to the data layer if you wish. What we need to do with this script is add it to a file called "ads.js". It's important that the file name is called "ads" or anything related to ads because adblockers check for specific keywords and if they find them in the file name they won't load the file. And if this file isn't loaded then the ads allowed variable won't be set. And this is what we'll be checking in the tag manager. So after you have created your file, you need to upload it to your server somewhere. I won't go into details on how you can do this as we talked about it in one of the previous lessons. After the file is on your server, you also need to load this script on your website. Again, the details on how you can do this greatly depend on the framework or solution you use for your website. In WordPress there are multiple plugins that enable you to load scripts in the header, and I have one of those already installed let's quickly go to WordPress and add this script to the header. I'll just go here and paste this script here. Now I'll just replace your domain with my specific domain. And then I'll save it. OK, we are ready to test things out. First let's just start the preview so we can see if the script gets loaded and if the data layer gets populated with the variable. Now let's check the data layer and we can see our newly created variable here. If we now enable the ad blocker and refresh the page, this variable shouldn't be present anymore. Let's check it now. And you can see that our variable is gone. Perfect. So let's now go back to our Tag Manager and let's create a trigger that will fire whenever we detect there is an Adblock enabled. 1st we need to create a variable that will read from data layer. We can do this with the help of data layer variable and in this variable name we'll just write adsallowed. Now if this variable isn't present, it will be undefined in data layer. But because we'll be sending this status in the Google Analytics as well, let's first clean it up a bit. We can reformat the value from undefined to false by going here under the format and click Convert undefined to. And we'll just write false inside. Now we can save this variable. If we now want to track all the people that have disabled the ads in Google Analytics, all we need to do is go under the Google Analytics configuration tag and add a new field we can maybe name it ads. And then just select our variable that will either say true or false. This way we'll be able to segment these people in GA4 and even do some comparisons on how many of our visitors have ads enabled. Now let's also create an event that will allow us to proactively check if ads are disabled. Let's create a new page view event and let's check if our variable does not equal true. This way our event will fire when the ads are disabled. Then you can simply create any tag you wish. You can either trigger an event or maybe show a OU on the page, or even hide some page elements that are useful to your visitors. This might motivate them to actually enable the ads to be able to view the content you provide. Anyways, let's just create an empty tag just so we can see if it really gets triggered only when the adblocker is enabled. For this I'll just create a blank HTML event and add the trigger we just created. Now we can test everything out. Let's wait till our page loads, then we can go to the Tag Manager debugger. First let's check the variables and. You can see that adds allow variable is set to true. We can double check the data layer and we see that the variable is here as well. If we check the tags, we see that our test tag hasn't fired. Now let's go and enable the ad blocker and let's refresh the page. Now let's check our debugger again. And as you can see, our test tag has fired. If we check in the data layer we also don't see our variable as the JavaScript file wasn't loaded. And if we go under the variables we can see that this one is set to false. This is a good way of detecting whether or not someone has their ad blocker enabled. Then what you do with this information is all up to you. You can be more proactive, or you can just pass it to your analytics tool for later analysis. 15. 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.