Data Layer in Google Tag Manager || GTM Data Layer Tutorial 2021 with examples

in this video i will explain what data layer is in google tag manager how to use it and why it is the most important part of your tag manager setup hey my name is julius and welcome to analytics mania youtube channel if you are new here i teach people how to work with google tech manager and google analytics so if you want to stay up to date with google tech manager consider subscribing data layer is the most important part of your website's google tag manager setup without it you would not be able to track things like clicks form submissions purchases and many other things so it's very important that you get the proper fundamentals of this topic also at the end of this video i will share three most common rookie mistakes that you should avoid at all costs while working with the data layer we have lots to cover so let's take a look at this point you should already know that google tag manager is like a middleman between your website and your marketing or analytics tools but in reality there is one more very important component in this puzzle and it is called data layer when google tag manager is installed on a website it also automatically creates data layer unless of course your developers have done some additional configuration and created that data layer with their own code data layer is used to feed information to google tag manager from your website data layer is like a bucket where information needed for tracking is temporarily stored and then it is used to feed that information to google tag manager which then sends that data to tools like google analytics google ads facebook pixel or somewhere else data layer is not some standard component of every website usually it is very specifically related to tag management solutions for example google tag manager so if you want to track some interaction or maybe you need some data about a user for example user id login method maybe something else then data layer is needed for that because first data must appear in the data layer and then google tag manager can be configured to take that data from the data layer and send it somewhere further that is why the first thing that you should learn about data layer is how data is added to the data layer so you might be wondering what or who can add data to the data layer and there are several options the first one could be developers so for example if you want to have some data about products or about purchases in the data layer then you can ask a developer to push that data to it then you can have some website plugins for example if you're working with wordpress there is a very popular wordpress plugin which is called google tag manager for wordpress so once this plugin is installed on your website and once you have configured it it will start adding some information about the page about the user about something else to the data layer for example here i have a demo wordpress website i have installed that gtm for wordpress plugin and then because of that plugin is enabled if i go to the preview of google tag manager you will see that on every page that plugin is already pushing some data well right now i don't have much data but since i am on home page or in other words from page that plugin is adding some data to the data layer about what kind of type is this page off if i go to a blog post and then check the preview out of google tag manager you will see that we have more information for example what is the author of that article what is the category and some additional information so this is possible because the plugin is pushing data to the data layer about something that is happening on a page also things called listeners can add some data to the data layer for example when you have enabled at least one link click trigger on a page you will then start seeing link click events in the preview mode for example here in google tag manager i have a link click trigger which will fire on all link clicks and now if i refresh the preview and debug mode of google tech manager let's take a look what will happen here i have several links so i will click one link another link and since i have enabled that link click trigger it also enables a thing called link click listener and if i now go to the preview mode you will see that we have some additional information about interactions that happened on a page and those interactions are link click i click it and then you will see the api call section right here and here you can see what kind of information about that interaction was pushed to the data layer and also you can push the data to the data layer by yourself but for that you would need to be more experienced and you would also need to have some basic javascript coding knowledge that is why in this video i will not be focusing on that so the data to the data layer can be added with a method called data layer push in this example the event called purchase will be pushed to the data layer and it also additionally will push two parameters the first one is transaction id and here is the value of that parameter and here we have transaction total which is also known as order total and the value of this is right here also this is called key and this is called value that is why you might hear sometimes a phrase called key value pair if you take a look at the official google tag manager documentation you will see that they also suggest some time to use this syntax which is data layer equals and then something which is obviously different because i previously showed datalayer.push well after seeing a lot of situations where this goes wrong i would not recommend using this method because this kind of method works only if data layer code is added above google tag manager container snippet and sometimes developers just somehow miss it or maybe they accidentally do that and if this code is added below google tag manager container snippet in the source code of the website then it will just stop working event tracking will break on your website that is why instead of this kind of syntax you should always use this syntax that consists of two parts the first one is window.datalayer equals window.datalayer and then this part so this makes sure that data layer will be created on the page if it hasn't been created yet and if it already exists then this line of code will make sure that the existing data layer will be reused and then this code pushes some additional information that you need to the data layer for example let's say that i want to track what is the page category and send that information with page view events to google analytics and to do that i asked a developer to push this kind of information to the data layer when i explain how to use and how to work with data layer i often get these questions marketers and analysts ask where should their developers place the data layer push codes and also when should those codes be activated and the answer to that is well it depends in most cases the location of the data layer push code depends on the code structure of the website and that is responsibility of the developer but in some cases you might need to have the data layer push code activated in certain situations or be placed in certain places so let's take a look in order to know the answer to these questions you should ask yourself this do you need that custom data of the data layer push as soon as the page loads or not and when i say as soon as the page loads do you need that data on the moment or before the moment when the container loaded event appears in the prevent debug mode because if your answer to this question is yes then you should ask your developer to place the data layer push code above the google tag magic container snippet or make sure that it is fired before the main google tag manager container snippet is loaded and what i mean here is this if you want to use things like user id on the container loaded event in the preview and debug mode you must ask a developer to place this code above the google tag magic container snippet what will happen is that data layer will be created this data will be pushed to the data layer and then when google tag manager loads the container loaded event will happen after this data layer push which is right here and then you will be able to fire your tags on container loaded with this custom data so for example if you want to send page views but you also want to send user id with that page view this is the way that you should take your developer should push this information first and then activate google tag manager on a page but if you don't care whether the data layer push occurs before or after the container loaded event in the preview mode then your developer can place that code anywhere it can be above it can be below what is important is the moment when that information is pushed for example if you need some information about the login of the user then well your developer should activate this data layer push code or let's say some other push where the event name is login exactly when the user logs in so when that interaction occurs you ask a developer to push that information to the data layer about that particular interaction so once you have the data that you need in the data layer maybe you asked a developer to do that maybe you installed some plugin that does the job then the next step is to use that data in google tag manager so let's take a look at this in action here i have enabled a preview in debug mode and everything that is happening on the left side is data layer pushes so every message right here is a data layer push if i click on container loaded you will see that data layer push contained this kind of information then you have let's say link click you will click on it and then you will notice more information right here and every time something is pushed to the data layer you can also see that information in the data layer tab right here when multiple data layer pushes occur on the same page so when i'm talking about the page i mean that this section right here that can be collapsed so this is one page and on that page if you click on one event you will see the information that is then stored in the data layer but everything is happening only within the boundaries of the same page so if i click right here you will see what kind of information is now temporarily stored in the data layer and every subsequent data layer push is then merged with what is already in the data layer so for example here we have window loaded event so this is the information that is currently in the data layer now if i click on the link click you will see the information that is related to link click but the start value is present here from the very first data layer push because this is the moment when google tag magic container snippet was loaded so if i click on container load that you will see that this is the value that was pushed to the data layer at the very beginning of the page and now if i click right here you will see that the new information and the older information was merged into a single object right here but when the page reloads the data layer also resets and all the information that was stored in it resets as well and you can see that right here so we have one page load right here and then we have another page load right here so if i expand them both and take a look what happens at the end of this page which was this kind of information about the click and then if i click on the container loaded of the next page load you will see that all that information is now gone and everything starts from the beginning so every time the page reloads data that was put into the data layer also resets and then if you need some data about the user you need to ask a developer to push that data to the data layer once again or in other words let's say that you want to track id of the user in that case you should instruct your developer to push the user id on every page load and now let's go to a demo website where i have some custom data in the data layer so let's pretend that this page is real and i as a user see it after i have logged in to my account and this is the message which says you have successfully logged in obviously this is a fake page there is not much that i can do here but nevertheless i asked a developer to push some data about the login and about the user into the data layer so let's take a look what kind of information can we see first of all i will clear the preview and debug mode and now i will refresh the page once again let's say that i have already instructed a developer to push very specific data to the data layer and once your developer does that the information will be visible in the preview mode as well so click on the preview mode tab and then i will see the login event this is the event that i asked a developer to push so i will click it then i go to the data layer tab where i can expand what was pushed with that particular event and here i can see information like event name user id client type then registration country country code login method and this is an automatic parameter that was generated by the google tag manager itself so now let's say that my task is to send the login event to google analytics for every time the user logs in i want to send that to ga4 obviously i could send all of this information to ga4 but just for sake of demonstration i will choose to send one parameter because you know i don't want to make this video too long so if i want to send the event to ge4 one of the things that i need to create is the gu4 event tag so i will go to google tech manager tags and if you watch this video i presume that you already have some basic knowledge about google analytics 4 and that you have created at least one ga4 configuration tag in your container so i will not be teaching you how to do that but if you want to learn more i can post a link below the video where you can learn how to install ge4 so let's create an event tag in tags section click new then click tag configuration and then select ga4 event here you should select your existing g4 configuration tag and the in the event name field we can enter login because we are tracking login events and then in the event parameters we have to add some additional parameters of course if we want to track them and see their data in ga4 now let's go to the preview mode of google tech manager and see what we have we have things like user id client type login method obviously i could send all of them to google analytics for but just for demonstration purposes let's say that i want to send the login method now if i want to use some piece of data in google tag manager i must have a variable for that now if i go to variables while i have selected the login event right here you will see that there is no variable related to login this is because even though the data is in the data layer and i mean some custom data google tag manager does not care about that until you create a variable for that particular information so for example if you want to use and if you want to access this information which is login method you have to create a variable for that so in google tag manager in the value section right here we are planning to use the variable but first we need to create it and you can create it by clicking this button right here and then clicking plus icon right here and then in the variable configuration click anywhere and select data layer variable if you want to access some custom data in the data layer then you need to create a data layer variable for it since we are interested in login method you can double click its name copy and paste it right here now let's name this variable i usually name them dlv which is data layer variable and then paste it like that and hit save this variable will be automatically inserted in this field and you know that this is variable because it is surrounded by double curly braces so this is the value that will be taken from the date layer at this particular moment so if its value is email then that value email will be inserted right here if its value is let's say facebook login then that value will be inserted right here now we need to enter the name of the parameter that will be sent to google analytics four so since we're working with login method we can call it login method like this and it looks like i'm now done with this basic setup the next step is to configure the moment when the stack should exactly fire if we talk in plain english we would like to fire a tag when this login event occurs in the data layer or in other words when it is visible right here in the preview mode so if we go to google tag manager and then in the triggering section click anywhere so we will need to create a new trigger that is why we should click on this plus icon trigger configuration and then we have to select a certain trigger type now if you take a look right here you will not find anything related to login because login is a custom event that is why we have to use the custom event trigger type right here custom event basically means that you can enter any event name that is displayed right here on the left side but keep in mind that some event names are displayed differently compared to what they really are for example login event right here is displayed like this because its event value is login right here now if we click on container loaded you will see that the actual value of the event key is gtm.js gtm.js is the technical name of the event but since this is a standard event google tag manager developers decided to rename them and make them a bit more readable right here if i click for example on a link you will see that there is a link like event even though the technical name of the event is gtm.link click but since we are dealing with the custom event which is login then we just have to enter this value so double click on the word login and then paste it right here so what does it mean is that every time a data layer push occurs on a website and the value of the event key is login then this trigger will be activated now let's name the trigger and hit save so it looks like we have done everything we need we have created a tag this tag will send the event name which we just entered as a word login and then we will also send an additional parameter and its value will be taken from the date layer and this tag will be fired every time a data layer push occurs and its event key which is again this one contains the word login or actually not contains but equals to and then let's name this tag i usually name them like that and hit save now let's test everything so i will hit the preview button and then i will go to that page again where i see the successful login message so this means that i have logged in and i would expect to see the login information in the data layer so let's go to the preview mode of google tech manager and here i have the login event if you click it you will see that the tag has fired and if i click it i will see what kind of values were sent if you don't see the values it means that you have selected this kind of option that just shows the variable name but if you want to see what is the value of that variable at that particular moment then you should click on values so far so good it looks like this tag was fired properly and this is the information that was sent but we are not done yet we have to check the debug view of google analytics 4 because maybe something else went wrong and we did not send the data properly so let's go to google analytics then debug view and then you will find your device and this is the event that we tracked we have a bunch of pages user engagement and one of the events is our custom login event you can click it and then you can expand the login method parameter and you will see what was the value that was sent to google analytics for so looks like everything is working properly and now for the end of this video let's take a look at three most common data layer rookie mistakes that i have seen the first one is trying to use the data layer variable when that data is not yet available in the data layer now let me show you what i mean let's say that you have google analytics page view tag that fires on container loaded and with that tag you're also sending user id now the problem here is that user data is pushed with this event and that event always occurs after the container loaded so if you're trying to use the user id with container loaded and you're trying to do that with the data layer variable that variable will always return undefined because at that moment the user id is still not available in the data layer it will be available on the user data event and all the subsequent event on that page load so we should keep that in mind one of the ways how you can mitigate that is to change the trigger of your pageview tag from container loaded to dom ready because dom ready will already have access to that user id that was pushed with this event then the other mistake is related to that not recommended data layer syntax which is data layer equals something so if this code and i'm talking about this code if it is placed below the google doc magic container snippet it will break the data layer and your event tracking will not work so in this case this snippet should be added at least above the google doc magic container snippet or it would be even better to use the data layer push method that i explained earlier in this video and the final mistake is forgetting that almost everything in google tech manager is case sensitive so for example if you have the event that was pushed to the data layer and its name is user data with the upper case d it means that you must also enter the exact same name in the trigger with the upper case d because if you enter user data with all lowercase this trigger will not work the same applies to data layer variables and these were the fundamentals of the data layer in google tag manager you learn the basic principles here like how to get data into the data layer how to get data from it but remember this is just a starting point when it comes to really mastering data layer in my google tag manager course for beginners you would get access to a bunch of practical data layer tasks and they will help you a lot to better understand this topic and if you want to go to the next level my intermediate advanced google tech magic course contains a module dedicated to the data layer where you will learn how it works actually under the hood you will find the link to my courses below the video 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 or google analytics 4 consider subscribing to this channel my name is julius this is analytics mania and i'll see you in the next [Music] [Applause] video you

Channel: Analytics Mania - Google Tag Manager & Analytics

Views: 11,450

Rating: 4.9580054 out of 5

Keywords:

Id: hyZQLQITeV4

Length: 22min 33sec (1353 seconds)

Published: Tue Jun 08 2021