Introduction
Good afternoon ladies and gentlemen. Welcome to Techgig webinar series our endeavor to empower techies. We believe that selling of knowledge is the key to enhance our skills and grow us as professionals. With this principle in mind we have initiated a series of webinars conducted by industry experts, to give you a crisp in sight of various domains. And the topic of today’s session is ‘Google Tag Manager for Beginners.’ And our guest speaker today is Bhumika Joshi she is implementation specialist at Tatvic. Bhumika is an implementation specialist at Tatvic and has more than three years of experience in Google analytics GTM and organization implementation. She is an active blogger and often writes about Google analytics on Tatvic blog. So, without further I introduce you to our guest speaker over to you Bhumika.Hello everyone thank you for being present today for this webinar. Today we are going to talk about ‘Google Tag Manager’. Let me first start with the outline of this webinar what we going to discuss in this webinar. We will first start with what is Google Manager? I will give you a brief overview about what Google Tag Manager actually is. Then we will checkout some basic elements of Google Tag Manager which we should, must know before using Google Tag Manager. I will then walk you through a demo implementation using the Google Tag Manager interface. My idea is to help you guys implement your tags using Google Tag manager on your own after this webinar.
Overview of Google Tag Manager
So, I will also share some of the best practices for using Google Tag Manager. Initially if you want to receive our resources on Google Tag Manager including white papers, webinars and blogs you can sign up using this URL which you can see in the footer of the presentation. So, let’s get started firstly I will start with the overview of Google Tag Manager. But, before moving specifically to what is Google Tag Manager? Let me give you a quick overview about what is a Tag Management? Tag Management the word itself defines the meaning is Management of Tags. But then we should first know what is a Tag? So Tags has snippet of codes that are usually placed in the web page and which is used for different purposes. For example, there are third party tracking Tags which is used for analysis and reporting there are multiple platforms Google analytics and others which uses tags to collect data. Not only analytics but remarketing, conversion tracking, affiliates and advance customer inside services also utilizes tags. So if I sum up tag is a kind of Java script which is placed in the web page source code to collect the data.So, tag management is a concept that came out because of the increasing needs for more agile marketing management and tracking abilities. It is really difficult to manage and make changes to the tags by going to the website source code. But if you have a tag management, tag management has the ability to manage the tags a single interface. So this was an overview about what actually tag management is, let’s move on to specifically to what is Google Tag Manager. So, Google Tag Manager is a key tag management tool which is provided by Google and which helps you to implement different Java Scripts on your website. This helps you to have your tags at one place which makes the management easier. So if I sum up the scripts at one place in one interface and with an easy to use interface you can manage and modify your tags at one place. It also does not require any involvement of your IT team so any marketing person or any business guy can use tag manager for implementing tags on their website.So, now as we know that what Tag Management is, we also know what is Google Tag Manager but we must know what the need of such Tag Management solutions was? So initially we use to collect data, we used to place the JavaScripts on our pages. As you can see on our screen we have small snippets of JavaScripts which is placed on our webpage.For example, we have a requirement of implementing a web analytics stag we would tell that IT team that this is the JavaScript code please go and implement it in the source code. So the IT per son will go and implement in the source code of the webpage. Then after few days have the requirement for other tags add networks then we have some other requirement retargeting or audience research and many more scripts which are use in use of getting better performance reports of our website in marketing. So every time we have a requirement to place a JavaScripts, we provide the JavaScript we give the JavaScript to the IT person and they go to the Web Pages and implement that JavaScript. So this is kind of a huge time consuming process which is required for implementing the codes to the Web Pages and this is really a pain.So I have listed down some such problems and pain which we face if we don’t have a Google Tag Manager. So let’s go through of these problems which we face when we do not have a Google Tag Manager. So firstly, I would say that scripts and tags which are implemented in the website they never die. So once the script in your webpage it will be there on the website for years and years and nobody is going to remove it even if you are not using it so they are taxes which are there with us for lifelong. So this problem can easily solve using Google Tag Manager. Google Tag Manager has an in built functionality which will help you to enable and disable your JavaScripts list at single click. You just go and remove the condition stags and the script would stop firing on the webpage. So this is a kind of seconds of work which would very easier to do and which would not require any IT involvement you can just go and do it for yourself. So it will be easier to do it using Google Tag Manager.The next problem we face while tagging is for example we have a business requirement to track a new campaign running on our website but we have to wait for a next release for our website which may be after a month. But if we have a Google Tag Manager implemented on out website we can just go and implement that new tag Google Tag Manager in just few seconds and we also can easily create and manage these tags Google Tag Manager. So you do not have to wait for your next website release to implement a new campaign code or a new tag to your website.The next major problem which we face while we implement scripts on the website is the page load time. So if we add more and more scripts in the web pages it will slow down your website so this may affect the page load time. As you know that page load time is an important factor for SEO so implementing GTM will solve this problem as tags fires asynchronously. So this will not affect the page load time and will help you booster SEO strategies. So this major problem which we face generally while we implementing the scripts on the webpage can be easily solved using a Google Tag Manager.One another major problem is passing the requirements through IT team. So when we have business requirement for tracking any sort of data we need to pass the requirements to the IT teams.The business person has a requirement to track some details the website so he passes the requirement to the IT team. But there are many backend forth of emails and communications which is again a huge problem. So it is also a quite time consuming process so if we have a Google Tag Manager implemented the involvement of IT teams may not required at all. You can just go and implement your tags on your own and manage it via Google Tag Manager. So these were some of the problems which we face while tagging, before Google Tag Manager came into picture but the Google Tag Manager these problems have been sorted out and it is much more easier to tag your website or to implement such sort of tags or scripts on your website. So this is about what is Google Tag Manager, to summarize these points I would to show the difference between the normal implementation and the implementation done using Google Tag Manager. So as you can see in the image this is the normal implementation which we used to do when we do not have a Google Tag Manager. So what we do is we place the scripts in the web pages, there are 3 different pages there is JavaScript1, JavaScript2, JavaScript3 and of these has to be implemented inside the web page. This is really good method and this may also lead to some kind of errors. The one major problem that we can also face is that it slow downs your website.But with the implementation with Google Tag Manager, we have single interface that is called Container you can see it in the image. The center point is the Container which is the Google Tag Manager interface you can have the scripts implemented and managed. You only have to place one single code which is a Google Tag Manager Container code in the pages of your website and once you do that you can mange your tags and deploy your tags the single interface that is the Container. So it has become more easier after having the Tag Manager implemented on the website. So this is the major difference we have in the normal implementation and the Tag Manager implementation. So this would before Google Tag Manager.
GTM Elements
Next I will move on to the basic elements of Google Tag Manager. So to know how we implement Google tag, how we can have tags and scripts implemented via Google Tag Manager it is very important to know the basic elements of Google Tag Manager. So we will use an interesting analogy to explain this, the basic elements of Google Tag Manager so this will help you understand the elements in a better way.So let’s imagine a car which we can say is a GTM Containera Google Tag Manager container. So a Google Tag Manager is a container which concentrates your tags in one place we have a Car which concentrates different people at one place. So we are comparing a car with the container. Then we have seats in the car which will resemble the tags in the GTM container. So we have one container which contains different tags which can be snippets of codes which needs to be fired on your websites. So tags means the scripts which you want to fire on the website. So people who will occupy those seats in the car are the JavaScripts which are inserted in the tag which will fire on your website. So we are comparing people with JavaScripts. So you can just imagine that there is a car which is a container, there are seats which are tags in the container and the people who are occupying those seats are the JavaScripts which needs to be inserted on your website. The next important element is a Rule. A tag is a HTML executes on a page so the tags can serve variety of users but most of the tags in Google Tag Manager Sends an information your site to a third party such as Google.There are different types of tags Google analytics tags, there are adverse conversion tags etc. now you have car people with you but you have to reach to a specific location so you need the steering to take you to the specific location. So in the same way you have a rule which will help you to identify this tag should fire so it is a kind of condition which will be used to identify if this tag should fire on which page or on which event so this kind of rules are required in Google Tag Manager to make a script fire on a specific page or a specific location.Then we have an element called Macro. So Macro is a kind of variable which stores information. A Rule is built up of Macros so if you have a URL in which you can put information. So URL contains homepage so this is a kind of condition that this script should fire only on the homepage. So in that case your URL is the Macro and the value you are assigning to the Macro is the homepage.So the value and the variable make a rule which will help you to identify the tag should actually fire. So the combination of a Macro and the value create a rule which will be a condition. So these are some basic elements which are very important to be known before using Google Tag Manager. I would just summarize there is a container, which I would say there is a big container you have, you have different scripts inside the container that are called tags and those tags would be the JavaScripts will be firing on the website you can specify certain conditions that are called rules which will help you identify the scripts should fire and those rules created using a Macro. Macro is a kind of variable which will help you to assign values to the Macros and create a rule. So these were some of the basic elements of Google Tag Manager.After these points we now have enough information about Google Tag Manager so let’s have something practical. I will now walk you through a Demo implementation of event tracking using Google Tag Manager. So I will show you how you can implement or how you can track if a person is clicking on a button on your website, so you can fire Google analytics event or any other event or a third party tag which you want to fire on the website, you can do it using Google Tag Manager.
Demo – GTM Implementation
So I will quickly walk you through Google analytics implementation. I am moving to the Google Tag Manager interface to show you a live Demo of live demonstration of the event tracking. So you can see this is a Google Tag Manager interface, you can see I have an account already made with a name called Tatvic Demo.Inside an account there are different Containers, I would to specify if you have your Google Tag Manager account or you want to create a Google Tag Manager account you can very easily do that. Just signing up your Gmail ID, if you want to follow my instructions and implement this event tracking your end you can do it. I will walk you through how you have to do it. You can just go to Google Tag Manager and create a Container if you don’t have one; I already have a Container that is estorereplica.tatvic.com So this is the name of my store, your Container name will always be the name of the website for which you are implementing the Google Tag Manager. So my sample store is estorereplica.tatvic.com, so I have given the Container name as estorereplica.tatvic.com this is my store which is Ecommerce normal dummy store. So there are so many things to be tracked on websites. For example, I want to know how many people clicks on Read More, I want to know people to clocks on Add to Cart Button, I want to know how many people are clicking on different other links which are there on the right side the posts or the comments something that. I would to show you a very important basic button which is available on the entire Ecommerce store and that is Add to Cart Button.I have this button Add to Cart and I will check the last class for this button. So the class for this button includes or contains button I am checking this button because I have to use this class in the Google Tag Manager Macro so that the Google Tag Manager is able to identify which element he has to try. So right now what we have to do is we have to provide the information to the Google Tag Manager that what value should he track on this page.Let’s move back to Google Tag Manager. To implement event tracking or Google Tag Manager there are 3 important tags which should we created. The first one is the basic Google Analytics Tag. I have already created a basic Google Analytics tag which I have named as Google Analytics my Tag Type is Universal Analytics.You can see here that we have a list of different tags which is available in Google Tag Manager. So you have Adwords Conversion Tracking, you have Adwords remarketing, you have DoubleClick, you have Display Ad, you have Analytics. So Google Tag Manager actually provides you many in built features or in built tags which you can create without any hesitations. And if you have any third party tags for example our JavaScript which want to implement you can use a Custom HTML Tag and implement that JavaScript. As we do not have so much time to go through of them I am showing you the event tracking or the auto event tracking which can be done using Google Tag Manager. For that the first tag has to be the basic universal analytics which I have already created.In tracking ID you have to place the Google Analytics property ID which should be available in your Google Analytics account, the track type should be Page View because this is the basic code which should fire on the pages. Here, you can see there are two things that are Firing Rules and Blocking Rules. Firing Rules is a must thing to fire any tag on your website it is important to have a Firing Rule, do not have any rules mention in the tag then this tag would not fire on any page or it should not fire anywhere on the website. So to mention or to fire these tags on any of the pages or website you have to mention the firing rule always. So I want to fire this Google Analytics tag on the pages so I have added page rule. All page rule means it would fire on the pages you can see that as a condition which says that URL matches. so that means it will be firing on the pages of your website wherever the Google Tag Manager code is implemented. The Google Tag Manager Code should be implemented on the pages of website it is a small Container code which should be placed on the website. I will show you the GTM code which is implemented on my E-store.So you can see the source code of my estorereplica store and you can see that we have a Google Tag manager code already implemented. So whatever Container you create you always have a Google Tag Manager Container code so this Google Tag Container code we posted in the pages of your website wherever you want to fire your scripts.So let’s move back to the tag which we have to create, so we have completed the Google Analytics Tag creation once I have do this I have to save the tag. So this is the first tag which we have to create to implement a auto event tracking on the website. The next tag I have to create is a click listener, my Add to Cart button is a link that is an anchor tag so to track an anchor tag I have to use the link click listener of Google Tag Manager. If you go to tag types and you go to Event Listener you can see the Link Click listener option or the in built which is available in Google Tag Manager. So you can click on Link click Listener and the tag type as Link Click Listener you just remove the validations as of now. Now I want to fire this on the pages but if you want to fire it on any specific page you can create a new rule and specify the URL on which you want to fire this tag. But as of now I am firing it on the pages so I am selecting the pages rule here. Once I have created this tag I’ll save it.So we are ready with the two tags, one is Google Analytics and second is the Link Click Listener. So Google Analytics would be used for firing the basic call and the Link Click Listener will help you to track click on the link the Add to Cart link but there should be one more call that is the event tracking call that will specify what event or what event call you want to fire on the click of the Add to Cart button.So I’ll be creating a new tag and I’ll be naming it as Event on Add to Cart button, you have to again a universal analytics tag and you have to specify UA ID of your web property. Now as you want fire on Event on the click of the element you have to choose the track type as Event instead of page view. You can see there are different track types Page View, Event, Transaction, Social, Timing so of these are used for different purposes Page View is used for Basics, GA call Event is used for Event Tracking, Transaction is used for Ecommerce transaction calls which happens only after the user does a transaction on their website. So we will choose event because we want to fire in Event on the click of the Add to cart button. I am giving the category name as Button because I want to choose I want to have a category as Button. I am using the action as click and am using the Label as Add to cart. I always choose the non interaction hit value as True because otherwise it will affect the bound straight of your pages so whenever you do a Event tracking, a Google Analytics Event Tracking don’t forget to choose the True option for the non interaction hit otherwise it would be affecting the bound straight of the pages on which you are firing the events.So we are done with the Event Tracking parameters, we will now specify a rule on which this event should get fired. So I’ll go to the firing rule section and I add a rule. Now I have to create a new rule because I don’t want to fire this on the pages I want to fire it only when the Add to Cart button is clicked. So I’ll name this rule as Add to cart click, there are GTM events which are in-built provided by GTM which helps GTM to identify the Google Tag Manager to identify about what kind of events have happen on your website. So if you want to identify about the Link Click so you have to give a rule saying event=gtm.linkclick. So these kinds of events are already provided by Google Tag Manager so you just have to mention it here. I have to provide one more condition that is it should fire only when Add to Cart button is click. And Add to Cart button having a class called Button which we have checked before starting the implementation. So I have to do is I have to create a new Macro so this Macro is a kind of variable which I am assigning to the Add to Cart class so it should element classes. So there are different options which you can a Macro value. You can have a 1st Party Cookie as a Macro, you can have a Constant String, you can have Auto Event variable, you can have a Custom JavaScript, you can have a Data Layer Variables, and you can have a DOM Element etc. So we will be selecting an Auto Event Variable because we are using default Auto Event Tracking of Google Tag Manager. Then you have a different variable types you can choose Element ID element classes, you can have Element Target, Element Text, Element URL and we have already checked that it is having a class called button, we will be using the element classes. So you can see here it’s written that the value is defined by reading the ‘gtm.elementclasses’ key the data layer. But we do not have implemented any kind of data layer so if it is not populated using the data layer it will take the class of the attribute of the DOM element that you want to trigger the event. So we are firing the event on the Add to Cart so we are using the element class of the Add to Cart button. Once I save this I can see the Macro name appears here that is element classes and now I can put the value or I can find the value here that is button. So now I have my rule ready which says that this event should fire only when the event name gtm.linkclick appears and also it should fire only when the button has a class name called ‘Button’. So this is a kind of ‘and’ condition so it will fire only when it satisfies both of the conditions. I have this rule name for the third time I am saving it now. So we are ready with the third tag that is event on Add to Cart button we have given the tag name, we have applied the tracking ID, we have given the event tagging parameters and we have also specified the rule on which it should so now I am saving it.So to have the Auto Event Tracking we almost have the 3 tags that is Google Analytics, Link Click Listener and Event on add to Cart button. So when we are ready with the tags we should check if these tags are set properly or not so to check that we have few options in Google Tag Manager. So preview option will allow you to check the implementation only in your browser so it will not go live on the websites until you do a publish on the Google Tag Manager so it will appear only on your own browser so you can check it before publishing it you can use the preview option. So I am debugging it Quick Preview option I use the debug. To check this implementation we have to move back to the Sample Store, when we move to the Sample Store and we reload it we will be able to see the Google Tag Manager debugger will appear in your browser. So that debugger will helps you to identify which tags are firing on your website. So you can see on this screen we have a Google Tag Manager debugger this will show you the tags which are firing on the website. So right now we can see in the summary section that we have 2 tags firing that is Google Analytics basic tag and Link Click Listener, these two tags are firing on this because we have give the rule as Page so both the tags are firing on estorereplica. And it will be firing on the pages because we have provided the rule as Page. If I click on the Add to Cart button I can see the third tag firing and I also see the Event Tagging Parameters which I have implemented. So I am clicking on the Add to Cart button you can see the third tag which we have created that is Event on Add to Cart Button is firing here. So you can see that once we have click on the Add to Cart Button we are able to seethe 3 tags firing so previously we were having only 2 tags that are Google Analytics and Link Click Listener and now we have the 3rd tag that is Event on Add to Cart Button. So when we clicked on Add to Cart Button the Click Listener is able to listen to the event which is getting fired on your website and then it fires the tag which we are implemented or which we are created using that rule. So this was a kind of basic presentation of having Auto Event Tracking on your website. You can track different other parameters Add to Cart Button or you can have remove Cart or how many people are checking your products by clicking on products link. So there are too many things to track on website which can be easily done using Google Tag Manager’s different features. So this event Click Listener was one of the features which are available in Google Tag Manager. So, this was OK with the demonstration, the Demo implementation which we have prepared through which we can learn that how we can implement Google Tag Manager very easily.Now we have seen the overview of Google Tag Manager, we have seen practical example of how to implement Google Tag Manager how to implement Event Tracking using Google Tag Manager but there are some very important things best practices which we should always follow by using Google Tag Manager.
Best Practices
So I have some of them listed, I’ll go through it one by one.So the first best practice I would say is you should structure your GTM account very correctly and properly. So Google Tag Manager is made up of different accounts, containers and different tags. As you already seen in the interface that they allows you to create different accounts, different containers and different tags but Google always recommend to use only one account per company and one container tag per website. So you should have only one account for your company and inside one account you can have different containers for different website of your companies. So if there are several GTM accounts for different clients you can do that as well. Multiple GTM accounts can cause tracking and diagnosing errors or issues sooner or later. So managing tags and Macros with different accounts and different containers could turn out to be a nightmare so it’s better to have only one account for company and if you have different number of websites you can have a single container for a single website. Inside that one container you can have different scripts or I would say different tags which can fire on your website. The next important best practice which I would say should be followed is using Good naming Conventions for your GTM configuration. If you are creating a tag which is a Google Analytics tag so you name it as Google Analytics and also you can name your Rules properly. For example, if you are creating a Rule using an event called ‘gtm.DOM’ so you can name it as event-gtm.DOM; if you are using a Adwords remarketing tag and you are firing it on some of the pages you can name it as Adwords remarketing tag for Google Analytics.So on this way you can have such kind of good naming conventions which will help you to have your listing properly for Google Tag Manager otherwise it will be too much messy if you don’t use good naming convention the very start because as you add more and more tags and rules to your Google Tag Manager it would become more and more messy so you should have a listed naming convention which will help you to list out the tags and rules properly. So this will be one of the most important I would say the practice which should be followed while using Google Tag Manager.The third and a very important one again I would say is the User Management. So Google Tag Manager is a very powerful tool and it also comes up with a strong responsibility so if it is used by different users it should be given proper user level access to the users which are using it. For example, there are different level of accesses for example there are view Level access so if the user have to just check out the tags and do not have to manage the tags or deploy any tags he should be only given a view Level access or view Level permission who see the tags. If the person is allowed only to create tags and not publish it to the website he should be given a view and manage level tags and if a person is allowed to publish the tag he should have his pro level access that is view, manage and publish level tags. So there are different levels of user management or I would say the user management permissions which can be given to a person who are actually involved in this tag management deployment on your website.The other thing is you should always deploy your tags or you should always make the tags live proper planning, you should always follow procedure and processes for tag deployment. So you should always carry out proper thoughts and planning to minimize the risk and IT resources. For example, you need to determine your tracking performance in advance before you even start creating tags. So you need to decide initially whether you will go for partial tag deployment or complete tag deployment, you should also decide that you want to use a data layer or not. You should also have levels of tag deployment you should always first implement it on the development server and then move it to the staging server and once everything works fine you can make it publish to the live. So such kind of proper planning should happen before moving on to Google Tag Manager Deployment.The next important thing is you should always do proper testing of your tags, always test your tags before you deploy them make sure its use and behaves the way it should. So be very off custom HTML tags they are more likely to look your website functionalities as they are custom tags and not a predefined tags. So it is wise to involve IT department if you are using a custom HTML tag because you don’t understand how actually it works. But before deploying any tags it is very important to check it in preview and debug option which we did while having the live demonstration. So before going live we should always have a testing mode we can test the tags and once we have the things working properly we can just publish it using the publish option in Google Tag Manager.The last one is to maintain the extensive history notes, so the Google Tag Manager has the in-built feature of having version notes so how you create a new version, so the versions are kind of snapshots I would say that whenever a new thing is implemented in the container or the new change has been done in your container there is always a new version which is created when you publish the container. So there is always an option of having the version nodes in your container you can write down the changes or implementation you have done in Google Tag Manager in the version name so that whenever you refer to the version changes you will be able to identify what changes you have done in the version and also you can take the advantage of revoking back to the older version if you want because Google Tag Managers allow you to move back to the privilege versions if you have some issues with the current versions you can move back to the or restore the previous versions. But if you have version notes available on each and every version it would be easier for you which to check if which version you want to use for Google Tag Manager Container. So this was the one of the very important practices which I think we should follow while using Google Tag Manager.So this is from my side for Google Tag Manager we would quickly move to the question and answer sessions. Before moving on to the question and answer sessions I would to take few seconds to tell something about our company Tatvic. So we are leading analytics consulting company, we are also Google Analytics, Google Data manager and Google Adsense certified partners.Other than our services we have products Tatvic Excel Plugin, Price Discovery and Anomaly Detections and we have over 3000 plus happy customers which are working with us right now. So let’s move on to the Q & A session.