5 Advanced Google Tag Manager tips

in this video i will share five advanced google tag manager tips that will either make your setups more reliable or they will help you solve certain challenges when a developer is not available also at the end of this video i will share two additional quick tips that i think most google tech manager users just don't know [Music] hey my name is julius and welcome to analytics mania youtube channel where you can learn google tag manager and google analytics and if you want to stay up to date with google tech manager consider subscribing if you are watching this video i presume that you already have some experience with google tag manager you want to learn new tracking techniques that will turn you into a more powerful and more flexible google tag manager specialist to help you with that i have picked five very specific situations that require advanced solutions so let's dive in also don't forget those two bonus tips at the end of the video let's say that you have a situation where you want to track clicks of the menu items right here so what you would usually do is that you click on these links and then you check all the link click events in the preview mode and you try to find some variable which can be used in your blank click trigger so for example in this case you could try to use this value as a part of your triggering condition like this let me show you quickly that would work however how are you sure that there are no other elements on a website that have this very same class well one of the ways could be to go to developer tools elements and then try to use the search like this but if you try to use more complex conditions then this option will not be very reliable that's why you could try to use the query selector all method with that method you could enter a certain css selector and then check how many items match that particular criteria so if you go to the console and enter the following command which is document dot query selector all this is case sensitive then open parenthesis open quotation marks and then enter the css selector that you want to check in our case i'm trying to create a trigger which is using this class and if you are familiar with css selectors you know that a class in a css selector starts with a dot therefore we enter a dot class name then close quotation marks close parentheses and then hit enter and this command will return all the elements that match this particular criteria or in other words and have this class if i expand this list i will see that there are five elements and if i hover on each one of them they will be hovered right here as well so in this case i expected to have five elements with this particular class and the results show exactly that however if in another case you were expecting five elements but you get let's say 25 elements this means that you need to come up with some more specific condition that's why learning the fundamentals of css selectors is very useful i personally use this command very often so don't forget it document.queryselectorall there's another method which is query selector without all but don't use it because it will return the first element that matches your criteria but in our case we want to get all the elements therefore we use query selector all all right let's go to the next tip sometimes where you're working with data objects arrays you get something like this let me show you i will just quickly submit this form click here and then in the data layer i will get an event that looks something like this and if i expand it you will see that this is the event and this is a parameter called form data now the value of this parameter is a text but within it you will see that it looks like an object so for example we have a parameter form name of which value is important form and then we also have form id of which value is abc123 if you are familiar with accessing data in the data layer you could try to do something like this you could try to create a data layer variable that accesses form data dot form name however in this case it will not work because this is not an object i mean it looks like an object but it is turned into a plain text because it is surrounded by quotation marks right here the situation like this is not very common however sometimes you have to face it because i don't know maybe something in the developer's code is not working properly as it should be so what should we do if we for example want to access form id value right here let me introduce you to a method called json parse that method allows you to convert this kind of string into an object so let's take a look first of all we have to create a data layer variable for this key so let's go to the variables tab in google tag manager then click new verbal configuration and then choose data layer variable now let's copy this i will paste it and then i will name this variable so if i click the preview button and then enter the url of my thank you page here's what i will see again i get that from submission event i click it then i go to the variables and you will see that my data variable contains the string so if i want to access this particular value right here first i have to turn this string into an object or in other words i have to get rid of these two quotation marks right here and that can be done with a function called json parse so let's go to google tag manager variables and create a new variable of which type is custom javascript just like in any custom javascript variable of google tag manager we have to create an anonymous function and then we must have a return statement that will return something but first we can do something like this we will check if this variable is present on a page and it contains something or in other words it is not undefined therefore we can do like this if that variable which is dlv form data exists then do something and that something will return the value now what kind of value should it return we can take that data layer variable once again and we can insert that variable into a jsonparse method so json.parse and then open parenthesis and close parentheses so what will happen is that this method will take this value which is a string and will parse object from that string so actually we can take a look what will be the result of this so let's name this variable let's say form data as object and then click save now i will refresh the premium out and check what is the value of that custom javascript variable the page has refreshed then i will click from submission again i will go to variables and you will see that my cgs form data as object variable is now actually an object and now we can work with it as an object so if you want to access form id value right here all you would need to do that you would need to go to that custom javascript variable and then use dot notation so in other words enter dot and then the name of the key that you want to access and it is form id like this and now i will rename this variable like this click save then click preview to refresh the preview mode and let's check the value once again click form submission go to variables and here it is this is the form id that we have extracted from this string we converted this string into an object and then we worked with the object and accessed that form id parameter another popular situation where this technique is very useful is working with cookies sometimes cookies also contain objects but they are always stored as strings so if you want to access some parameter from the object stored within a cookie you first have to convert it from a string to an object and then in that custom javascript variable you could use not the data layer variable but the first party cookie variable that accesses that particular cookie on your website now let's move to the tip number three let's say that i have this page obviously this is an empty demo page but let's say that i want to track this part of the url and use it as a variable or actually this part right here so here's what i could do i could use the global javascript variable that accesses the url of the page so that can be done by window location href and if i want to access this particular part i can actually split this url into multiple parts and this slash might be my separator so i can use a function called split and then use it like that so if i hit enter now i will get an array of six items right here and in this case i need this part so this is the first item second third fourth and fifth item right here however in javascript index starts with zero so if i want to access this particular value i have to use the number four so if i hit up on my keyboard i will go back to my most recent function that i used in the console and then i will do like this open square bracket 4 which is the index of this particular item and then close square brackets this is the value that i want to access however there is one thing that i would like to change here and it is this part this percent 26 is just an encoded value of the ampersand so if i send this data to let's say google analytics i would like to have the following value which looks like this because this part might look a bit confusing for less technical people so how can i do that well i could use this function right here and then use a method called decode uri component so now i will select all of this then hit cut and use the method that looks like this decode uri component then open parentheses paste my previously used code and then close parenthesis and if i hit enter now you will see that the encoded part is now decoded and this might be useful in other situations where you see let's say spaces replaced with this kind of encoding like this which is quite popular so once i got this let's use this in a custom javascript variable within google tag manager so i will copy this entire code like this then i will go to google tag manager click new variable configuration custom javascript variable and once again anonymous function and that number's function must return the following value now let's name this variable and it can be something like second directory of the page path because this is exactly what i want to access this is the entire page path and this is the second directory of the page path so let's save this variable and let's test whether everything is working properly so click preview button then let's wait until the preview mode refreshes and when that happens i will close the console and you will see that on let's say this container loaded my variable which is this one returns the unencoded value or actually decoded value and let's go to yet another example here i am on a very poorly designed thank you page and this page is displayed after a visitor makes a purchase so let's say that i want to use this value as a variable in my google tag manager setup so if a developer is not available and he or she cannot push the order total to the data layer you could try to take this information from the page itself or in other words you can access the dom so if i right click on this order total and then inspect you will see that we are quite lucky and this order total is an element that has this particular id below this video you will find a blog post where i explain and share several codes that will allow you to extract price from the text there are several options so i would recommend to read this guide in order to get familiar with all of them and then choose the correct one in my case it is enough to use just the first option right here so this is the code that i should copy and then i would have to go to the variables in google tag manager section then new variable configuration custom javascript variable and then paste this code right here but just copy pasting will not work because we still have to replace this part this is the place for the css selector now if we go back to the website you will remember that we are quite lucky and we have this id which is order total so i can just copy this and then replace this placeholder with hashtag and the actual value because in css hashtag means that this part is an id of the element so let's save this variable and click save then click preview and let's check what kind of value does that variable return the page has reloaded the preview mode has also been reloaded and then you should click on dom ready go to variables and here you will see that our order total now returns this particular value even though on the website the order total also contains the dollar sign but that code that you got from my blog post removed that sign and it is now available right here like this however keep in mind that we are right now scraping the dom or in other words the document object model so if you plan to use this variable start using it from dom ready and all the subsequent events don't try to fire a tag on container loaded that is using this variable because sometimes it will work sometimes it won't now let's take a look at one more example here i am on a thank you page and on this thank you page sometimes the order id is visible right here while in other cases it is visible in the url now again the best way to tackle this would be to cooperate with a developer and just properly ask him or her to push the data to the data layer that will be the most robust solution but in this video we pretend that there is no developer therefore we have to come up with some solution so in some cases the order id is visible right here but in other cases it is visible right here so how can you create a variable that will return either this or this well actually this is quite simple and it can be done by creating one variable for this element one variable for this and then creating a javascript variable that returns one variable and if that one is undefined then it will return the other variable so first of all let's return the variable that returns this value and that can be done by doing the right click on this id and checking if there are any ids or values or classes in this case we're quite lucky because we have this id of which value is order id so we can copy it and then go to google tag manager variables new and then create a variable of which type is dom element so we have the selection method which is id so let's keep it because we try to access the element that actually has this id and then paste that id then let's name the variable and hit save the next part is to create a variable that returns this value from the url so i copy order underscore id then go to google tag manager again variables and then click new then in the variable configuration i select url and then i select query here in the query key field we have to enter this name of this particular query parameter so do it like that and then let's save this variable click save so as i've said sometimes on a thank you page this parameter is available as stores the order id but sometimes the id is available as an element on the website so to tackle this situation we can go to google doc manager variables and create a new variable of which type is custom javascript and then we can enter an anonymous function that returns either the url variable or and in javascript you can enter or by adding these two vertical lines or they are also known as pipes and then after these two pipes we enter another variable which is the dom element variable where is it here it is order id so what will happen is that first this variable will try to return this parameter from the url but if this variable is not in the url it will be undefined therefore this variable will try to return this value and i'm talking about the value of this variable now let's name this variable so it can be order id from url or the dom and then save this variable now let's refresh the preview mode by clicking the preview button right here then the page will reload and i can click on the dom ready right here and go to variables first of all we will check the individual variables so we have the dom order id and it contains some value and we have the url variable right here which is undefined now the reason why this is undefined because there actually is no variable right here i mean there is no query parameter that contains the order id but if i check my custom javascript variable you will see that it still returns the value now if i do another situation where there is no order id on the page but we have that order id in the url let's check what happens now so let's go to the preview mode then dom ready and then in the verbose tab you will see that the custom javascript variable still returns that order id but in our case the dom element variable returns null so it means that there is no element on the page that stores the order id but the url variable returns that value and that was the fifth advanced google tag manager tip that i wanted to show you in this video now let's take a look at those two quick bonus tips that i promised to tell you in the beginning of this video so the first one is for those who have the ocd and they want to see their codes with proper spacing so if for example you paste the code that looks something like this and there are no spaces right here because to make this code a bit more readable it should look like this like this and like this yeah and so on so on but if you have let's see a hundred lines of code and you don't want to manually fix the spacing right here here's what you could do you can select the entire code i did that with control and a on my windows device and then you hit shift tab and then google tag manager will handle the spacing for you this is a very minor thing but this is quite pleasant when you're working a lot with the code and the other quick tip will allow you to quickly test the code of your custom javascript variables directly in the console of the browser there are some nuances but let me show you first so let's say that i have this code right here and then i go to the website so let's say that i received that code from my co-worker or i don't know maybe my developer or maybe from someone else so one way how i could test it whether that code is working properly is that i could go to google doc manager create a variable that variable is custom javascript variable and then i could paste that code and then check if it's working but there is a faster way how you can do that so if you go to the website and you open the console if you try to paste that custom javascript variables code like this you will get this error because this is an anonymous function and you cannot use anonymous functions in the console like this however you can do the following thing so you enter the open parentheses then paste the code of your variable then close parentheses and then open and close again so basically what you have done here is that you have converted that anonymous function into a thing called immediately invoked function expression now don't worry about this the thing that you need to remember right now is that you can surround the code of your custom javascript variable with the opening and closing parentheses and if you hit enter right now this variable will be activated however there is a very important thing that you need to remember this quick tip works only if you are not using google tag manager variables in this code so for example if you try to use something like this where you just you know have your data layer variable which returns the price this will not work because the console doesn't know what this refers to this can work only within google tag manager container but if you have some custom javascript code that does not rely on any elements of the google doc google.measurecontainer because in this case this code just accesses that element on the page and then this code does something with that element this will work and you can test that code in the console as long as you turn that custom java variables code into the immediately invoked function expression so again open parenthesis paste the code close parenthesis open close and then boom it will work so these were the tips that i want to share if you have some additional quick tips that you believe other users would also benefit from feel free to post them in the comments all right i hope that now you have learned something new today and that these tips will help you be more flexible in the future while working with google tag manager 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 4 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: 3,326

Rating: 5 out of 5

Keywords: google tag manager, advanced gtm, advanced google tag manager, google tag manager javascript, gtm tips, google tag manager tutorial, google tag manager tutorial 2021, google tag manager js

Id: ZOmKAsect24

Length: 21min 8sec (1268 seconds)

Published: Tue May 04 2021