Google Tag Manager for Beginners 2023 (FULL COURSE)

do you need to install Google analytics 4 or the Facebook pixel or Google ads conversion tracking on your website well then you probably have come across a tool called Google tag manager it's a great tool to install tracking onto your website and you can do it relatively easily and fast hey there my name is Julian and in the next few lessons I want to introduce you to one of my favorite tools for marketers Google tag manager we'll discover how you can set it up deploy your tracking codes with GTM and I'll show you other cool functionality inside of Google tag Venture like event tracking and conversion tracking as well but let's now get ahead of ourselves let's take a quick look at what GTM is all about for that matter I have already a demo here a little website that looks familiar to the other website here but there is a subtle difference so on this page I have tracking already installed and we can check up on this tracking with tools that you can install for Google Chrome like the Google tag assistant which shows us that we have a global site tag installed with Google analytics 4 code installed here so that sending data over to Google analytics for I also have the Facebook pixel helper or for the meta pixel that you can install and it's sending over page view data now how did these codes get onto the page how were they installed well usually these tools ask you to install a little bit of code into your code base and that is Javascript that will then be executed by your browser similar for Google analytics four so here we have the global scitec they want us to install so normally you would copy that send it over to your developer to get it implemented and that's exactly what happened here as well you can look at The Code by right clicking on our page and view page source and looking where this code would be placed right here so here we have our metapixel and then down here we have our Google Global site tag which is sending data over to our Google analytics for ID all right now let's take a look at this website where we also have some checking codes installed so so the global side tag is installed here remarketing for Google ads and we have Google tag manager installed we also have here the Facebook pixel exactly the same we have a page view sending over now how was this installed let's check the view page Source here again and if you scroll down we don't find any of our classic codes that we needed to install that the website ask us to install the only code that we can find here is Google tag manager and what Google tag manager is exactly is really just a snippeto code that you install on your website and henceforth all of your tracking can be deployed through Google tag manager so you don't need to do any kind of code changes once you have Google tag manager installed on your website with that comes a interface that you can access it's on attack manager.google.com and you can open up this interface and see what kind of tags are installed also the edits that were made and when we go over to tags here which are kind of like the Snippets of code that get deployed we can see here we have Google analytics 4 we have our Google ads conversion Linker remarketing and Facebook installed now the cool thing about Google tag manager is it gives you loads of functionality to deploy those codes but also some helpers that lets us do this all pretty easily so for instance one cool functionality is that you have a preview mode so you can go here on preview and that will put our browser into a special State we just need to enter the URL that we have our tracking codes installed on and it will open up a new tab and then connect to our browser and here you can see it's connected and we can see all the tags that have been deployed on our website so we have our Facebook page view tag the Google analytics for tag Google ads and Google ads conversion Linker as well and some other tags haven't fired yet because we have special kind of rules that govern these tags so let's actually go through a tag deployment so what if you wanted to create a new tag that deploys a certain functionality on your website a certain tracking code let's actually get rid of our ga4 page view tag here I can delete this and let's do this from scratch so once you want to deploy a new tag you just go over here to New and then you give this whole thing a name I make it very descriptive so I later know what this actually does and then I go to tag configuration and here we get all the different tools that we can install via Google tag manager and there are actual templates these tag templates give us a way to configure our tracking code so instead of fiddling around in any kind of the code that you see right here instead you get a little form to fill out so for example here it asks us for the measurement ID so we can find our measurement ID inside of the tracking code itself and we'll go through these steps a bit more in depth in the next lesson so here's also the measurement ID you can copy that and put this in here and we'll also want to send a page view event with this configuration and then we can choose our trigger so what are triggers triggers are the rules that govern when a tag should be deployed we have different triggers available we can also create our own custom triggers but for now we'll just go with the all pages trigger because we want to deploy this tag on all the pages to send a page view over every time the user changes the page so you click on Save and now the tag is not yet deployed on our website it's in a testing environment right now and we can again utilize a preview mode to see if this gets deployed correctly so let's connect our domain again and here we see we have our Google ads page view config tag now deployed file at one time and this actually happens now on our page but only on our browser because we are in this preview mode so when you want to deploy this to all your users you could go ahead right here and and then submit a version you can describe what you have changed in this version so we added ga4 and then we can publish this to all our users so now this is deployed and this is really a version and control system within Google tag manager for your tracking deployment this is in many ways really cool because if we make any kind of mistake later on we can always roll back the version and make sure that our tracking is working at any given time so this is now live on our website and we can obviously control this again with our tag assistant we need to enable first reload this page and here we go we have Google tag manager installed sometimes need to exit the cache should also now see another tag here here we go we have our Global scite tag installed as well so this seems to work and we have now done our first tag deployment via Google tag manager and I hope you could see how easy it is to do this really quickly in an interface that doesn't have to do too much with code as well as keeping it all under control because you have these control structures of tags triggers and then later we'll talk about variables as well so just as a recap here we have deployed now a tag through Google tag manager and this is done through one Central Standard that you need to install on your page it replaces all the other Snippets because henceforce you have this visual interface that you can deploy your tags through Google tag manager onto your page which consolidates all of the tracking code into one and gives you all this awesome functionality from tags triggers and variables as well as a version control system and much more so I hope you can see that GTM can be a really helpful tool for your tracking needs now in order to really learn this tool you need to practice a lot and in order to test your knowledge I have prepared actually a quiz for you that you can check out at measureschool.com lesson one test your knowledge there and we'll have some more resources as well alright now that we know what Google tag manager is all about let's start from scratch setting it up how do you get started with GTM well you first need to create your account and then install Google tag manager onto your website let's take a look at our options here so the first thing that you want to do on your browser is to go to tagmanager.google.com this is the URL that you would need to remember and you might be logged in right away into your tag manager account or you might get a window to log into your Google account first you need to have a Google account in order to utilize the service of Google tag manager now if you don't have a Google account you can easily create one down here so once you are logged in you you might be agreed with this screen or another screen where you set up your first account that you have access to now Google tag manager is compartmentalized into accounts and then underneath those are containers you can have access to multiple accounts you can create multiple accounts and underneath of each account you can put in different containers which are basically your websites so to get started here I would say if you are creating something completely from scratch name the account name the best practice after your company so for example we'll go here with demo and then you can choose the country and if you want you can share data with Google as well then you come to The Container name and here's where I would enter the website but it is not connected to your website in any way this is just the name of the account so you could call it anything you want so for example we'll go with demoshop.com because that's where our website is installed now here we have the target platforms that we can install Google tag manager on and we will go with web here yeah but there are many different other platforms that you can install Google tag manager on iOS Android amp and also a server-side instance but these are specialized and they don't have the same interface or the same functionality even then the web interface but since we want to install our tracking on a website we'll go with web here let's create this once you click the create button you will be thrown into this interface where you see your codes that you need to install onto your website so the question is how do you now get these codes onto your website well it depends on the level of access that you have to the website itself and there's a whole range sometimes you are not the administrator of the website itself you wouldn't need somebody else to install for you sometimes you can edit the code directly or sometimes you can install plugins so these are really the three methods that we can cover today so the first method would be well you don't have access to the website itself you might have a web development team that is administering your website and they would do any kind of code changes because we need to integrate Google tag manager on the code basis of our website the HTML needs to be edited and what needs to be done here is to install this code here in the head section and then this code here in the body section of your website again if you are not the administrator of the website you wouldn't even touch these codes but you would need to copy them out and send them to your developer what do you tell the developer once he sees these codes well we have a little template for you that you can utilize you can make a copy of this one we have the link in the description down below measureschool.com GTM installation and you can get access to this little document where you have to swap out your website here and your support questions and then your codes obviously here but otherwise everything is explained and also some links here for the developer if they want to read about what needs to actually be done and then hopefully Google tag manager will be installed we'll go through the steps of actually checking whether Google tag manager is installed correctly in this next step because what I want to show you right now is the other end of the spectrum if you have total control of your website and you can edit the code and you are somewhat familiar with editing codes on your website itself now I realize there are many different platforms out there that you can install Google tag manager on we have made a lot of videos already about different platforms that you can install Google tag manager on so check out our playlist on that one but our website is running on WordPress right here and WordPress websites are governed by themes and themes are where you would be entering any kind of code that you want to have installed on your website itself so I've logged into the backend here of our website and I navigated over from appearance to theme file editor and then I chose for my theme right here the header PHP and this is where you would need to go for WordPress this is WordPress specific and here we can see the HTML and actually the opening head tag right here and the closing head tag is something thing that is embedded in this PHP here but right underneath here or even above this one we can place our Google tag manager code our first code so we have two codes here one needs to be placed in the head and the second needs to be placed in the body section so I'm going to copy this one and then head back here and paste my code and then in Google tag manager I will get the second code here and this needs to be immediately after the opening body tag so the opening body tag for our theme is right here and we'll add our code in like that then we click update file and Google tag manager should be installed how can we check this now well the first check is actually going to our website itself right clicking on the website and then going to view page source and here we should see the Google tag manager Snippets so here we have Google tag manager installed and then if we look for the opening body tag right here we have our no script tag installed as well so this should be in installed correctly onto our website now normally we need to make sure that this is the case for all the pages on our website so it's not just one website should be installed on you could obviously now click around and say okay I'm going to this next website and then checking this one as well and seeing if your code is installed yet that's the case here so this is all great but we can also utilize the preview in debug mode of Google tag manager as I showed you already in the last lesson because that can connect once Google tag manager has installed to your website so you can go here to preview then we enter our URL here and we connect that will open up a new browser you should see that little window here with this yellow dot sometimes it's a different color but this will correspond to the yellow dot right here so if you have multiple tabs open would have different colors and here we can see Google tag manager loaded correctly if you see this kind of thing happening here then Google tag manager is installed at least on this page then let's go to this page and let's go over to this page then let's add something to cart and go over to the card and so on and in our tab here we should see many different pages that were open and we can always look at the URL that we are at right here and it seems to always load on these websites so Google tag manager seems to be installed on all of these pages so this is the second check that you can do and see if Google tag manager is working correctly on the website itself the third part is through third-party extensions so for example the tag assistant is one you can enable that you would need to download it for your Chrome browser enable it and then we'll reload this page and see what it says here Google tag manager is installed don't care about the color as long as it's not red everything is working just fine all right so this is the second method if you have full access to the back end of your website to install the code so you just need to find the right places in the code itself so it's actually in the theme files or somewhere else in your backend system where you can insert these kind of codes again the first one needs to be in the head section and the second one needs to be right beneath the opening body tag now just one word of caution here for the placement of the codes the earlier and the higher up you install Google tag manager the better in the code itself because the likelihood is higher that this code gets executed so just to show you here if you go to view page Source this is pretty high up in the HTML itself so when the computer or the browser starts rendering this page it will start from top to bottom and if Google tag manager runs pretty early on the page it's more likely that your tags are fired and your tracking is working correctly if this code would be lower on the side what could happen is that the page already loads but your codes have not yet been deployed and what the user can do even before the page has stopped loading they can go to the next page or the next page or the next page and that might mean that your tracking codes don't fire so put your codes as high up as possible on the page right let's talk about the last methods or the in-between method if you don't have maybe a development team or you cannot install these directly in the code there's a third option that is quite popular especially with WordPress these are plugins so if you have a backend system that is maybe developed by a third party and they offer plug-in support it might be already a plugin out there that you can utilize to install Google tag manager pretty easily so just to show you that if I go back here to our backend system and I'm just going to get rid of the codes that we have just installed so we don't double install Google tag manager which would also not be good so let me get rid of this one and we'll get rid of this one we'll update the file so now Google tag manager should be not installed anymore and what we want to now do is go to our plugin directory and we want to add a new plugin there's a pretty good one out there called Google tag manager for WordPress so let's just put in Google tag manager here Google tag manager for WordPress by Thomas Geiger and we can activate this one and now it should be installed in our WordPress plugins and all we need to do is go over to settings and then here is Google tag manager now it has a field here to install Google tag manager for us so we need to get our GTM field right here I'll copy that and put this into this field here and then we want to have the container be deployed via this plugin and we can choose the different ways to install this there is an automatic mode the way you don't have to do anything you can place it in the footer I wouldn't recommend this one or you can manually Place The Code by adding these into your steam files again this plugin actually does more than just install Google tag manager onto your website you can also install data layers with it as well so it's pretty useful plugin especially if you work with WordPress so let's save these changes and again you would need to go through the steps and look if Google tag manager is correctly installed go to view page Source here and the placement might be slightly different than what we had before but here we go we have our Google tag manager code and then also let's actually look for Google tag manager here or our ID directly so this is the first code that needs to be installed in the head section and the second code actually doesn't get installed apparently so that is a decision by the plugin maker I think it's because the second code is actually not that important it's a fallback for when JavaScript is not enabled on the browser but nonetheless Google tag manager is installed on this website we can again look at our attack analysis here it says that it's installed two times but we already looked into the code it's just one time sometimes this extension has some weird results so you can ignore this Arrow right here and again we could also then go onto different websites and see if our attack assistant connects here if our attack assistance connection is severed you can always go back and click on preview again and then reload the whole preview mode in order to reconnect to the website itself so just make sure that it's installed on all the pages and that's apparently also the case with this plugin all right so there you have it this is how we can install Google tag manager onto our website and check that it's actually working correctly now that we have Google tag manager set up and installed on our website it's time to deploy our first tags in tags are these tracking codes that you want to deploy on your website so you can capture data about your users Behavior so today we'll go through a tracking deployment to set up tools like Google analytics Facebook pixel and Google ads remarketing on our website so I'm already here inside of Google tag manager and as you can see we have no tags installed currently that's the default and if you have something in here already then maybe you need to check what is actually configured well once you want to install a new tag you simply click on new right here and then we have two panels the tag configuration and the triggering and a name up here as well so the first tag that we want to deploy is Google analytics 4. for that we click on tag configurations and gives us a list of different tools that we can install through Google Hack manager onto our website and on the top here we have Google analytics for configuration so we're gonna click on this one what it needs is the measurement ID and find the measurement idea inside of Google analytics 4. if this is new to you you can create a free account on the analytics.google.com with your account name and then the property name you need a Google account again for this one but once you're all set up you will be asked to add a data stream I have already a data stream in here you would add a data stream for your website and once you have done that you'll get to your configurations panel and here we see actually tagging instructions now this is normally the code that you would need to install and you can add certain lines of code in here in order to configure Google analytics to your liking that's all replaced in Google tag manager with this tag template where we have all the config operations ready in these little Fields check boxes and so on so we don't need to deal with code in this configuration now in Google analytics we can go up here and look at our measurement ID so that's the ID that we actually need I'm going to copy this and put the measurement ID into this field right here we also want to keep this checkbox checked to actually send page views as well before we move on to the trigger I want to give this all a name and I follow the naming convention here of the tool itself so ga4 in our case this is a config or page view tag and we are going to deploy this on all pages now I do this in this way in order to keep it all organized especially when somebody else comes into the account and wonders what this tag is all about they will see this name and probably can figure it out from there as well all that needs to be done now is to add a trigger and triggers are these rules that determine when your tag should be deployed on your website and since this is a web analytics solution and it really only functions if it's installed on all the sides of your website you can go with the all pages trigger so let's add that to our tag configuration and this should be it we can save this and now it's installed in our account but not yet on our website itself because we haven't actually published this version yet before we publish also want to preview if everything is actually working correctly so with Google tag manager can do this pretty easily by going into the preview mode connecting your tag assistant here to your website get another Tab and you see that this is now connected based on the icons that you see up here Pac assistant is connected and we should see the tags that have fired on this page view this is our ga4 config tag and we can control and check if this is actually true through certain methods one is obviously through the extensions that we have already used so the tag assistant extension you can enable that and then let's reload the page and we see right here our Global side tag with our Google analytics 4 ID is deployed on our website so here it seems to work and then the ultimate test would be if actually data arrives in our tool itself and in order to check that with Google analytics we have a pretty handy mode here which is under the configure section right here called debug View and in the debug view you should see a stream of events coming into your account so we have here our page view that we have sent over with all the parameters and there's also a user engagement event that gets automatically deployed by our ga4 tag as well now this is available to you and only to you once you are in the tag assistant and a firing attack so it doesn't get mixed up with everybody else that is currently on the website that's why it's called debug view instead of ga4 so quite handy this one and now we are sure that our data is coming into ga for and we could obviously look if it's actually deployed on all the pages we can click around here say okay I'm going to over here and then I'm going to go to this product and so on and then we should see data coming through in this instance as well now in ga4 sometimes data is patched so it might take a little while for you to see it but here we go we get our page views our user engagement and so on so this might take a few seconds longer it's not quite real time but close to it so now we're pretty sure that our tag deployment actually works and we are ready to deploy this to all our users how do you do this well you go over to Google tag manager and then click the submit button and this will now publish and create a new version for you you can give this version a name and I usually do this because I want to keep track of what has happened and what was added in my tracking deployment at that given time and later I can go back if I wanted to know what has been implemented when so I'm going to put in edit ga4 config and Page attack all right we published this and now it's being deployed on all the pages of our website even for live viewers so if I now exit our tag assistant here and stop debugging and here I'm back on the page I'm reloading this one and now I should see here Google analytics 4 is deployed even though I'm not in the preview mode anymore and we should also in Google analytics see that data come through not this time in the debug view but then actually in the real-time reporting which you can find right here and yeah I'm in Berlin right now and my page 2 was checked so this has been a successful little tag deployment that we have done congratulations if you have followed along so far you have deployed just your first tag now let's go on and do this a little bit faster this time and look at deploying for example a Facebook or metapixel as it's now called so we'll go again to new and to tag configuration and here we have all our tools unfortunately Facebook is not part of the vendors that have submitted a template for review here but there's something called the community template Gallery where the GTM can Community can write their own templates and submit them when we click on that one we get a list of many more tools let's take a look at Facebook is part of this and here we go we have the Facebook pixel from the Facebook archive and we're going to click this and add this to the space you need to acknowledge some permissions here because this is a community template We'll add this and now we have a template installed and this time we simply need the Facebook pixel ID so you log into your events manager if you're familiar with that one and you have the pixels that you have set up here and I have my pixel ID right here so I'm going to copy this and put this into this field right here we want to send over a standard page view and we'll keep all the other settings untouched I'm going to give this a proper name so this is the Facebook metapixel and we are sending over a page view here so as a trigger again we'll choose all pages because we want to have deployed on all the pages we're going to save this and quickly preview right it's connected Google tag assistant says yes it's being deployed and then we have an extension called the Facebook pixel helper we can also see the page view is being deployed and on the events manager we can go to test events here and here you can see all the different events that just came in although let me just clear this activity and try this one more time here we go we have our page view that is now installed okay that is the Facebook pixel let's go ahead and deploy one more tool which is Google ads remarketing for that let's first go through our steps if we click on new tech configuration here there's obviously a tag template because we are working with Google products the Google ads remarketing here we need to put in our conversion ID where can you find that in the Google ads interface well under Tools and settings you can go over to your shared libraries and we have here our audience manager and we have our data sources here and as a data source we have our Google ads tag let's click on details and we have here the tag setup configurations and this is our conversion ID so I'm going to copy that and we'll put that simply in this here you get a warning here that you should install the conversion Linker tag that's very important in order to set the cookies correctly so everybody needs to have that installed if you're using Google ads remarketing or conversion tracking we're going to go to create here I'm just going to click save it gives the name on version link automatically so we'll save this one and the trigger is all pages and now we have this tag also installed it is necessary and just needs to be deployed on all the pages we have our conversion ID in here we don't need to choose any of the other settings unless you want to change them and we can choose as a trigger again our all pages let me not forget to give this a proper name so this is Google ads remarketing on all pages and we'll save this and now we should preview our attack deployment again so we already checked Facebook Google analytics 4 and now let's check Google ads so it seems that Google ads has been deployed here and in our tag assistant extension let me enable this one we now see it also shows up right here so this is great it seems to be working inside of Google answers unfortunately not such a thing as real-time reporting so you can't see actually what is being sent over to Google ads at this point in time but it will give you a hint here after a few hours if this has been tracked correctly so you can take a look at this and see if it works that said I think we are ready to publish our changes here as well so let's go over to Google tag manager and submit this as a version this time we added Google ads and the Facebook meta pixel so there's now been published and it's live on all our website to all our users one word about the Version Control here you can at any time again if you have named correctly go back to your versions you can see what kind of versions were published in the past and you can roll back if you want to so I have a lot of stuff here because I've been testing some of that already alright as you can see Google tag manager is not that hard you just simply need to go through the steps of creating a tag then configuring it correctly adding a trigger to it then you need to save this all and preview it first on your browser and if you're sure that everything is working you can submit this as a version and then it will go live to all your users and the simple reason why we're going through all of these steps is that if we run into any trouble here then we can debug and see what is going on so if it's not deploying in the preview mode then maybe something is going on rather than just deploying it right away onto the website and it might not work or even destroy your website so that's why you should always test before you actually publish something and now we have deployed a pretty basic setup of Google analytics for the Facebook pixel and Google ads remarketing and we always use the all pages trigger now obviously there are other triggers out there but this is something we're going to learn in the next lesson and I'm going to show you how you can work with triggers a bit more now that you know how to deploy tags and cut a little bit used to the process here let's take a look at a few more advanced things because now we have only deployed tags on all the pages and this is necessary for tools like Google analytics or if you wanted to do remarketing with Facebook or with Google ads but what if you wanted to fire a tag specifically on a page that is important to you or that the user should reach and you wanted to track that interaction that might be the case if you have for example a thank you page of your online shop or if somebody submits a form and you want to track that well that's where triggers come in and we'll take a look at those today so I came up with an example here already inside of our demo shop I have a contact us form when we fill it out we should be able to get to our thank you page so we have a thank you page here and this is pretty normal when somebody submits a phone so we have a specific page that we now want to fire a tag on like for example a lead event to our Facebook ad system so we can optimize based on our leads that we have submitted so how would we do that well first of all in Google tag manager we need to define a trigger to find on this specific page how do we do this in Google tag manager we'll go over two triggers here and we don't have any custom triggers to find yet you know that there is the all pages trigger obviously but these are built in and will not be shown in this list we can now create a new trigger and when we click on trigger configurations we get many different events that we can fire and evaluate our triggers upon so these are kind of like checkpoints for example when the page loads we have the page view and somebody clicks a button or a certain user engagement events some other custom events here as well that you can utilize in order to check whether your trigger is true or false and that's basically what a trigger is it is a set of rules that are evaluated at a given point and these points are these trigger types that you see here now we still want to evaluate our trigger on the loading of this website so we can go with the page view trigger here and then we'll choose some pages only and this will open up our filter section and in this filter section we can choose certain conditions that are available so for example page hostname page path page URL and referrer and the page path is everything behind a URL here or the domain name and in our case here we have thank you page in this page path so we can utilize this as the page path then we have different matching options here contains is pretty self-explanatory but you could also go with some more sophisticated options here as well and if it contains thank you and we want to fire our tag let's give this a descriptive name I usually go with the trigger type first so page view and then when it would fire thank you pitch I will click on Save and now we need to connect this to a tag so if you wanted to fire an event to Facebook we would again go with a new event here tag configurations and we'll go with our Facebook pixel and we need our pixel ID so we can find that right here and we'll enter this one right here then we have our standard events and Facebook has a list here we can choose from I think lead is pretty fitting so let's go with a lead event that we'll send over and then we can choose our trigger and this is what we have created the page view thank you page trigger and we'll add this one to our tag now let's give this again a name and save this all right now we go through the other steps of previewing your container first connecting to our website it's actually also in the events manager go ahead and go to test events here now we aren't connected and we should be able to go over to our contact us form let's fill that out and now we are on the thank you page on the thank you page itself that should be shown here we have now fired our Facebook meta event lead that is now being sent over when we click on the actual tag itself you can see some trigger conditions here but for that we need to First choose an event in our case it would be the container loaded event that's the page view event and when we click on it we can see here our check marks and see why our tag fired well the event was the correct one and the Page Plus also contained thank you page that would be different for for example our previous page path our meter event didn't fire and let's go to container loaded and this didn't fire on the previous page views so when I go onto it I see here it didn't fire because the page path didn't contain thank you so this is all working quite fine and this has now been sent over hopefully on this page we can also utilize our Facebook pixel helper see a lead event was sent over and then also in our events manager we see our lead event here was processed as well so this is working all fine and we have now created a specific trigger for a specific page path on our page now you might have seen some really cool events here like the Click trigger events or user engagement events that you could utilize as well so let's go through a quick example on how to set that one up so on our page itself we obviously have here a demo store and we have these add to cart buttons so Facebook also gives us the ability to utilize a event called add to cart so let me just show you this under the tags if we would create a new Facebook tag here we need to put in our pixel ID and then we have our event names and here we go with add to cart so we are preparing right now the tag already this would be again Facebook meta tag for our add to cart and this time it's on a click event let's save this for now there's no trigger for now so let's just save this as a tag and now look at our trigger how would we set up this kind of Click trigger that should happen on the add to cart click well the first part of this is to utilize a generic click trigger so we'll create a generic click trigger that's not yet a specific one and I'll show you what that means the steps are as follows you first create a tag that is firing on your click events I usually go with all elements because I want to track a button here and then we'll leave the this files on Section all clicks we'll just call this click for now and this is a generic click trigger will not connect this to a specific tag just yet because we just want to try it out the other thing that we need to take care of is to tick our variables so we have certain built-in variables specifically for this trigger you can find them on the variables here built in variables now variables are kind kind of like placeholders that we can utilize to evaluate our trigger so we have here our click trigger variables so I'm just going to turn them all on and now that they are turned on we go to preview we are connected and now we just click on the add to cart button here and we should see inside of our tag assistant that there is a new click that has been transported over to Google tag manager now this would happen anytime I click on anything here so if I click on let's do this in a new Tab demo shop up here or I go to another or if I click here into this field or I click on search and so on we have different clicks that should have happened on this page so you see here click click click click and these are all different clicks how would you now create a trigger that only fires on the click that you specified well this is where our variables come on that we have created so if I go over to variables here you can actually see click element click ID click Target and so on and also the click Text so I clicked on different elements so here we have a click ID that was filled with logo this one nothing has been filled but I clicked on the text album so probably it's in the navigation and here the click takes is undefined so you see there are different values for these variables and we need to find the one that we clicked on first which is the number seven here and let's look at something that is unique to this click we could for example go with the click classes and say well there is an add to cart in this click classes that would make sense to actually utilize in our trigger I think the click Text also makes sense because then we know okay if the button changes maybe a little bit from the CSS perspective then we can still fire our attack even if it's not in a button our text so let's go with click Text add to cart right here so we're now refining our trigger from our generic click trigger to a specific click trigger that only fires on add to cart and we'll do this by choosing our filter options here and only on some clicks we want to fire our click Text needs to equal add to cut now it's important we get this right add to cart yes that should be it let's now save this and now we can connect our trigger to our tag so here we go we can utilize our add to cart event right here and I will choose our trigger which is our add to cart event right here let's save this and preview I'm going to close all of these tabs all right now let's click on and add to cart here let's look into our tag assistant we see our click and on our click the Facebook meter add to cart click has fired so it's now connected and sent over data to Facebook that should be also true right here we have our add to cart information that has been sent over and in the events manager we see in add to cart event and can now utilize this event to for example build custom conversions on it or retarget everybody who clicked on add to cart as well now we can obviously also re-utilize this trigger to send data over to for example Google analytics so since we have created this trigger already let's go over to tags and actually create a tag for Google analytics event this time it will be event and as a basis of our tag we can choose here our config tag that will take all the configurations from that prior attack that we have set up and Port it over to this tag we just need to give it an event name and here it's important that you utilize recommended events so there is a list of Google analytics for recommended events that you can see here and we can go and look at this and say okay what would make sense well here we have an add to cart and I'm just going to copy this event name and put this in here let's give this all a name so this is Google analytics 4 event for add to cart and now we can reuse our click trigger right here let's add this one and Save and we'll go into preview again in real time in Google analytics 4 I also want to go into the debug view here so we see what is actually happening on the page our tag assistant is connected so let's go ahead and add something cut again we should see our Facebook pixel sends data over but now also Google analytics 4 should receive new data here again it will take a few seconds and here we go we have our add to cart information that has been sent over as well so we are now tracking this event inside of Google analytics 4 and Facebook ads don't forget if you want to take this live to every user you need to submit this as a version so we added a thank you page trigger and ga4 and Facebook add to cart event let's publish this and now it goes live to all our users all right by now you should be pretty familiar with Google tag manager you already set up multiple tags and also your triggers but now we want to actually dive a little bit deeper into a very important topic within Google tag manager imagine the case that you have an e-commerce store like we have here with our demo shop and the user buys something now sometimes you don't only want to let your tools know that a conversion has happened a purchase has happened but actually what the user has bought and some details around that as well so that information about the purchase of the user can be transferred with Google tag manager over to your tools like Google ads but before we can do that we need to learn a little bit more about some Concepts like data layers and variables and that's what we're gonna do right now so here I'm in Google tag manager already we have all our tags already here set up let's go and actually take a look at the case so I'm going to preview and open up our page again and this time I'm going to buy something so let's check out here and we get to the order received page and here we have a total amount of what we have bought on our demo shop and this is the amount that I want to send over to for example a ad system like Google ads why is this useful well if you let Google ads know not only that somebody has purchased but also the amount of what they have purchased you can for example calculate the ROI the return on investment so how much did you spend on your ads and what was the return in the end that this ad made you crucial information for optimization and that's why it's quite common in conversion tracking now the question becomes how can we transfer this total amount here over to Google ads for that we need to pull in this number into Google tag manager there are several methods to do this but the recommended way is something called the data layer the data layer is a layer of sorts that lives on the website you can't see it really because it's not visible to the user but in Google tag manager you can view it so inside of your tag assistant you can go over here and we just need to find the right event here is the purchase event we can find here a tab called Data layer and in this tab we have a lot of information about the purchase of the user on our website now chances are that by default you don't have such a data layer on your website there are three ways again to install a data layer number one would be to do it manually for that you need to know a little bit of programming because you would need to go into the code of your website and actually put it in and make it Dynamic the second part would be to give it over to a developer if you are not familiar with your website then that's the way to go and third you would install a plugin and see if there's a plugin available that can provide you a data layer in our case we have a great plugin for WordPress called Google tag manager for WordPress that provides us this data layer so if you are running on a woocommerce store you can utilize this plugin as well but what if you don't have a plugin available well then you need to install these codes manually or with the help of a developer and you can find the information on the Google help page here on the different data layers that are available for example for e-commerce sites so in our case we would have here a data layer push that needs to happen when the user has bought and this information would be sent over now this information is not just copy pasted into your theme files for example you actually would need to make it Dynamic so the value for example changes or the text and the shipping based on what the user has bought on your website but I'd say a developer if you send them that over the documentation they should know what to do and how to actually create this on your website so it works for your case and then you have all the information available to be sent over to Google tag manager so as you can see we have this plugin installed we have a purchase event that's happening here inside of our tag assistant and we have all the information here in the data layer as well so that's step number one you need to have a data layer set up on your thank you page now let's take a look what we actually would need in order to connect something like a Google ads tag so inside of Google tag manager I'm going to go over to our tags and click on new here and then tag configuration and then just go to the Google ads conversion tracking that's what we want to do we need to have a conversion ID that's something we'll get from Google ads in just a second conversion label but then here we have a conversion value and possibly also the transaction ID and the currency code so for the conversion value we need to pull that in somehow and that's something that you type in manually because then it would always stay the same you actually would utilize something called variables and variables are placeholders that we have already used in triggers so right now we have click triggers available page path and so on but not our Revenue that we have generated on the thank you page and this is where data layer variables come in so we would create add a new data layer variable so we can click here on plus and there are different ways to pull in information from different sources we want to pull data from our data layer for that we will need to know the data variable name the name that holds our value for that we can go back to the checkout page here and there's a great extension that you can install on your Chrome browser called Data layer Checker and this data layer Checker will let us know all of the different events that happened on our site and if you click on purchase where we have our information in here we have for example if we scroll down we have our value right here eCommerce dot value we can copy this key so you don't really have to know how this is put together and we paste it in here ecommerce.value should give us our value now as a name you can choose anything we want to keep it clean and simple I'll type the variable type in here so data layer variable and we're going to get our Revenue so we know what that is you can save that and then it will be implemented with these two curly brackets inside of our attack as the conversion value the same thing for a transaction ID let's go over here click on new and utilize our data layer variable what do we choose well with the extension it's pretty easy to go into our purchase and we want to get our transaction ID so that's right here we copy the key and again put that into our data layer variable name so here we go data layer variable for our transaction ID save this and it's now implemented in our template could also put in the currency code but that will not change at least on my store so I will just go with USD right here now where do we get the conversion ID and conversion label from that's from your tool directly so inside of Google ads go over here under Tools and settings measurement and then we have here conversions that will bring you to this screen and then if you create a new conversion action you would have your website and then we can enter our domain we actually want to provision this manually so we'll go with ADD conversion action manually and here we go we choose our category of our goal so this is a purchase we can give it a name like a conversion and like purchase and then it comes to this value option so use the same value for each conversion no we don't want to use that we want to use different values for each conversion and that's what we're sending over with the code enter a default value so if you have a default value here we can put that in in our case it would be US dollars and then we'll go ahead and choose how often we want to count this every or one time every time is fine we leave these options the same but you can change them around depending on your preference I will click on done here and save and continue now the next step is to install your tracking code now this is the code that you would normally Deploy on your website itself but we are actually using Google tag manager so we can go to this option and it will give us our conversion ID so we're going to copy that and put that into our template as well as the conversion label here and we should be able to now go on and look at the trigger options so in the trigger we'll click on here and we have our different triggers that we have already created for our case we need to create a new special trigger and this special trigger needs to be based on when the data is available in the data layer itself so here we have our purchase event and I'm gonna go ahead and click on plus and then trigger configurations we won't choose one of these page view triggers but actually a custom event and here is where we can put in our purchase right and let's give this a name so this is a custom for our purchase let's save this and we have everything filled out let's give our Google ads tag a proper name so we find a conversion tracking tag on our purchase event and let's save this and now we have that in here you already know the next steps we now need to test this all out so let's go into preview and continue and let's buy something again we get to the other received page we have here an order number and so on first of all let's take a look at our variables that we have pulled from the data layer so on this purchase event we have a data layer that gets deployed that then pulls in specific data from our data layer variables so data layer variable the revenue and here's the transaction ID that is pulled in to Google tag manager which then goes into our tags and this is our Google ads conversion purchase and we have here a transaction ID variable so this is gray areas are the variables if I go into values we'll now change this around and it's a placeholder in the end with our transaction ID we should also see our conversion value right here so this is all now sent over to Google ads and it seems to work just fine now on Google ads it's a bit tricky to see that data and hotel shows up will take a little while you should see that there's no recent conversions right here but when we send data over should be able to see something in a few hours if you click on purchase we can also go to web pages and see if there's any kind of activity there the real Ultimate test with Google ads is unfortunate you would actually click on your own ad go to the website and then go through a purchase cycle in order for the data to be confirmed inside of Google ads because Google ads only will attribute data from a prior ad click so if there was a prior ad click to one of your Google ads then it will show up in your reports as a conversion you can obviously also utilize some other tools we have here the tag assistant unfortunately that wasn't enabled so let me just go through a quick another order here and then when you get to the auto receipts page again here on our tag assistant we should see conversion ads tracking as well and we have a conversion value as well as the currency and the label and the conversion ID so I trust that we have created this correctly obviously you would need to confirm with Google ads later on when you actually take this live to website which is our last step here really to go over to Google tag manager and submit this as a version we have added in this version our Google ads conversion tracking all right so as you can see there's more to Google tag manager there's something called the data layer that then transfers data over into variables you can use these variables these placeholders in your tags as well and then have a dynamic tag deployment with Google tag manager which then in turn Powers more data inside of your tools like Google ads ROI analysis for example all right you have come to the last lesson of our GTM for beginners series here and congratulations if you understood everything and followed along then you should already be well on your way on using Google tag manager efficiently nonetheless Google tag match has a really big topic and if you really want to dive into it and become proficient at it then you need to practice much more and also know what you just don't know yet so in this video I want to show you a little mind map that I created in order for you to become a really good Google tag manager implementer so let's take a look here Google tag manager is a pretty big topic and I created here for five strings that will show you what you actually need to learn the first thing is obviously the fundamentals so the fundamentals here are really about why use Google tag manager why should you use it we covered a little bit of that in our beginner's lessons here and if Google tag manager is actually a tracking tool or is it something else that's actually in between that so you need to be clear on this question now on the technical side you also need to know about the implementation and how and what the different types of implementation they are how it impacts site speed and what are the capabilities of tracking with Google tag manager on the other side here we also have privacy implications of Google tag manager security concerns that might be out there and if you want to deploy Google tag manager not on a website what are the capabilities on mobile apps so once you are clear on these a lot of people already start and Implement a lot of things with Google tag manual we have done it in the course I actually find it much more important that you learn about the Five Pillars the components of Google tag manager what are those well really there's the snippet that you install on your website then you have the data layer the tags the triggers and the variables that lead into a tracking deployment and you need to know all about these we have talked about some components here but just to dive into it a bit deeper so the data layer is a very important concept that you really need to understand in order to use all the capabilities of Google tag manager and for the data layer itself you will need to learn the syntax writing an actual data layer in itself so that comes down into what is a JavaScript array what is the difference with Json the key with pair values the data types and so on and then also you need to understand the event key itself inside of the data layer writing you need to know how to write a data layer push in order to send this on to your developer itself we have data layer versus data a model and we also have here the tools that you would need to be familiar with for the data layer itself and we also have tags triggers and variables I will skip over them since we have talked about them in this course but then there are also something called templates so what are the use cases of the templates itself we have utilized a community template already for our Facebook tag so you might be familiar with that as well but inside of Google tag manager you can manage your tag as the name already implies and there are many different functionalities like you can do Version Control workspaces exporting importing containers environments approval queue and user permissions so there's a lot more than what we have done in this course alone then you can dive into the tracking deployments we have looked at several attacking deployments already Universal analytics ga4 Facebook pixel Google ads Bing ads Pinterest LinkedIn Twitter and Tick Tock these are just some of the tags that you can obviously install and some of them are similar but a lot are a little bit different rent and you really need to have done one of these implementations in order for you to call yourself as experienced in these tracking deployments then we have some tracking techniques as well so for example iframe tracking form tracking all these different interactions that you can track across domain tracking if you are using for example Universal analytics UTM parameters we can do a lot with Google tag manager to manipulate how we are sending data over to our tools and there are different techniques a lot of them we also describe on our videos so you can check those out as well but I'm just showing you here what you can really do with Google tag manager custom task is a really cool thing if you utilize Universal analytics at the moment and want to manipulate your tracking inside of Google tag manager and then there's this whole concept around cookies so how would you be setting cookies reading cookies as well something that you would need to understand itself so as you can see there's lots more to learn in Google tag manager and we have a lot more info information on our YouTube channel blog as well as little mini courses that we do from time to time or live trainings on our website so if you want to learn more about Google tag manager definitely check out measureschool.com but if you're really committed and want to take the next step with your Google tag manager Journey then maybe check out our Google tag manager beyond the basics course this is a course that I've created where I really want you to practice your GTM skills so you will get access to our demo store where you will be able to install your tracking and then we have these little challenges for you where I give you a little challenge to try out to implement something and a solution video so you'll be able to control what you have done and get some more tips on how to actually do this efficiently in your Google tag manager account so I think it's a perfect next step for you after this beginner course to go and learn more about Google tag manager get used to the tools and work with it more efficiently so if you want to check that out head over to to measureschool.com gtmbtv for Google tag manager beyond the basics and there you'll find more information well it was my pleasure to introduce you here to Google tag manager and this little beginner course we have tons more material obviously on our website and our blog and I hope I could create that little bit of curiosity to utilize Google tag manager I think really it's a great tool and everybody should be using it so thank you so much for watching if you have any kind of comments then please leave them down below and if you want to share this video then hit that Thumbs Up Button we would really appreciate it so we can share it to more people out there now as always my name is Julian see you in the next video

Channel: MeasureSchool

Views: 8,298

Keywords: google tag manager resources, learn google tag manager, google tag manager community, learn gtm, master gtm, master google tag manager, gtm for beginners, beginner gtm course, gtm course, google tag manager course, how to test gtm, practice using google tag manager, practice using gtm, create a demo website, how to use gtm, how to use google tag manager, start using gtm, start using google tag manager, gtm project, google tag manager certificate, gtm certificate, ga4

Id: 8PtjpHPNfUA

Length: 63min 34sec (3814 seconds)

Published: Wed Oct 12 2022