The New Google Tag Manager Preview mode (a.k.a. Tag Assistant)

the team behind google tag manager has released a completely new version of the preview and debug mode which is now known as tag assistant and for some of you this might be confusing because there is also a chrome extension called tag assistant but which one is which are they connected in this video i will walk you through the feature set of the new google tag manager preview in debug mode make sure you stick around to the very end of this video because there are many nuts and bolts that you must be aware of also if you want to stay up to date with google tag manager consider subscribing to this channel so let's dive in [Music] i know that this video will be watched by people who have been working with google tag manager for a while but also it will be watched by total beginners who are just starting with google tag manager that's why i wanted to make the first part of this video as a general introduction to the preview and debug mode and what are the benefits of it so if you're already familiar with that feel free to skip to the next chapter of this video where i show how to actually work with the preview and debug mode you will find all the timestamps in the description below the video when it comes to working with google tag manager here is a very rough workflow when you work with google doc manager you configure some tags triggers and variables and then if you want to make those changes go live then you must publish the container when that happens your tags are activated on a website and they start measuring your website visitors engagement and so on however this process might be very risky because what if some of the configurations are not working properly how can you make sure that your tags are actually firing when they are supposed to and that's where the preview and debug mode comes very handy because it allows you to check your google tag manager container before all of your changes are actually published on a website and the best part is that you can do that like in a sandbox which is basically within the boundaries of your browser this means that when you do some changes and you test your setup this is happening only on your browser and your visitors are not affected and when you make sure that your setup is actually working properly then you can publish the container and now let's take a quick overview of the benefits of google tag magic preview and debug mode and after that we will see how it works in action first you can see which tags have fired and which ones didn't and you can do that on a very granular level for example if a visitor clicks a certain element you can see which tags fired on that click and which ones didn't then you can also find out why certain tags haven't fired or maybe why they actually fired for example maybe you have a form and you want to fire a google ads conversion tag when that form is submitted now with the help of preview and debug mode in google tag manager you could do that quite easily because you can just see which conditions were met and which ones were not that way you can find out where is the problem and the most obvious reason is that you can preview your changes before they go live so for example if you add 10 new tags triggers and variables and you want to see how they work you don't have to publish that because if you publish something incorrectly your entire tracking setup might not work but with preview and debug mode or which is also known right now as tag assistant you have a much better chance of not breaking your setup and not messing with your data collection process and now let's take a look at how the preview and debug mode actually works in google tag manager when you make some changes in your container for example let's say that i have now added one page view tag and also i've added an event tag that will fire an event google analytics when i click any link in the menu of the website and i want to check how that works to do that you first need to click the preview in debug mode and when you do that a new tab will open and the domain of that tab is tagasystem.google.com and this is the new experience of the preview and debug mode if you ever watch some older videos or read some older blog posts you might see screenshots that show some orange banner appear in the interface so right now from this moment that is not the case because from now on that orange banner is gone this is happening because the entire experience of the preview mode has changed so when you click the preview mode a new tab opens right here and now you need to enter the address of the website where you want to test your google tag manager setup in my case this is the domain also you will see a checkbox right here by default it should be enabled what will happen is that it will add a certain url parameter to this address and thanks to that parameter google tag manager will know that it should enable the preview debug mode now if your website does not support the url parameters i mean some custom url parameters then you should disable this one but it is highly recommended to keep this enabled in all the other cases so when you do that you need to click start and you will see this loading bar and now another window has just opened with your website that you are actually previewing right now the fact that this notification appears right here this means that you have just enabled the preview mode successfully so this means that debugger is connected and also if i minimize this window you will see that we see the word connected right here as well and of course this success message here also shows that we have enabled the preview mode successfully now if you click continue right here you will see the event stream right here and four main tabs right here so technically speaking one of the main differences between the new google tag manager preview debug mode and the older one that you might find in some blog posts or videos is that this one is relying on the first party cookies and local storage while the previous one was depending only on third-party cookies so here's the deal the entire debugging process will be happening between two windows the one is the preview mode and the other one is the actual website where your debugger is enabled so let me show you for example right here i can click on the menu i can click right here and what will happen is that that click appeared right here and then the page reloaded and if i let's say go to another page you will see one more click right here and then we see another page so what is happening right here is that every page view is now grouped like this so during this recording i made three page views so the first one and here are the events that happened on that particular page view then this is another page view and finally right now i'm on a product list page if you are familiar with the older version of the preview debug mode you know that refreshing the page refreshes everything that was in the preview mode but that is not the case anymore because right now we see all the page views and all the information is persisted so for example right here we can click on the event which is container loaded so this is like the earliest moment when google tag magic container loads and then you can see what was pushed to the data layer what tags fired what were the variables what were the values in the data layer at that moment and then i can also access the information let's say two page views ago three page reviews ago or etc previously in this video i mentioned that i have a google analytics event tag that sends an event information when a visitor clicks any menu item right here and one of the link clicks was actually right here i made this click on the previous page so what i could do is that i could actually click this link and see what happened in google tech manager on that particular link click and we see that there is one tag that fired on this particular click and that tag is the one that i expected to fire this is menu link tag and if i click it i can see what kind of information was sent to google analytics if you want to switch to the actual values you can do that by clicking values right here and you can see the tracking id the the event action event label and all the other information also you can see the conditions that were met right now in this trigger there were three conditions actually there were two conditions this one is kind of like more technical one and you don't have to care about that and in this case we care only about the first two so the first one is that the event was supposed to be link click and i actually clicked the menu item on the website and then there is another condition that click classes i can switch it right here that click classes must contain this information and if i switch to values we see that this click classes value of that menu item actually contains the one that i am looking for and the one that i have configured in my trigger because if i go to the trigger you will see that my condition is click classes contains this particular value when you switch between one event on a page and another you can also check how the variables are changing between each event this helps you better understand whether certain parameters and certain variables were available at that moment in the preview and debug mode because for example if you want to send some event about the login to google analytics and that information about the login is still not available in the preview mode you can check that right here also just like in the older version of the preview and debug mode you can see the data layer tab so you can check what kind of information was in the data layer and how did it change with each interaction on a page i am not going to dive deeper into what a data layer is in this video but if you want to learn more i have a blog post and i will post a link to that below the video and then when you choose any event in the preview mode right here you will see a section which is called api call so this would displays not only data layer pushes that happen on a page so this means that some information was pushed to the data layer but it also will show you some other interactions that are happening on the page for example gtag calls so if you want to see more information that was in that particular call you can just click right here and you will see all the information that was added for example to the data layer or maybe what kind of information was sent with the gtag call if on your website you have not only universal analytics code and google tag manager but also let's say you have the new version which is google analytics 4 then you will be able to debug that as well by switching between let's say the containers or the properties right here so if you see a container id and you see this icon this means that this is a drop down menu and you can switch between multiple instances that you want to debug so for example in this case on my test website i have my google tag manager container but i also have implemented the new google analytics four property so if i click it you can see a little different view first of all you will see some different interactions and if we go to the summary you will see not the tags that were sent because right now we are not previewing the google tag manager right now we are just checking the new google analytics four property and in this case there are three hits three interactions that were sent directly to google analytics four this means two page views and one user engagement because probably i have enabled some automatic tracking as well i just don't remember that therefore there is no tags or variables tab there is just hit send what was in the data layer and then the errors tab and let's say if i go right here and on the page view i click on the stack i can see all the information with some friendly names for those parameters and i can see everything that was sent to google analytics for once you finish the testing process and you are sure that your tags fire when they are supposed to then you can go back to google tag manager and click the submit button right here and choose publish and create version and then click publish of course it is highly recommended to naming this version as well because in the long run uh it will be easier for you to identify what kind of changes were implemented with what kind of version to exit the preview mode you can go back to that window that opened after you enable the preview mode and you can click on this x icon right here so this will stop the debugging and when you do that let me take a look when you do that when you exit the preview mode you will see that it is no longer connected so this window this tag assistant window is no longer connected to that website window where we were actually debugging and checking what is happening on the website so if you see that this is not connected and you want to reopen the debug mode you can click the reopen once again and once you do that it will reopen once again and you see that debugger is now connected so this window is connected to the preview debug mode window but if i close it right here and then i close it right here you will now see that my browser is not actively debugging any domains and in fact if i want to quickly reopen the preview and debug mode i can do that right here because there is like some sort of like a history so this is also quite convenient i can click on it and then it will start to connect and you will see that my debugger is now connected to the tag assistant right here once again you see now errors right here you see no errors right here also this is that url parameter that is added automatically by the preview and debug mode so it helps google tag manager to identify that this window is related to the actual debugging process and the last thing that i wanted to talk about but this is not the smallest one this is actually really cool is that you can enhance the experience of the preview and debug mode in google tag manager by installing the actual chrome extension which is called tag assistant i'm talking about this extension and if you are interested i will post the link below the video to this particular page now speaking of the naming convention this is quite confusing because we have a chrome extension which is called tag assistant and we have the preview mode in google tag manager which is called tag assistant so i don't know how google is planning or if they are planning to resolve this like naming conflict in some way but what i want to show you is that if you install this extension you will see some improvements and actually they're quite convenient in the previous debug mode of google tag manager so first of all let's say that uh after i install the the extension i want to enable the preview debug mode once again so i click preview then the new tab will open with tagasystem.com sorry tagasystem.google.com and then if i click start it will open a new tab instead of opening a new window so this is a little more convenient at least for me personally because i hate when new windows are popping up so working between tabs for me is better but for example if you're working with two different screens you can uh move let's say this tab to one screen and this one to another screen and if you see there is like a like this icon so this is a very useful if you want to debug let's say three or four tabs and if you want to quickly navigate between one tab and another you can do that thanks to these little icons so for example in this case i have a blue diamond now if i open another link in a new tab now i got the yellow circle so right now i have two pages and they have two separate visual identifiers and if i go to my preview and debug mode right here you see those two symbols right here so this allows you to faster identify with which page are you working therefore i mean the navigation between tabs and the debugging is a little faster if i open let's see one more tab i get one more icon right here which is blue circle and i see the blue circle right here so if i want to debug this page i can just quickly take a look at this icon this icon and then i know where to switch and this makes my life a little easier so that was a general overview of the previous debug mode in google tag manager which is now called tag assistant so i need to somehow get used to that new name if you have been working with google tag manager for a while this is definitely something new and you will have to force yourself and get used to that because there is no way to switch to the previous version this is how this will work from now on and if you're watching this video in october 16th of 2020 you can actually hear thousands of google tag manager videos and blog posts screaming because they suddenly became very much outdated because the entire experience of the premium debug mode has changed but if you have just started working with google tag manager and this is your first experience then well welcome aboard and if you need some other tutorials about google tag manager take a look at my youtube channel and my blog which is analyticsmania.com all right so now you should have a better understanding of what a google tag manager preview and debug mode is and how to use it personally i recommend also having tag assistant chrome extension installed as well because it makes the whole debugging experience even more convenient and straightforward if you found this video useful hit the thumbs up button below the video because it helps me continue working on this channel also if you want to learn more about google tag manager and google analytics consider subscribing to this channel my name is julius this is analytics mania and i'll see you in the next video [Music] you

Channel: Analytics Mania - Google Tag Manager & Analytics

Views: 29,999

Keywords: tag assistant, google tag manager preview mode, gtm preview mode, gtm debug, debugging google tag manager, gtm tag assistant, new tag assistant, new tag manager preview mode, new debug mode, google tag manager

Id: lohO5eFAK60

Length: 17min 24sec (1044 seconds)

Published: Fri Oct 16 2020