Google Tag Manager Tutorial 2021 for Beginners (with Google Analytics 4 examples)

if you are a digital marketer or digital analyst and you want to implement analytics and marketing code much faster for example google analytics 4 then google tag manager is exactly what you need but how to get started how to properly create your first setup without wasting too much time looking for the right learning resources in this video i will show you exactly that we will learn how to get started with google tag manager and how to install google analytics 4 with it but before we continue i have two more things if you want to learn more about how to get started with google tech manager i have published a free ebook which is called google tech manager for beginners in that ebook you will find some additional tips that are not mentioned in this video so if you want to learn more click the link below the video and download that ebook also if you want to learn more about google tag manager and google analytics then subscribe to this channel alright so let's dive in [Music] so what is google tag manager the best way to explain that is to show an example here's your company or maybe that's your client's company and that company has multiple websites in order to measure the effectiveness of those websites and how do they contribute to the overall goal of the business those companies usually use tools like google analytics or google ads or something else and that's where you as a marketer or analyst join the game because you will be the one who will be using those tools and in order to get some data into let's say google analytics you need to add tracking codes to those websites and in the older days the only way to do that was to ask a developer and since developers are quite busy and they have their own priorities tracking codes are somewhere at the end of the list of those priorities that's why usually it takes days weeks sometimes even months to implement those tracking codes for a developer and that's where google tag manager becomes very useful because in many cases you can add those tracking codes to the website by yourself of course keep in mind that google tag manager was never meant to replace developers fully and the best results are achieved when you work together with google tag manager and with a developer but with gtm there are many cases where you can actually implement tracking codes on your own and all of that is possible through the interface of google tag manager so let's take a quick look at the overall idea of how google tech manager works you have a website and then you install or your developer installs google tag manager on a site so what you can do right now is to configure google tag manager to keep looking for certain interactions on a page like clicks conversions form submissions something else and if those interactions occur google tag manager can be configured to send that particular data to your other tools that you are using for example google analytics or google ads so in other words google tag manager is a middleman between your website and other tools and i'm not talking about just google products like google analytics you can also send data to platforms like facebook pixel hojar or anything else so in the older days this part was controlled by a developer now in many cases you can do that by yourself with google tag manager but i would like to emphasize this once again that you should not try to eliminate developers completely with google tag manager there will be many cases where you will be able to achieve things on your own but in some cases you will still have to rely on developers because if you combine developers input with google tag manager and your input you will achieve the best results now let's have a quick overview of google tag manager benefits first of all all of the tracking codes are controlled in one place this is useful and this is convenient because if you want to change something you know that the codes that you want to change are stored in one place and that is google tag manager's interface then you will be less dependent on your id department of course as i've mentioned before there will be some cases where developers input is necessary but in situations like click tracking form tracking in most cases you will be able to achieve things on your own then the time to implement those tracking codes is much faster because if you had to ask a developer to implement those codes you had to wait weeks maybe days sometimes even months but in this case you can launch your tracking codes on the same day of course if you know google tag manager well enough google tag manager is a very popular platform and that popularity still continues to grow so what does it mean is that there are many resources and many places where you can learn google tag manager for example analytics mania is one of them google tag magic is free of course there is an enterprise version but that one is needed only for very large companies and if you are let's see small or medium business you can definitely work with the free version because it still is very flexible and powerful then there are tag templates so what does it mean is that in many cases you will not need to work directly with javascript you can just enter your account id maybe some other additional information and google tag manager will do the rest and will send that information to other tools so the tool is quiet friendly for non-developers but of course it is not as easy to learn as you might think and there will be definitely a learning curve then google tag manager offers auto event tracking functionality so what does it mean that you can track certain interactions with the built-in functionality in gtm like clicks scrolling youtube video interactions when an element appears on the screen and so on if the audio event tracking capabilities do not work in a certain case then you can find some custom functionalities that are provided by various members in the gtm community multiple members of the team can work in google tag magic container at the same time there are workspaces there are versions so for example if you publish your changes and something goes wrong you can revert to the previous version also you can limit permissions of your employees or your colleagues or partners or whatever so if you don't trust someone enough to give them all the permissions of the container you can limit them just to edit but not publish for example and finally there is a helpful community for example we have a group on facebook there there's also official google tag manager form created by google there are some chats on slack and i mean there are many places where you can discuss and get help or help others to work with google tag manager so that was a quick overview of the idea behind google tech manager basically it is a middleman between your website and other tools if you want to track certain interactions and send data to those tools you can do that with google tag manager google tag manager does not replace tools like analytics or google ads it is just a way to send data from your website to those tools so in other words ga and gtm are not competitors they work best if you combine them together in further videos i will show you how to create your first setup how to make sure that it's working and how to publish those changes live first let's create a google tag manager account and container to do that go to google.com tag manager and you will see a page that looks something like this even if it looks a bit different for you just keep looking for a button that says start for free click it and then you will see different view depending on whether you have an account or not so if you are completely new to google tag manager and you never had access to any google tech match container you will see a view like this and if you already have at least one google tag manager container a view might look something like this in that case click create account and you will be redirected right here now let's create a google tag manager account here you can enter your company's name just for sake of demonstration purposes i can enter something like gtm course then you can choose your country you can decide whether you want to share data anonymously with google and then you can enter the container name in this case you don't have to enter the url right here it can be just a simple word or several words for example blog support website main website something like that or of course you can enter the domain from what i have seen in most cases people are creating one container for one website therefore you can of course enter here the domain of the site but right now we can enter gtm course website in this course we will be focusing on the web container therefore choose this one and click create speaking of other types of containers this one is for ios apps this one is for android apps this one is for accelerated mobile pages also known as amp and then this one is for server side google tech match implementation but this one is definitely advanced and we are not going to talk about server side tracking in this course so click create then you will need to agree with terms of service and then you will see a pop-up like this now google tag manager is asking you to add both of these codes to your website for now let's close this and we will get back in upcoming lessons before we continue first let's take a look at the structure of google tag manager account here you have a google account now this account is designed to help you access all of the google products like google analytics google ads gmail youtube or anything else when on google tag manager website you clicked start for free and then you were logged in into google tech manager interface you are actually using your google account then when we logged into google tag manager we were asked to create a new google tag manager container now the best practice is to have one google tag manager account per business so if you are a business that has five websites you should have one google tag manager account and within that account you could have multiple containers usually one container is for one website of course let's say if you have five very identical websites and the only thing that differs is the language then you could have one container for all five websites but in most cases it makes more sense to have one container for one website so if you have a main website blog support page and something else then each website could have a different container why different container because in that container we will be having tags triggers and variables now i will talk about them a bit later but basically your tracking codes will be held in that container and usually tracking codes are different for each website therefore it makes sense to have a separate container for every website before we continue here's a quick disclaimer google tag manager is an ever evolving tool so what does it mean that google is constantly updating the tool adding new features sometimes even changing the design so there is a slight chance that the view that you are viewing in your browser will be different from the view that you see in my video all right so now we are in the container of google tag manager a container is a place where you keep all your stuff related to web tracking so for example if you want to implement facebook pixel google analytics google ads all those tracking codes are stored in a container and when a visitor lands on a website first google tag manager is loaded i mean the container is loaded and then from that container various tracking codes are activated based on your conditions in the top menu bar we have three sections workspace versions and admin and right now we are in the workspace so this is the section where you will be spending most of your time because that's where the actual work is happening and on the left side you will find sections like tags triggers variables folders and templates tags are basically tracking codes that you want to activate under certain circumstances triggers are those conditions that define when the tag should fire and variables are usually little pieces of information that you can use in your setup or maybe some little helper functions but let's not focus on that right now then you can also keep things in order by having folders and keeping your tags triggers and variables in separate folders this works pretty much the same as folders in your laptop when you make some changes in a container and you want to test that then you will need to click the preview button right here and then we will enable the preview mode that allows us to test everything just within the boundaries of our browser and when you make sure that everything is working fine as you expected then you will need to publish the container and that publishing process starts by clicking the submit button right here when you click this you will need to enter the version name now this is optional but i highly recommend that you enter some descriptive and brief name of a version and we will do that a bit later in the course i mean when i explain how to do that but now here's a catch when you create a new google tag manager container without any tags triggers or variables or whatever because you will see that all of those let's say triggers are empty i mean there are no triggers or tags you still need to publish a container because otherwise the preview mode will not work now you don't know yet what a preview mode is probably but still let's focus now on just publishing an empty container so click submit you can enter right here empty container and then click publish so now i'm just saving you a lot of hassle in the future because some beginners they just start working with google tag manager they try to enable the preview mode and it doesn't work because the container is not published yet so you must have at least one container version published and now we see that we have one live version which is version number one this is what you need in order to start properly working with google tag manager if you see something like container not published right here you will have to do so otherwise pre-remote will not work and preview mode will be covered a bit later so when a container is published what happens is that a new version of a container is created and you can see the list of versions right here now currently you have only one version because we just published the container once but in the future when you will be working more with google tag manager you will have more items in this list for example right here i have a container already with four versions now the reason why versions are useful because if in case you publish something incorrectly and maybe some tracking functionality breaks your website's actual functionality because it is possible you can then quickly revert to the previous version and let's say publish version 3 to your visitors because you know that the breaking changes were introduced in the version four and then the last main section of google tag manager interface is the admin so here we have account settings and container settings here you can click install google tag manager and here you will see two tracking codes that must be added by your developer to a website then you can also see container or account activity you will see who did what then you can import container or export container so this is quite useful for example if you want to reuse some parts of your container in another container so you can just click export select what you want to export and then import those items in another container also here we have user management so you can set some permissions on the account level this means that your co-worker will have access to multiple containers at the same time or you can set permissions on the container level if you want to create an additional container in this account you can click on this plus icon right here also one more place where you can get the tracking code of your google tag manager i mean the same as it is right here you can go to workspace and you can click on this container id right here and you will see that pop-up that we saw initially after we created the google tag manager container and that was a quick overview of a google tag manager interface to install google tag manager you have to add two google tag magic container snippets to the source code of the website usually this job is done by a developer you can get those two container codes by clicking on the container id in your google tag manager interface click it and then you will have to send these two codes to a developer in this video i will show you an example of how to add these two codes to the source code of the website now keep in mind that this is just an example and every website might have different content management systems code base or something else so i just wanted to show you this because i want you to get a better idea of how things work but remember that usually this is done by a developer so if we read these instructions you will see that this code must be added somewhere in the head of the website and this code must be added somewhere in the body of the website if you don't know yet website's html code is split into two parts the head part and the body part head part is responsible for various settings loading scripts meta description meta keywords meta title and so on while body is responsible for the content so let's copy the first code i can just mark this copy like that and then i will go to the content management system of one demo website and here i am already in the code editor of that website and then here we have the opening head tag so this means that this is the beginning of the website head and here below somewhere we have the closing head tag the closing head tag always has this slash right here now it's perfectly fine to add google tag manager container code i mean the first code before the closing head tag right here like that and then after the head ends we see the opening body tag it might look like this on some websites it might look like this so below this body tag it is recommended to add the second code which is right here so copy this part and then paste it right here now the first code is essential for google tag manager to work so this must be added somewhere in the code it's recommended to have it in the head but if your content management system does not allow to add custom code to the head it is still fine to add it to the body but the sooner you load your google tag manager container snippet the better and speaking of the body well now i'm not going to dive into details but keep in mind that this is optional you don't have to add this but if you add it then it is recommended to do so right after the opening body tag right here so this is the opening body tag that contains no slashes and then after that we add the google tag manager no script code right here if you want to learn more details about the installation of google tag manager for example why is this code not necessary or where can you add it or various scenarios where this code is added to the head to the body and so on i will post a link below this video so once you or your developer installs google tag manager container snippets on a website then let's click save and then let's check whether the google tag manager is working properly let's go to google tag manager click on preview and then you will have to enter the url of your website click start and if you see the connected widget right here that says connected and if you see that google tag magic preview mode has also connected right here this means that google tag manager has been installed properly so this is how you can install google tag manager on a website where you or your developer has a direct access to the source code of the website now if you are working with some popular content management system or maybe some popular e-commerce platform like woocommerce or magento or wordpress there's a very high chance that someone has already developed a plugin that will help you install google tag manager much faster as i have mentioned before if you want to use google tag manager on a website you or in most cases your developer must add google tag manager container snippets to website source code but in some situations it happens that you cannot get google tag manager installed right away for example maybe a developer is on vacation and he is coming back let's say after a week so instead of waiting for a developer to add the code you can temporarily inject your google tag magic container into any website of course this is happening within the boundaries of your browser but still you can start working on your configuration and when a developer comes back let's say from vacation all he will need to do or all she will need to do is just publish the container and all of your configuration will go live immediately so here's an example i have a website i don't know i found it online it's called demo site.com in your case you might use something different so if i want to inject my google tag magic container temporarily within the boundaries of my browser on this website all i need to do is that i need to install a chrome extension which is called data layer inspector i will post the link to this page below the video and once you go to this page you will need to click add chrome then add extension and you will find a new icon that looks like this right here this extension does many things for example it helps you debug some of the implementations but in this case we will be using just one feature which is injecting google tag manager container so first let's go to google tag manager click on this container id right here and then copy the last part of the google doc match container without gtm dash copy just this part and then go to your website where you want to inject this container or in my case that is demo site.com and i will click on detailer inspector then i will click the checkbox if it isn't clicked yet then go to advanced options add functionality inject google tag manager container and paste that second part of the google doc management container this is very important you should not paste the entire id right here gtm dash is already pre-filled you need to enter the second part of the id and right here you need to enter the host of the website in other words the domain without https without any slashes without anything that might come after the domain in my case that is just demo site.com if this website had www.demosite.com i would need to enter that right here as well then click save and reload the page unfortunately nothing happened yet because well we need to do one more thing we need to check whether google tag manager is installed properly and we can do that by going to google tag manager and clicking preview right here and we will need to enable the preview mode then i will enter the url of the website in your case you should enter some your address and then click start if you see the debugger window right here i mean the with the window with your website and you see the widget right here that says debugger connected this is a good sign so this means that your google tag manager is installed properly in fact you can minimize this window go to that tag assistant tab which says connected and you can see that there are three pageview related events in the preview mode i will later explain how to use preview mode let's talk about three main components of google tag manager that you should be aware right now the first one is tag a tag is usually a tracking code that you want to implement on your site it might be facebook pixel event tag it might be google analytics page view it might be google ads conversion code or whatever so if you want to activate a certain tracking code on a site that is a tag then there are triggers triggers are conditions when you want your text to fire so if for example you want to activate your google ads conversion tag when a visitor signs up for your newsletter that is a trigger other examples of triggers might be a page view a click of a certain button when a visitor scrolls for more than 25 percent of your page and so on and then there is a third component which is called variables variables are little data points that you can use in tags or triggers sometimes variables might contain more information sometimes variables are even more complex functions but in this case you should start simple so you can just think of variables as data points that can contain a single value or maybe a bit more complex but still some information some data or some configuration when i explain tax triggers and variables to google tag manager users i usually like to start with three questions so the first question is what do you want google tag manager to do so for example if you want to track a conversion that's a tag if you want to implement a chat widget on your website and that chat widget requires to add a code that's a tag another example could be if you want to track a page view and send that page to google analytics that is also a tag then the next question is when do you want that to happen so for example if you have a google ads conversion tag the question is when do you want to track that conversion one of the examples could be when a form is submitted when a button is clicked or something else so all of these situations are triggers and then the last question is what when or how exactly so if you want to be more specific that's where variables come in for example if you want to fire your tag on a page view the question is do you want to fire on all page fees or do you want to fire on a specific page so if for example you want to fire only on one specific page then the page address is the variable because you want to fire your tag only when a trigger is page view and the variable is let's say page url contains thank you or order successful or something else so let's go back to that very first slide where we had tags triggers and variables so once again tag is a tracking code that you want to fire but i mean not only tracking code that code might not track users that code might i don't know change the color of a button or something else but in general tag is a piece of javascript that you want to activate on your site then a trigger is a condition when you want to happen and then variable is a data point or i don't know some set of information or maybe some function that you use to either to make the trigger more specific or to transfer that particular data to third-party tools and i believe that variables are the most confusing at least they were for me when i was just starting to learn google tag manager so we can take a look at this a bit differently at first we have a tag in this case it's google ads conversion tag so what do we want to do we want to send a conversion data to google ads then the question is when do we want that to happen and that's where triggers come in and our condition could be well we want to fire our google ads conversion tag on a thank you page but google tag manager is not a human it's a system and google doc match does not know what a thank you page means we need to be more specific we need to instruct the the system to behave as we want so in this case that's where variables become very handy we want our trigger to fire not on any page view but only on those pages where a variable which is page url contains purchase successful because we know that a visitor lands on this page only when that visitor has actually purchased something so this is our conversion now you might be wondering all right so this might look quite clear i mean you can probably understand why this variable is used right here but what about a variable in a tag what kind of variable can we use in attack and make use of it and an example could be like this what if we could send not only the fact of a conversion to google ads but also the order value and that's where another variable could be used in this case we could send the variable which is order total and that variable could send the value of thirty dollars to google ads and in this case we could see not only the number of conversions but we can also see the number of revenue that was generated because of google ads before we dive deeper first i wanted to give you a very brief introduction to google analytics 4. now what you should keep in mind is that this course is google tag manager course so we focus on data collection not on data analysis or how to navigate google analytics for reports that is why i will not be teaching you how to use things like analysis hub or some other advanced features we are focusing on data collection so first let's have a very brief introduction to google analytics for and then we'll learn how to send data to google analytics like events including page views and so on so i hope that you and i are on the same page right now regarding expectations from this course because once again this is a google tag manager course and now we can take a quick look at what ga4 is in general so google analytics 4 is the latest version of google analytics that allows you to track things like website data and mobile app data and see that data in a single property for example if you have let's say three websites that are part of the same user journey and also you have two mobile apps one for android and one for ios all of them can be tracked in a single google analytics 4 property that is possible because of a new hierarchy that is available in google analytics 4. we have data streams in other words we have sources of data and from those data streams the data is coming in to your google analytics for data streams are controlled in the admin panel of google analytics that you can find by clicking this gear icon in the bottom left corner and then going to the property column by choosing data streams when you click it you will be offered to create your first data stream of course if you haven't yet created one and as you can see there are three types ios android app and then website if your business does not have mobile apps that is not a problem you can have just website data streams in your google analytics for in this course i will be focusing only on website tracking so let's say that i click this and then here i will need to enter the url of the website and i will need to enter the stream name right here also a new feature in google analytics 4 compared to previous versions is enhanced measurement enhanced measurement is a set of features in google analytics 4 that is responsible for tracking more events because in the previous version google analytics you were tracking only page views but right now you can also track things like scrolling outbound link clicks site search video engagement and file downloads i mean site search was also available in the previous version google analytics but right now it is turned into an event when you want to create a new data stream you must enter the url of your website and you can enter let's say gtm sandbox website or something like that or if you want you can just enter the same url right here also i see that i have mistakenly added the https right here so you should not include that because it is included in the drop down right here now click create stream and then you will see a view like this this is your data streams measurement id this is an equivalent to the previously known tracking id which was starting with ua dash and something something now all the measurement ids start with g dash and then some random numbers and strings as always you have several options how to install google analytics for one is by adding gtag js code to the source code of the website so this must be done by your developers but obviously in this course we will focus on the google tag manager option if you are familiar with the previous version of google analytics you know that there were various hit types like page views events social interactions and all the other stuff but right now in google analytics 4 everything is an event so here is a quick comparison of hit types in google analytics 4 and the previous version so we had page views we had events e-commerce data so this is just standard e-commerce data then social interactions timing and so on in google analytics 4 there are no other hit types except event that is why google analytics 4 is called event based analytics platform and when you start getting some data into your reports i mean when you start sending events and some additional information then that data will be displayed in reports so we have acquisition reports we have engagement reports here we see some page view and event information now when i'm saying page view i'm actually still referring to events actually because page view is just an event that is called page view then if you implement e-commerce tracking that data will appear in monetization then we have some additional reports right here tech and demographic reports also let's not forget conversions in the previous version they were called goals but right now that term has changed into a more standard one which is called just conversions then we have the list of all events so everything you will be sending to google analytics you will see right here then we have an analysis section so this one is quite powerful however it's also more advanced the main difference right now between google analytics 4 and the previous versions is that previous version had more predefined reports where you could just quickly check one thing or another now in google analytics 4 we have a lot of more advanced reports such as exploration but you will need to know how to navigate those unfortunately in this course i will not show you how to use these because well that's the job of google analytics course not google tag manager i mean i might show like one example how to like see your data that you send but that is all then we have things like debug view which is very useful and we will use this multiple times throughout this course and then there are several other reports but you should make that discovery by yourself right now let's just make a very quick look into several types of reports and analysis hub so first of all we have an exploration report and then you will see a view that looks something like this this a bit reminds of google data studio of course the dimensions panel is on the right side in data studio but nevertheless you can include various dimensions and a report so for example if i want to see my visitors not based on city but on country instead then i will see a table like this and i can also select what kind of values or in other words metrics one i see if i want to add more dimensions or metrics that are not available in this list i can click on this plus icon and then select from a much larger list of dimensions also if you want you can use a different type of report not just table but also you can use other types like map then there are some other types of once again it's up to you to play around and discover also if you want you can create additional tabs let's say one tab is with exploration the other one might have some other types in fact let's take a look at another example which is really cool as well i really like the final analysis part because in the previous version of google analytics funnel reporting just sucked i mean i really hated funnel reports back there including things like gold funnels that were not retroactive in google analytics 4 the funnel reports are much more flexible and they are of course retroactive so we can just select several events and the report will show you the funnel including the past data of course as long as you have been collecting that data to create a funnel you should go to steps section and click the pencil icon and then enter all the steps that you want to include in your funnel let's start with a very simple example on my blog i have opt-in forms and i'm sending two custom events to google analytics four one is when a visitor enters his or her email in my opt-in form and then the other event is when that email address is confirmed so this means that when a visitor clicks a link i mean the double opt-in link in their inbox so let's name the first step initiated opt-in and then let's select the condition so my first step is when i send an event of which name is initiated opt-in and then the second step of the funnel is confirmed opt-in and this step consists of an event of which name is confirmed email opt-in of course you could include more steps but right now i'm just showing a very very basic example and then click apply and here we see that this is how many users have initiated the opt-in and only 62 percent actually even less than 62 percent have completed so this means that something is wrong maybe some people just don't get the email maybe that email lands in their spam inbox or maybe something else is happening so i should definitely dig into that and try to find out what is the possible reason also maybe bots are causing some issues because this event is fired when a visitor is redirected to a certain page that asks to confirm the email address so maybe you know boss are submitting forms maybe they're also loading google analytics for and that is why this discrepancy is so large but once again i would need to dig into that because this is a quite leaky funnel and i would need to work more on that and then there is one more report type that i wanted to show you actually there are more but i just want to focus on coolest ones in my opinion and that is path analysis so basically path analysis is the next generation of the flow reports in universal analytics actually flow reports in the older version were kinda lame because you could not do a lot with them but with path analysis some of the long-awaited features are introduced here's the cool thing about the new report when you start it actually click start over and then you will have two options do you want to go from the start to the end or do you want to start from the end and actually this part was very much requested we can define let's say the final conversion and then we can go from that conversion backwards and see where the visitors are coming from which pages did they visit before which events did they make and so on so this is really cool so let's say that i want to start with from the ending point then event name and then let's say yeah convert email opt-in and then from here i can see that before the event there was always a pager but this is obvious because i probably also send the page view on the email opt-in confirmation page but then if i click that one i will see this event let's dig deeper then we see initiated opt-in then i see the page view right here so this is quite interesting i see the confirmed opt-in then i see the initially dated opt-in and now i can take a look at what kind of page views that that happen then i click right here and i mean yeah we can go backwards i'm not sure how many steps probably like up to 10 steps i guess i haven't checked that so sorry for possible misinformation but like you can definitely find something interesting right here now speaking of other report types i can also mention things like user explorer so this is quite similar to the reports that were available in universal analytics then we have segment overlap so segment overlap basically is that we've built several segments and you can check how they are overlapping then we have cohort analysis but as i've said other reports are for your own discovery first of all let's log into your google analytics account and i mean any property at all then you should go to the admin in the bottom left corner and then in the property column you should click create new property of course if you haven't yet created a new property click it right here then you should enter the property name so it can be something like analytics mania gtm course or something like that then choose your reporting time zone and your country also the currency that your business is currently operating in then click next answer several questions or just click create and you will be automatically redirected to the data streams section here you should select web because this course focuses on web tracking if you have already completed that you don't have to create a new data stream continue using your existing one and then you can enter here the name of your stream if you want you can just enter the subdomain right here but keep in mind that at least for now you cannot change this name later on so you should think about that then click create stream and there are two options how google analytics 4 can be installed and i think that you probably know what those are one is by adding this code directly to the website's source code and this must be done by your developers but we will be focusing on google tag manager installation because this course is entirely about google tag manager so what we should do right now is that we should copy this measurement id right here so you can just select it like that copy or just click on this icon to copy and then go to google tag manager on google tag manager go to tags and click new this is our first tag that we are creating in this course and when we do that there are two sections that we have to configure in a tag first of all is what must be done so the answer to the question what must be done is google analytics 4 must be launched on every page so first of all here is the tag configuration so let's click it and you will see a bunch of tag templates right here now tag template is basically an easier way for you to manage your tracking code instead of just you know copy pasting or editing some custom code right here you will just need to select a tag template and as you can see there is no code right here we just have more user friendly fields let's say input field maybe some buttons you know there might be some drop downs radio buttons or something else but you don't have to deal with the code right here and this is obviously very convenient for non-technical people so this is the field where we have to enter the measurement id that we copied from the web stream right here so once again if i haven't copied that yet i need to click right here and then paste it right here so this is responsible for activating the google analytics for on our website now the second part of the tag is when exactly do we want to do that and speaking of google analytics for configuration tag we want to activate it on every page that is why we go to triggering click on pencil and then select one default built-in trigger which is all pages so in other words what will happen is that when google tag manager is loaded then this tag will fire as well and the last thing that we have to do is we need to enter the tag name right here now this is purely for internal usage but i highly recommend that you have some naming convention in place because when your container grows you will definitely benefit from clear and concise naming convention so what i do is here i enter the type of the tag in this case is ga4 then config because this is the configuration tag and then i paste the measurement id right here now why am i entering this configuration id right here because there's a chance that in the future you might have more configuration tags with some other measurement ids in the same container so this is just for future and click save right here and here is our first tag that we have just created so to sum up we have created a tag that will fire on every page and every page in this case means every page where google tech manager container is installed and that tag will send the page view right here and also will enable in general google analytics for on your website so this means that things like enhanced measurement will also be activated and the thing that we have done here is an equivalent to adding this code directly in the source code of your website but we are not done yet this is just the beginning we have implemented the tag in our container but we will need to check whether it is working properly on the actual website and we will do that in the upcoming lesson by the way i just wanted to take one more look at tag templates in google tag manager so if you click new in the tags section and click on tag configuration you will see a much longer list of tag templates and we're talking not only about google related tags like google ads or google optimize also there are some other tags like crazy yak 4 heat maps hajjar is as well for heat maps linkedin pixel then bing ads and a bunch of other templates right here now if you don't find a template right here for example you won't find facebook pixel there are several options the first option is to implement facebook pixel code in the custom html tag right here so you can just click on this and then you can paste the code for example the code of your pixel and then select when you want this tag to fire and another option is to use the templates section right here where you can search the gallery of the existing templates and then install it in your google tag manager container when you make some changes in google tag manager container they do not go live until you publish your container but before you do that it is absolutely necessary for you to test everything with the preview mode and even till this day after many hours and years of working with google tech manager i just do not trust myself and i have to test every change even the smallest change in my google tag magic container and i really really recommend that you do the same thing so when you add some changes in our case that is ga4 configuration tag you should click the preview button right here then enter the url of the website and click start if you have installed google tag assistant extension the window with your browser will be opened in a new tab so this is much more convenient also what is really cool is that if you have let's say five pages opened of the same website for example here here and here we have like four different tabs what you will notice is that the icon right here on every tab is different therefore it will be much easier for you to identify that right here but more on that a bit later and now i have the preview mode right here actually let me just quickly clear everything then i will refresh the page once again and now i have enabled the preview mode first of all there are two tabs or maybe one tab and one window in your case this is the preview mode like the debugger view and here is your website with the widget that says connected so if you want the preview mode to work this must say connected and this must say connected and also you should see the word connected right here so this means that both windows are connected with each other and we will be able to see how things are happening and like what is happening on the website and what google tag manager preview mode is able to see because what you will see right here is basically what you can use in google tag manager so the preview mode can be split into several parts the first one is the header and here we can see various google tag manager containers and google analytics four properties and maybe some other things that are related to google ads in this header right here so if for example you have multiple containers on the same page which is technically possible you can see them right here and you can switch between them of course at the moment i have only one google tag manager container and from that container the google analytics 4 is activated right here right now we will focus only on google tag magic container then on the left side we see the event stream now this is the event stream of google tag manager this is what is happening in a thing called data layer if you want to fire your tag on a certain interaction on a page let's say on a click or on a form submission first of all that submission or that click or that whatever interaction must appear right here and right here we see the main section that is split into four parts tags variables data layer and errors so if we click let's say on the first event right here which is container loaded you will see that on this event this tag has fired and if we click other event which is dom ready or window loaded you will see that the tag is now in this section tags not fired now first of all you might be wondering what is container loaded dom ready and window loaded so container loaded is the earliest moment when google tag magic container was loaded on that particular page this is an equivalent to the trigger all pages so every time you set the tag to fire on all pages this in other words means all container loaded events then we have two other page load phases we can call them like that so this is the earliest moment when the page has loaded dom ready is the moment when website elements are rendered by the browser so this means that the elements most likely become visible on the browser's window at least in many cases and then we have window loaded window loaded is the final step of the page loading process and it means that all page resources this means content images and also various scripts have finalized loading so if you are instructed to fire a tag only when the page has completely loaded window loaded event is exactly what you need so let's go back to checking our ga4 configuration tag we have configured that tag to fire on all pages in other words all container loaded events so if we go to the preview mode right here and click on container loaded you will see that the tag has indeed fire and its status is succeeded this is a good sign also you can click on this tag and see what kind of information was activated we see that this is the measurement id and that the request was sent to google analytics and that google analytics 4 is properly activated then we also see the firing triggers section this is the condition that was met and this tag was fired now gtm.js is a technical name for the container loaded event or in other words all pages trigger this might look confusing but over the time you will get used to that so right now all you need to know is that the preview mode is the way how you can check whether your tags are firing exactly when you expect them to and the way how you should do that is that you should click the event on which you expect the tag to fire and see whether that tag has actually fired so in our case all pages is all container loaded events therefore we clicked on that event and we see that the tag has fired if we click dumb ready the tag did not fire window loaded the tag did not fire and if we had some click events right here we would see that if we click those events you would not find that tag among tags fired and this configuration tag would still be as not fired also if you want you can do some additional check for example well we have configured attack to fire on all pages so why don't we go from the home page to let's say catalog page a new page has loaded and you will see that a new page load is right here because this is the first page load of the home page and this is the second page load of the catalog page or in other words product list page and right here we see a new container loaded event so this means that the page has started loading then elements were rendered on the page and then all the other scripts have loaded as well and on this event i mean continue loading you see that attack has fired once again and if we go to the summary you will see that the tag i mean the configuration tag has fired two times in total if you click it you will even see on which exact events it fired it fired on the first container loaded right here and it also fired on a fifth event in this stream which is also container loaded even though we see that our google analytics 4 tag has fired properly that is not the end of the story we still need to make sure that the data has actually been received properly by google analytics for and we can do that by going to google analytics then scrolling to the bottom of the left sidebar you can actually expand it and you will see the section called debug view now this is where can we check the incoming data and see whether everything is working properly so click debug view and here first of all you should see your device right here and then you should see some events right here the debug view in google analytics 4 is completely different thing and functionality compared to the preview mode of google tag manager google tag manager preview mode is responsible for checking all of the tags that are firing in your container maybe you have some facebook pixel tags or google ads tags or something else with google tag manager preview and debug mode you would be able to see what is happening in your container now the debug view of google analytics 4 is responsible for showing only the data that is coming into google analytics for so let's take a quick overview of the debug view right here when you go to the debug view of course you should first refresh the page of the website i mean of your website where you want to install google analytics for then you check whether on that latest page view the tag has fired and we see that it indeed has then we go to the debug view and you will see the page view event so this was automatically sent by the configuration tag because we have enabled that checkbox right here i'm talking about this checkbox and then additionally your configuration tag might send some additional data like user engagement if you have enabled the enhanced measurement you might find some scroll events or maybe something else for example if i scrolled down right here then we should eventually see a scroll event appear right here now there is still some delay between the event actually happening on your website and seeing it right here but that happens fairly quickly so if you see your device and your events happening right here that is a good sign in fact we can click on the page view event and we see what kind of parameters were sent to google analytics for for example if we click on page location you will see that this is the url where i am right now the reason why we are seeing this data in the debug view because well it is not displayed always is because we have enabled the preview mode right here so when the preview mode is enabled and you are checking your ga for implementation google tag manager adds some additional parameter to all the requests that are coming to google analytics for and because of that parameter the data is available in the debug view right here because debug view is designed to see only the data that is coming with that debug mode parameter enabled so if you have let's say 500 people right now browsing your website only those people will be displayed right here who have the debug mode enabled so it might be you know the debug mode of google tag manager enabled also there are some additional ways how the data can be enabled in the debug view if you want to learn more i will post some additional resources below the video but the main takeaway right now is that even if you see that the tag has fired in google tag manager preview mode that still does not mean that everything was properly activated you always have to check the final destination and in this case it is the debug view of google analytics 4. if you are working with some other tool that also offers some real-time debugging capabilities you should then go to that tool and test whether the data that is being sent from google tag manager and from that certain tag that it is displayed in the real-time reports of that particular tool for example facebook pixel also has some event testing capabilities now if you are dealing with the tool that does not have the real-time reports well then you will have to you know activate the tag check how it is working and then after a while maybe you know after several hours maybe after a day or so go to the standard report of that particular tool and check if that tool is displaying your data properly and then publish the container but i will talk more about publishing the container in the upcoming lessons okay then i also would like to mention some additional tips that are quite useful when working with the preview mode so if you are navigating in one tab of the preview mode and let's say that i am holding right now the control key and then i click let's say subscribe and contact and i open them in new tabs you will see that the preview mode is enabled because the fab icons right here they are using the preview modes called icon or whatever but like if i was working between all these three tabs it would be quite challenging for me to quickly identify which page view is which now if you have installed the tag assistant extension in your chrome browser you will notice that that extension is adding some additional icon right here and you will see that every tab has a different icon and that very same icon is visible right here so you can quickly identify that this data is coming from this particular page because this is a red ring right here and right here now this is a green circle and this means that i'm working with this page so this is quite convenient and then another thing that is super crucial especially for me when i'm helping other people is that if you get stuck somewhere with your google tag manager implementation and you don't know what is going on and you need help then you should definitely share the preview mode with that other person who is trying to help you so for example if you need my help instead of just saying something like hey my gtm is not working which is like super vague and totally unclear instead you could briefly describe or actually in great detail describe your situation and together with that request you should include the link to your preview mode that way i will be able to see what is happening in your preview mode how your tags are firing but i will not be able to edit anything or you know break something in your container so you're still safe so speaking of sharing the preview mode you enable the preview mode right here then you go right here click on these three dots and click share now this is very important by default this preview mode enables only the preview of the global site tag in other words you will just be able to see what kind of requests are sent to google analytics but i won't be able to see other tags in your google tag manager container that is why you should click on this drop down and select global site tag and the id of your container now this will change the url of your shareable debug link and then when you select your correct google tag magic container select this url click copy or just copy link and then include that in your request you know where you're asking for help or just you know forward this link to someone who is trying to help you so this is very important because when you need some help with google tag manager you need to keep in mind that google doc manager is quite complex and literally like million things can go wrong so if you want help you have to be cooperative and you have to provide as much information as possible and the preview modes link is one of those essential things that you have to provide so when you test your configuration and you make sure that your tags are firing when they are supposed to now it's time to publish your changes and we will do that in the upcoming lesson after you have tested your configuration in google tag manager container now it's time to publish those changes and make them go live because what we have done so far is that we were working within the boundaries of your browser and your container but if this container is added to your website source code those visitors are still not getting google analytics for activated on their page but once we submit these changes and publish the container then those visitors will be also tracked with google analytics for so once you're ready click submit in this top right corner then you will see a view like this you have two options one is publish and create version and the other one is just create version so as i've mentioned before every time you publish a container a new version is created this is useful because if something goes wrong you can roll back to the previous working version and then publish that one instead but if you don't want to publish your changes live to the website visitors but you just want to create a checkpoint like in video game you know where you save your progress then you can click just create version in that case you will create a new version like a new point where you can roll back to but your website visitors will still not be getting these changes but in our case we want to create version and we want to publish those changes also i highly recommend that you enter at least the version name because if you don't enter then the list of your versions will not be very descriptive and if you want to quickly find what functionality was implemented when well seeing the list without version names will make that process much more difficult that is why i always enter at least version name something like that will work just fine of course if you want to include some additional description right here feel free to do so and there are several benefits when it comes to properly naming your versions first of all if you go back to this container you know after a year or maybe two years and if you see just a list of version numbers without version names well it will make your work much more difficult that is why your future self will thank you if you add version names right here also if someone else takes over the container in the future it will just look more professional if you properly name your versions but first of all think about yourself in the future properly naming your versions is very important so once you have entered the name and description then click publish and eventually you will be redirected to this version summary where you see what kind of changes were made and what was the content of that container right now we have just only one tag no triggers and some built-in variables but in the future lessons we will add some additional content right here and if we click on versions right here you will see the list of all versions this is our empty container version that we published immediately after we created a new container because otherwise the preview mode would not have worked and this is our latest live version so you can see that this version has two statuses one is live so this means that website visitors are getting this version so they are being tracked with google analytics four and also this is the latest version so this means that we are editing this version currently in the interface of google tag manager now let's imagine what situation let's say that this version number two contains some breaking changes that are breaking certain functionality of the website let's say some button clicks are not working at all so we have to roll back to the previous version that we know that was working then we will have enough time to fix the existing version and then we will publish those changes once again so let's first of all make sure that our visitors are back to normal and i mean that we need to make sure that they get the proper experience just like it was before we publish the container so let's republish the version number one to our visitors next to this version click three dots and then click publish then click publish right here so what we have done is that we started loading the first version of the container to our visitors so this means that there are no longer breaking changes for them and now we can properly without rushing we can fix the problem in the version number two so you know i can maybe go to tags maybe i have some other tags that are breaking so let's say that now i have fixed all those problems they have been solved and now i am ready to publish this version this updated version once again that is why i'm going to click submit again but now just keep in mind that we are just pretending that i did something in reality like if you have some breaking changes you should actually fix them and then let's name this version let's say fixed breaking changes or something like that then click publish and then you will see that in the version list so we have to click this once again we have a new third version which contains some fixes and this version is both live so this means that website visitors are now getting this live version and also another status is latest so latest means that we are now editing that third version right here in the interface and of course once you publish these changes you should probably go back to your real-time report i mean your debug view in google analytics 4 if those changes of course involve google analytics 4 and then check what is happening once again like what kind of data was sent like are you getting new data also since we have published these changes live and now we should be getting more data from the actual visitors of the website you should go to real-time reports and take a look right here of course right now i will probably have only one visitor because that's just me and like there are no other visitors on this website but you know if there were then i would expect to start seeing more data coming in right here like more users more events and so on speaking of custom scripts let's take a look how to install one in this case i am going to install a script provided by the drift chat so i will be able to add a chat widget that might look something like this to a website i'm not going to show you like the entire process on how to sign up for drift where to find the code i will just quickly skip directly to the page where i can get their code and then i will continue the video here i am in the drift interface and here is the section install and once i click it i will get the code that needs to be added to google tag manager so i will just copy that code right here and then we'll go to google tag manager tags new tag configuration and choose custom html this time and then paste the code then i go to triggering and according to drift's instructions i need to enter this code on all pages where i want that the drift chat to appear so that means all pages then let me name this tag i usually name it like this chtml stands for custom html and then what kind of code is that then i click save now in order to see the latest changes in the preview website i need to refresh the preview mode once again i will click the preview button right here then the tag assistant page will refresh and i will need to start the preview mode once again and here it is the page has been refreshed we see that the debugger is connected and here is the chat widget that appeared on top of that widget this has happened because if i go to the preview mode i mean to the actual debugger you will see that on container loaded now i have the drift chat right here so it looks like everything is working fine and we have installed a custom html tag successfully before we continue i wanted to give you a quick introduction to google analytics for events tracking i mean i hope that you already have these fundamentals but in case you don't then i will give you a very brief introduction if you are familiar with the previous version of google analytics which is called universal analytics i think that you already should know that events were tracked by using mainly three or four parameters i'm talking about event category event action and event label and of course event value well in google analytics 4 they are no longer available they are actually gone so what does it mean that you are in charge of what kind of event parameters are sent together to google analytics for for example let's say that we are tracking when a visitor logs in in that case we could send an event name which is login and then we can send additional parameters for example method whether the visitor logged in with email or google login or facebook plugin or something else and we can also send a parameter called pricing plan or something else so as you can see parameters can be whatever you want i mean parameter names can be whatever you want and you don't have to follow the strict category action label and value structure when it comes to event tracking there are four types of events in google analytics for automatically tracked events so these are tracked by the configuration tag i mean when google analytics 4 is loaded those events will be tracked then there are enhanced measurement events for example outbound link clicks file downloads scrolling and so on then there are recommended events i mean they are not required but google asks you that you should send these if you can because allegedly this should help their machine learning algorithms to do something although at the moment of recording this video those capabilities are still not that much known and if you want to track a certain event and it is not covered by neither of these three event categories then you can use custom events so basically you can name event whatever you want and send parameters whatever you like below this video you will find a link to this official google analytics for resource where you can learn more about the types of events what kind of parameters are sent for example if we're talking about automatically collected events you will see what kind of events are there and what kind of parameters are tracked and so on speaking of automatically tracked events for websites there are mainly three events the first one is first session so this means that google analytics for property has never seen that visitor before then session start so this means that a visitor was inactive for at least 30 minutes before actually landing on your website or in other words when a session starts and the third event is user engagement so this is sent to google analytics when a conversion is collected when a visitor spends 10 seconds on your website or when two or more page views occur by the same user of course there are more automatically tracked events for mobile apps but since this course focuses only on websites i will not dive deeper into them then another type of event is enhanced measurement event but we have already taken a quick look into that in one of the previous lessons where i was doing an introduction to google analytics for but below this video i will post another resource to the official documentation of google where you can learn what kind of events are sent so there are page views scroll click view search results and what kind of parameters are collected by these particular events then there is a third group of events which are called recommended events so these are the events that google asks you to send them if you are actually willing to track those interactions below the video there is a link that i have recently mentioned and on the right side of that page you will find links that are events all properties events retail ecommerce then job education local deals real estate travels and games so these are pages that contain all the recommended events that google is asking you to send them so for example if we click on all properties you will see some recommended events such as login if someone makes a purchase you should send the purchase event so this means that the name of the event should be exactly like that then if someone logs in or let's say registers on your website then um you can send the sign up for example there is another event which is useful to send when someone submits a form on your website and that event is called generate lead then there are also some events right here then there are some events for job and education for example purchase refund select item view card and so on and finally if you want to track an event and that event is not covered by automatic tracked events enhanced measurement or recommended events then you can just enter some custom event name some custom parameters and you're good to go now speaking of where can you find the event data in google analytics for reports there are several places for example engagement and events you might find some events right here right now i don't have much data because this is just a demo property then you will also find the list of all events right here in the events all events section then there is analysis hub but in this course i presume that you already have at least some basics and you know where to find that data if you don't i will post a link to my event tracking guide and at the end of that blog post there is a section called where can i find the events date and google analytics for reports so we can take a look at that the reason why i'm not diving deeper into the google analytics four reports because this course is about data collection and about google tech manager so i will just you know briefly mention that you can find the data here or here but we'll not dive deeper because that job is for the google analytics four course all right so since we got a bit more familiar with the very basics of event tracking let's take a look at first example a really cool thing about google tech manager is that you can specify and make your triggering conditions much more precise in the previous examples we were able to fire tags on all pages but what if we want to fire tag on a certain page well with google tag manager that is definitely possible let's imagine that i have a google ads conversion tag and that tag must be fired when a purchase is made successfully right in that case what i could do that i could go to triggers and create a new pageview trigger which is pageview right here and then i could specify that i am not interested in all pages but actually only in some page views let's say that when a visitor makes a purchase he or she is redirected to a page which is slash pages slash which is successful and then they might see maybe the order summary maybe the value maybe the transaction id or something like that but in this case the most important thing is that we have this part of the url that is quite unique for that particular thank you page so what we could do that we could actually enter this part of the url and the trigger condition because in trigger when we decide to make the trigger more precise we will actually do that with the help of variables in fact right now in our google tag manager container by default we have four variables which is page hostname page path page url and refer and in this case since we are interested in what is going after the domain i mean after slash so this is the part of the url which is called page path that's why we can copy this and then in our trigger we can select the variable which is called page path right here and then we can enter this part of the url so this trigger will be activated when a visitor lands on a page when page path contains pages slash successful i mean pages slash purchase successful and then once you create this trigger you could then go to tags create new tag configuration then select google ads conversion tracking then enter the information of the conversion so to enter this information you need to be at least a little familiar with google ads this time i will just skip this part and then when you configure your conversion tag you will need to select that trigger right here so you can click on triggering section and then choose the trigger that we have just created so when a visitor lands on a purchase successful page this trigger will be activated and it will fire a tag that will send the conversion information to google ads or i mean if you want to fire facebook pixel then you could create a facebook pixel tag or custom html tag and then add the code that is needed for facebook pixel to work so this is one of the examples what can you do with triggers and how can you make them more specific instead of all pages we made our pageview trigger more specific and it is looking just for one particular page or at least for those pages that have that particular phrase and the page path let's now close this tag and now let's take a look at another example google analytics 4 already has some built-in link click tracking capabilities and you can find them by going to admin then data streams selecting your data stream i'm talking about website data stream and then in the enhanced measurement section you will find that ga4 is capable of tracking outbound links so this means that a link redirects a visitor to some external website that does not belong to your business and then it also tracks file downloads so if a link contains something like pdf.ppt.x or something else then google analytics 4 will track that but what if you want to track other links or let's say what if you want to track links and send that information not to ga4 but let's say to facebook pixel or somewhere else in that case enhanced measurement will not help you therefore you definitely need to know and need to understand how link click tracking works in google tag manager and in this video we will take a look at an example where we will be tracking link clicks on these menu items but first let's do one more thing because i just want you to show how link click tracking and google tag manager works in a nutshell that is why just to demonstrate the entire process let's go back to google analytics and temporarily disable outbound link clicks and file downloads in enhanced measurement we will enable them later on but right now just disable them because i want you to show something else in google tag manager so once you do that click save and then let's take a look at how can we work with link click tracking in google tag manager so first of all every time you have to track something with google tag manager you have to inspect like what kind of data can you get about that interaction or is google tag magic capable of tracking that interaction at all and to do that we have to enable the preview and debug mode in google tag manager first or if you have already enabled then you should refresh that in both cases you should click the preview button in google tag manager interface since my preview mode was disabled i am asked to enter the url once again and enable the preview mode so enter the url of the sandbox website and click start then you will see that the debugger is connected and that tag assistant in this window is also connected so when it comes to event tracking you have to remember one thing if you want to track a certain interaction and you want to fire a tag based on that interaction for example we will be firing google analytics event tag on link clicks so if you want to do this that particular interaction and in our case that is link click must appear on the left side of the preview mode so if you want to track link clicks first of all that link click somehow must appear right here so let's take a look what happens on the website and let's click on the first link then the second link and then let's say the third link so first of all the page i mean the website reloaded three times and after each click a new page was loaded and if i go to google manager's preview mode what you will see is that we have three new page views so the first page view then the second page view then the third page view however there is no event that says link click and that is a problem because we have to somehow get the link click right here because on that particular link click we will be able to fire our tag and the reason why this is happening is because even though google tag manager is capable of tracking link clicks the link click tracking feature is currently disabled so we have to enable it and to do that we have to go to google tag manager and create at least one link click trigger that will be activated on a page of our sandbox website so we have to go to google tag manager triggers click new trigger configuration and click just links let's keep all these settings as they are because right now we are interested in all link clicks and then let's name the trigger all link clicks click save now let's refresh the preview mode and check whether this trigger has enabled link click tracking capabilities in google tag manager so click preview then i will be asked to enter the url the preview mode has connected now let's try clicking any link and see what happens in the preview mode so let's say that we click home link right here and when i click that i go to the preview mode and what you will see that there is a new page load because after i click the link the page reloaded but also on the previous page view there is a new event that is link click so this link click was possible because google tag manager has now enabled the link click capabilities so that is definitely a good start and if we click this link click right here let's take a look what kind of data about that link click do we have and if we go to variables unfortunately there is nothing related to link clicks right here all we have is the page data like page url page path page domain which is also known as host name all we have is just the event name which is gtm link click so this is a technical name of the link click event but i mean this event name is not enough if we want to distinguish what kind of link click happened because if let's say i click on another link in the footer right here what you will see is that there is another link click event right here and there is almost no difference between these two events so we need to somehow get more data about that link click in order to distinguish what kind of link was clicked was it a menu link was it an outbound link was it something else and if we go to the data layer what you will see that there is actually more information about the link click for example here we have a parameter called element classes which could allow us to distinguish that this link click was made on the navigation link also known as menu link because the other link click contains different values also there is another variable which is element url so this is the url of the clicked link and another link was different so as you can see there is some data but unfortunately we cannot use that data because it is not available as a variable in google tag manager now variable is essential in this case because if we don't have a certain data point as a variable we cannot use it in google tag manager luckily google tag manager has more built-in click-related stuff and if we go to google tech manager to variables and then click configure in the built-in variable section you will find a group of variables that are related to clicks so click element click classes click id click target click url and click text enable all of them because by default they are disabled and honestly i have no idea why this decision was made by google because well these variables could be just enabled and that is it anyway once you have the click tracking enabled in google tag manager and in this case we are tracking link clicks you also have to enable the variables right here so click classes and so on and now i have refreshed the preview and debug mode so let's click on the first link and let's say the second link and the third link and here we have all these page views and here we have let's say one link click the other link click and all of them were made on those particular menu items so let's click any of those link clicks and let's go to variables section and right here we see more variables that we did before so we have click classes click element click id and all the other stuff now some variables have no value because for example in this case menu links do not have a click id on this particular website but we have information such as click text so this is the text of the link so i click catalog therefore click text of that particular link click event is catalog then this is the url so if i copy this link of the catalog and paste it right here you will see that the url is connections all and this is the exact value that was captured by google tag manager also we have a thing called click classes and here we see that there are some classes added to that particular link now let's click on some other link on a page let's say on search link at the bottom here is another link click event right here and here we see that the click trail is this one click text is this one but there is no click classes then if we click let's say on this logo right here if i click it that was also a link click and if i click then the latest link click right here you will see that the click classes is now different so site header logo link what i'm getting at is that sometimes you can use click classes as a variable to distinguish whether the link click happened on one type of element or on the other type of element so for example in this case i clicked on this element and its class was site header logo link if i clicked at the bottom that link had no class at all now if i click on all of the five menu link clicks right here if i choose the link click right here you will see that the class is site nav laying site nav link main now if i click on another link click the url has changed because here it was catalog link this one is home link some variables are different but click classes are the same so what does it mean that we can use this variable and make our link click trigger more precise because right now we don't want to track all link clicks we just want to track and fire our tag only on those link clicks that are many and then we will send that event to google analytics so let's go to google tag manager triggers and then click our existing all link clicks trigger right here then click on the pencil icon right here and choose some link clicks now here we can make our trigger more specific because we want our tag that we are going to create in the near future we want our tag to fire not on all link clicks but on some link clicks where click classes contains site nav link main now copy this exactly because if there are some typos then the trigger will not work and paste it right here and let's rename the trigger to something more specific so let's say link click and menu item or something like that click save now the final part is to send that click information to google analytics so let's say that we will fire a google analytics for event tag when the link click trigger is activated and together with that event we will send the name of the event which can be let's say click and then we can also send the click url and click text together with that event so let's go to google tag manager tags and click new then click tag configuration and select ga4 event because right now we are about to send the event to google analytics for the first thing that we should define is to which exact google analytics property should we send this event because google tag manager does not know that what if you have let's say multiple google analytics four properties configured in the same container well with each tag you have to define to which exact property do we want to send that event and there are mainly two ways how can we define to which exact property to send that event and the first option is to manually set the measurement id on the level of this tag but it is not very convenient if we talk about you know containers with 50 or 100 tags because manual work always takes more time if you are configuring your measurement ids on the individual level of each tag eventually it will cost you more time to maintain that that is why i would recommend choosing the ga4 configuration tag that you have already created now what happens here is that this event tag will reuse the settings of this configuration tag and we have already configured i mean we have already entered the measurement id in that configuration tag so instead of manually copy pasting your measurement ids in this tag we are just selecting the existing configuration tag and this event will take those settings all right so i hope that this is now clear and the next step is to add the event name we have to add some meaningful name to this event that follows the rules of google analytics for as you already know there are several types of events in google analytics for including automatically tracked events enhanced measurement events recommended events and custom events so if we want to come up with some meaningful name first we should check what is required by google below this video i will post a link to this page where there are several types of events so let's start with automatically collected events and here we will see a bunch of events most of them are app related but some of them are related to the website as well and we have one event which is called click this is quite generic but if you want you can use that as an event name i mean that is fine however this part is not entirely correct because it says that there are no parameters collected but if we click on this enhanced measurement link you will see that actually there are some parameters that are more familiar to google analytics for so if you want we can actually use these parameters and i mean we can send data to these particular parameters now speaking of event tracking in google analytics four there is a lot of flexibility so there is no single correct answer to most of the questions i mean most of the configuration questions if you want you can name the event menu click or menu link click or something else if you want you can send these parameters if you want you can send your custom parameters like menu link click like menu item name or something like that and actually like all of those options will work and as of the moment of recording this video i still haven't chosen like the best option for myself and i'm still constantly experimenting with the setup in this video that is related to link click tracking we will use the recommended event i mean this is probably the automatic event and some more standard parameters so let's go to google tag manager and in the event name let's enter click and then in event parameters we might add some additional data we have link classes like i mean like all of these parameters are optional like you don't have to add them but i mean the word click for an event name is quite generic and we would actually benefit from sending some additional data we can send the link url what else do we have here yeah i guess that that works fine you know what actually i think that if i scroll down there is another event which is file download and that file download is using a parameter called link text why not use that one all right so we have parameters now we have to assign some values to those parameters and this is where the power of google tech manager and the real awesomeness comes in because we can actually add some dynamic values right here so for example if i click on the menu item which is blog then we could pass the text of that link which is the word blog in this particular field and in fact we can do that by using variables we already have variables such as click text which returns the text of the link and also we have a variable click url that returns the url of that clicked link so let's do that we can insert variables by clicking this variable button right here so let's start with link url let's click it and let's think about what kind of variable is the best for link url well it is click url because click url variable returns the url of the link that was clicked so let's select the click url right here and then we also have link text link text can use the value of the click text variable right here so let's click the button here and enter click text so what will happen here is that when a menu link click occurs google tag manager will take the text of that clicked link and insert it as a value of this link text parameter and we'll send that to google analytics for now as for link classes we can send this value but it's not very readable why don't we just send some text like menu link click or menu link and we can enter it as a plain word because we know that all menu link clicks have the same click classes value therefore we don't have to insert the actual variable we can just write a word which is let's say menu link so when a vista clicks a menu link google tag manager will send an event of which name is click and link classes is just a word menu link and based on the values of click url and click text they will be dynamic so if i click let's say on the home page right here the value of the click url will be this and this value will be sent together with the parameter link url to google analytics for now let's select the triggering condition and we have already created that so click triggering and then select the link click menu item trigger right here the last step is to enter the name of the tag which i usually do like this ga event menu link click let's save this and now we have to test whether this tag fires exactly when we want to so let's refresh the preview mode by clicking the word preview the page has refreshed the preview mode has connected and first let's click on some non-menu link for example on this search link at the bottom then let's click on the link click and we see that no tag has fired well we did not expect any to fire so this is a good sign now let's go and click let's say on the first menu item then on the second menu item then let's say on the third menu item but let's wait first while the debugger loads here it is so now i made three link clicks let's go to the preview mode and see what is happening here so here is the link click and on this link click i see that my tag has fired let's click it and you will see what kind of information was sent if you want to see the actual value of the click url you can just switch to values right here and you will see what was sent so it was an event with the name click and then there were some parameters also in this tag we can see the firing triggers section where we see what kind of conditions were met and which trigger activate so in this case our tag has only one trigger and obviously all of these conditions were met so we were looking for a link click event and we were looking only for that particular event and i mean link click where click classes variable contains this value and if we switch to values once again you will see that this is the value of click classes and this is the value that we were looking for and this green check mark shows whether the condition was met and it obviously was the final thing that we need to do is that we need to go to analytics and check whether the incoming data is actually received so let's go to the debug view of google analytics for and here you will see that there are some events so we have some pageviews we have some clicks so let's click on this click event and here we will see parameters such as link classes so this is menu link then link text then link url so it looks like everything is working properly i will not be showing how to do that because you already know but if this was a real project then you could now submit your changes and publish this container live awesome you have made it till the end of this tutorial now you have a better understanding of what gtm is how does it work and how to create your first setup however keep in mind that this is just the beginning of your journey there are still many things that you need to learn about google tag manager if you want to get some additional details i have a free ebook which is called google tag manager for beginners you will find the link to that ebook below the video it contains some additional tips that were not mentioned in this video also if you want you can check my premium google tag manager course for beginners this video that you are currently watching explained around 15 of what a beginner should actually know about google tag manager the rest 85 percent are explained in my course which is called google tech manager masterclass for beginners i will post the link below the video to learn more if you found this video useful hit the thumbs up button because it helps me continue working on this channel and that's just how youtube algorithm works so i mean i have to play by the rules and if you want to get more tips in the future consider subscribing my name is julius this is analytics mania and i will see you in the next video [Music] you

Channel: Analytics Mania - Google Tag Manager & Analytics

Views: 73,267

Rating: 4.9520173 out of 5

Keywords: google tag manager, google tag manager tutorial, gtm tutorial, google tag manager for beginners, gtm for beginners, install google tag manager, new preview mode, google tag manager tutorial 2021, google tag manager and google analytics 4 tutorial, google analytics 4, gtm and ga4, google analytics

Id: 1dwk_erXAko

Length: 99min 13sec (5953 seconds)

Published: Tue Jan 26 2021