Custom Event Trigger in Google Tag Manager | Google Tag Manager Tutorial

this video has been brought to you by data vinci analytics agency in this video we are going to cover what is custom even tracking in google tag manager again this is a very very simple concept but but but this is a simple concept if you understand the fundamentals but it is also a very important function in google tag manager custom event is very powerful and if you want to master the martech stack analytics implementation or in general how google tag manager works you need to be aware of custom even tracking and if you can work properly with custom even tracking you would be almost able to track uh everything in google tag manager all right so let's get cracking what are we going to cover we are going to cover what are custom events how to set up custom events how to create triggers based on custom events and we are going to cover how to pass values to marketing and analytics based on custom events all right before moving further i would like to inform you about our group on facebook the digital optimization leak it's a free group that is dedicated to digital analytics we cover various topics on digital analytics tag management conversion rate optimization data visualization and other stuffs so just uh come to this url groups data vinci doa click on join group and i will approve your request all right so let's start the discussion with what are custom events all right so custom what does that mean custom basically means something that is not general or generic or that is customized for you all right so google tag manager has a huge variety of triggers that are general and can be used in quite a lot of scenarios the uh amount of uh triggers and the variety of triggers that are there in google drive manager are pretty commendable okay but there would always be certain situations where the regular trigger that are coming as out of box for you might not be capable of handling the tracking that you want to do all right some cases some simple cases that i can uh present to you which are like common cases where custom events are used are let's say a form submission that cannot be detected by google tag manager and you want to track the submission of that form or a video interaction that cannot be detected by google tag manager because by default google tag manager provides you the tracking of youtube videos but let's say that you are using some kind of video player which is not by by default uh capable of getting detected in google tag manager all right or there is a login or signup instance that cannot be detected by google tag manager because as such there is nothing on the page that is changing that you can pick with javascript or css or in general it's going to be complicated for you to pick or find out how it's going to be all right other than that custom event is a good way to standardize implementation it reduces the need for you to have serious expertise in javascript or other coding languages moreover in cases like tracking for single page applications ajax pages or other applications where the page does not refresh but the content of the page changes custom events are your savior this is your not use sorry so are your savior okay we'll cover all these things in more detail so now we are in google tag manager and i want to show you how we can set the custom events okay so we'll go to the preview mode and go to our site where we have implemented this google tag manager so we are now in the debug mode and uh whatever i will do on this page so let me click right those things will get recorded over here so i click three four times and that that gets recorded over here okay so how to pass custom events so for that first of all you need to be aware of what is the name of your data layer object in general that is going to be data layer only but it's a good practice to validate that first so how you can validate it just to go to the page source okay so and here we can search for gtm right and look for the code of gtm that is setting the uh data layer object so here is that code here is that code right and this is the function that is setting the name of google tag manager is data layer so here as you can see the name is data layer only so you need to validate what's the name of your data layer object in most cases 99 percent of the cases it's going to be data there only but it's a good practice to validate it all right so now if i come back and enter the developer to developer tools uh then if i type data layer so it will show me whatever is there in the data layer okay now how to push a value to data layer for that we need to know this function that is data layer dot push okay the syntax is going to be that you create uh you type it like this with the regular braces and then you have to put curly braces okay for event you simply type event then colon and then in court you mention what you what is the even that you want to pass so i'm here going to pass just awesome all right and hit and enter now what you will see that in the tag in the debugger awesome would come all right uh let's let me pass something else data dot push awesome batman and here we have batman so this is how you can push the custom event uh when you have google tag manager on installed on your uh on your page and google tag manager would detect a occurrence of a custom event and now you can associate various things with this custom event so for example i can do custom event as batman and then i can create another variable and i can call it info i can call it anything right now i'm just calling it info and info is hungry okay so let me do that again and if we go to tag manager so batman came again but if you would look at the data layer then you will see info okay and info is hungry so what you can do now you can create a variable which is a data layer variable and the name of the variable is info and capture the value that is getting in info and create your tags around it so just let me briefly explain that so here you can go to variables okay and you can create a new variable and the variable type is going to be data layer variable and the variable is going to be info okay so info test and now you can call this variable in your various tags to put the value that is going to be passed in info okay so how how does it work so in general when you have to create a custom event and in general the custom event is usually passed by the developers on certain events that you are not able to detect through tag manager or in general the javascript coding that you are capable of doing through that you are not able to detect those events then what the developer would do the developer would pass these events as a function for you and you can ask for a request for additional information that needs to be passed along this along with this event and then you will pick this information in your tags so one of the examples as we discussed is form submission right so the developer what the developer can do the developer can create a function right and then the function what the function would do is the function would uh set an event so let's take an example here that the developer here would pass form submitted form underscore submitted right and the developer can pass various other things like uh form name right so it's uh aadhaar i don't know why i'm coming with that but that's the way it is or form type it's identity okay so just an example that the developer can pass plenty of other information along with that event so whenever this event would occur right so whenever this event occurs uh you will see that uh those those in information points or the data points also get available to you and then you can create the variables around these and uh subsequently call the these variables in your tags okay so let's let's do this thing let's assume that we have requested our developer to create a custom event upon form submission and it is having the same uh same specs all right so let's create a tag around uh let's first create a trigger around it so how do we create a trigger with a custom event so we will go to google tag manager we'll go to trigger okay and the trigger type is obviously going to be custom event so we'll click on new and we will say form submitted okay and here then the type is custom event and this one needs to be exactly the way we are going to pass here or the developer is going to pass it here right so just copy this and push it here now further we can create information like all custom events or some custom events so would you want the event to get fired on certain pages or there are certain other variables the value for which you can use for validation and then only fire this event but for now i'm going to keep it generic and uh request google tag manager to fire this event on all all custom event instances where the event name is form submitted all right so our trigger is saved now what we can do we can associate our marketing and analytics tags based on this trigger okay so let's create a analytics tag and a facebook tag for uh example of marketing so i'm going to create a google analytics tag now this one is going to be an event tag right the category just call it form submit test right now in actions i want to uh put the value that the developer is passing in form name right so what i can do i can create a new variable form name okay and the variable is going to be as data layer type right and what am i passing here i'm passing here as form name so let's put form name okay now whenever some value is detected in form name variable google tag manager would pick that and set that value in in my analytics tag so here now form name would get called here i would just keep it as page url [Music] all right is it a non-interaction hit no it is an interaction hit let's set the google analytics variable and triggering the triggering would be the one that we created all right so that was form submitted custom event type so form submission analytics tag okay let's create a facebook tag as well parallely so new and facebook form submission and here we are going to choose custom html and this is going to be a script right and the function for facebook is fbq and we need to put a track and then we need to tell what we want to track so i'll just put it form submitted by batman so i'm putting this crazy example to tell you that whatever value you put over here is the same value that you will be passing to facebook and here again the trigger is going to be the one that we created that is form submitted right so let's save this and uh refresh uh the the google analytics the google tag manager configuration and refresh the page as well [Music] okay now here i will not go back to tag assistant i will just show you what is getting passed in omnibug which is a good tool to track various marketing and analytics calls and i will also show you in google analytics real-time report what is getting passed so how to trigger this event let's assume that we have submitted a form okay and when that form has been submitted our developer is pushing this into the data layer so this is done and now when we go to google omnibug so see this event fired and what is it form submit test and event label is uh the url so as you can see that here we had submitted form name as adar and the same value as you just saw be called in action and that is coming similarly form submitted by batman right so in general you can see how how we can pass the information using events uh to analytics or marketing pixel so this can be a very elaborate and exhaustive list of items that we want to pass to analytics or marketing but uh the process is going to be like this only that your developer needs to call this function which needs to have event right and whatever event you pass over here is the one with which you will use to create your trigger and then using that trigger and the variables uh which contain the other information that the dev is passing you can create your analytics and marketing tags okay so let's let's uh see in google analytics of how the data is coming in real-time reports so i'm going to the real-time report and we need to look at events and as you can see the form submitted form submit test is the name of the event category that we passed and event action also came and if we click further on it then the label would also come so we can validate that whatever we did is right and the data is getting passed into analytics and i'm pretty confident that the same way the data would have been passed to facebook as well okay so this is how you're going to use your custom even triggers to pass data to analytics and marketing in special custom conditions that are specific only for yours your use case so boys and girls i hope this video was helpful for you in case you still have any concerns queries doubts you can put that in the comment section below and i'll try my best to address them alright take care bye

Channel: DataVinci Analytics Agency

Views: 642

Rating: 4.7894735 out of 5

Keywords: google tag manager, google tag manager course, button click tracking, google analytics, digital analytics, google tag manager tutorial, learn google tag manager, google tag manager free tutorial, introduction to google tag manager, google tag manager event tracking, google tag manager triggers, button click tracking google tag manager, button tracking google tag manager, tracking buttons google tag manager, custom events google tag manager, DataVinci, Sanmeet Singh Walia

Id: 5IxE6tpJ3Hk

Length: 15min 23sec (923 seconds)

Published: Wed Jun 23 2021