I’m creating this post due to some questions in the thread What adding value actually looks like (real stats)... related to Google Tag Manager (GTM).
This is not going to be a comprehensive guide. There is a lot of good tutorials in internet about GTM (see some of them at the end of the post). Instead, I want to introduce you in this fantastic tool for marketers and developers.
This guide will guide you in all the important and tricky things, not in the very basics of internet navigation. I mean: I’m not going to guide you like to a grandpa doing an internet course, telling you everything about each form field and which button you have to click. If I say “Create a new account” it means “look for the button that says 'Create account’, click on that, and fill the form with the guidelines the form itself is giving you”.
Also keep in mind that I’m not an expert in the tool, but I’ll try to find a solution or a reference for your questions anyway.
Ok. Let’s get started...
What the hell is GTM?
Putting it simple, is a tool that you install in your site copying and pasting its code (like you do with Analytics) and gives you the ability to manage all kind of tags (tracking codes) from Google or other third parties. That includes site analytics, remarketing, conversion tracking, user’s live recordings and a lot more of fun. All that without touching any code.
It works like a container. You paste the GTM tracking code in your website and then you can remove every other tracking codes you have (Analytics, for example). All of them will be installed inside GTM. That is, once you have GTM installed, you can extend it with new tools without modifying your site code, just activating it in the GTM admin panel.
*** Disclaimer ***
Most of the events you can track in Analytics or any other tracking tool can be done from GTM. However, some times is necessary some HTML update, or some javascript is required. It’s very basic btw and a lot of times you can paste this code in GTM instead of your site. I will share some useful free recipes ready to go (not coded by me).
***
You can benefit from using GTM if...
… you are a developer with a live site and you want to install and manage several tracking codes without updating your site with each one. Less updates are less time and less problems.
… you are a marketer or business owner who want to use Analytics or other tracking tools for your website and you find it difficult to track some events in your page without bother your developer.
… you have a website, mainly
Less chatting and more doing!
Getting GTM up and running
First of all, go to Sign in - Google Accounts and sing up with the google account you want to use. You can create new users later for the same account.
Once you are logged in, the administration page is showed. Create a new account with the website you want to install. I have created a demo site using this forum as example.
Once you have created your account, clicking in it will load the WORKSPACE in which you will manage your tags. In your first visit a modal will tell you how to install GTM in your site. You need to copy that code and paste in you site, in all pages! Just follow the instructions, or give it to your developer.
*** IMPORTANT: Once you copy the GTM code in your site, you must to remove the Analytics tracking code if you are going to manage it with GTM. Not doing this could cause duplication of data in Analytics. ***
You can create several accounts, each of them for a different site. It is also easy to export the configuration from one account to another. So if you need to manage several websites, avoid creating each container from zero. You can find this options in the ADMIN tab in top of the page.
https://image.ibb.co/g07Zwv/gmt_export.jpg
The WORKSPACE
What is important to know about this section? Let's see…
First of all, a workspace is like a draft of a blog post. Or a development environment. All the changes you made here will not publish in your site until you click that blue SUBMIT button in the top-right of the page. Never forget to publish when you have all your changes in place! But avoid to publish if you are still working in the draft.
If you don’t see the changes in your web, or your new data in Analytics, please check if you have publish your changes.
You can create several workspaces if you need to work in parallel with another person. But be careful if both of you are touching the same parameters.
Come on, give me a TAG!
A tag is a piece of code that sends information to a third party, such as Google Analytics. (from the GTM docs)
So how to install Analytics in your site to see track of page views? It couldn’t be easier, but you need to have an Analytics account first. If not, go and create one, I’ll wait here… Once you come back, get your Analytics Tracking ID at hand (usually something like UA-000000-2).
Click the New Tag button in the workspace…
Name your tag with an appropriate name like “Analytics – Page Views” or “GA – Page Views", choose the tag type “Universal Analytics” and choose the trigger “All pages”. Don’t click Save yet…
I will explain what triggers, variables, etc mean below, but for now, click on Tag Configuration to see what options are available. You will see two dropdowns.
The first one allows you select the kind of tracking you want (Page View, Event…). Keep it in Page View for now.
In the next one you must to enter your Analytics Tracking ID creating a new Variable.
Not rocket science here. But again, name it properly! Follow the steps and click Save (NOTE: the Save button is always in the top-right of the page. Sometimes Material design makes things difficult to see).
Congratulations! Now you will have your page views in Analytics managed from GTM.
Now let’s explain briefly what a trigger or a variable means in the context of GTM. You can create and manage variables and triggers with the options in the left menu.
- Variable: this is a chunck of text or code that you can reuse along your tags. This are some variables I have in my site:
- Trigger: as it names suggest, this will fire the execution of a tag whenever a defined event occur. For example: the Page View trigger you have used when creating your first tag means that each time a page is loaded, the event Page View will occur and all the tags containing that trigger will execute. This are some triggers I have in my site:
And this is how the tags list in my site looks like:
Adding other third party tags
It’s easy to install tags for Google products. You also have a lot of third party integrations ready to go. But, what happens if you need to install a third party tag that is not listed? You can do it with the option New tag -> Choose tag type -> HTML Code. Just copy and paste here the tracking code of your third party tool (like Hotjar, ClickTale, etc).
Tracking of specific events/buttons/forms…
Create a tag for Page Views in Analytics is easy. But what if you want to track the clicks in a specify button, or the submits of a form? That was the question that originates this post. So @amp0193, here is the answer.
If you are tracking an Ajax form or a click that send data via Ajax, it can be a little tricky. But here is where the magic occurs. GTM has a great feature that allows you to import recipes from others, i.e. code and configuration that other advance users have done to solve specific problems like this one. Do you remember the capability to export your configuration to share it between sites that I mention in the beginning? Well, you can share that configuration publicly. This are recipes, and they include tags, variables and triggers… ready to use.
So I recommend you one of the best I have found. The recipes by LunaMetrics: http://www.lunametrics.com/labs/recipes/
You can install the Complete Pack, the one that includes Ajax listeners, or you can go with the jQuery AJAX Listener Recipe alone. Scroll down to see all the recipes available, and mentally send good karma to LunaMetrics people
The instructions are very clear in its website, so follow the steps. Just in case you don’t notice it, there is a link with a tutorial in the page: http://www.lunametrics.com/blog/2015/08/26/import-container-google-tag-manager/
NOTE: you need jQuery installed in your site for this recipe to work. It’s very common to have it, but if you are not sure, check it with your developer. You can install it from GTM also! Place the code from the last version in jQuery CDN in a Custom HTML Tag with an All Pages. It will trigger load jQuery on every page of your site. But be sure first you don’t have it already in your site. Code duplication is not funny when dealing with javascript.
Once imported, a new tag has been added along with new variables and triggers (depending of your recipe of your choice). The Ajax Listener Recipe comes with this tag:
Now let's track that bitchy Ajax form!
Create a new tag. Name it correctly (something like "GA - Landing suscribe form". I can stress enough the important of good naming to keep order in your lists...).
Select Universal Analytics and in Tag Configuration select Event in the first dropdown. You can fill the blanks in the form selecting variables by clicking the lego piece button in the field, or you can fill it manually (for now is enough).
This fields are the data you will find later in Analytics. You can read about what Category, Label, Action and Value means in About Events - Analytics Help
The other two fields are:
- Non-hit interaction: this usually affects to bounce rate. If false, your event will make a “hit” in the page, so the visit will not count to bounce rate. I.e. You may want that a “suscribe" ajax form submission counts as a conversion and not as a bounce if user leaves your site after viewing only this page. If true, an visitor who launch this event (i.e. suscribe, click) still will count as a bounce if leaves in this page.
- Google Analytics settings: select the variable with your GA tracking ID.
Selecting the trigger
Now is when LunaMetrics jQuery Ajax Listener Recipe will do the work for us.
Choose as trigger type Others -> Custom Event.
As Event Name write “ajaxComplete”. This is the name of the event that the LunaMetrics Ajax Recipe will launch, so this name links the trigger with the event.
Check “This trigger fires on Some Custom Events” and select the conditions you need. This conditions are related to the Ajax response (or the HTML element who recibes the click if you are tracking a click in some part of the web).
For this example, select the variable DLV - attributes.url to trigger the event when the url of the form match with the last field. Select the type of condition in the second field (I recommend “contains”) and write in the last field the url of your Ajax form. You can find it looking at the code of the page and looking for the “action” attribute of the <form> element. Or you can ask your developer.
If your url is something like https://yoursite.com/subscribe-form, use only “subscribe-form”. One image is better than a thousand words:
Save the changes in the tag.
That’s all, I think. All you have to do now is to publish the changes in your WORKSPACE clicking in the SUBMIT button on top-right of the page.
You can (and must) enter in PREVIEW mode prior tu submit. That will allows you to enter in your website from the same browser you have activate PREVIEW mode and see the site in test mode. Open your site in another tab and look for the Tags Fired On This Page that you will see in the Summary on the bottom of the screen. It will look like this:
Did you notice that "GA – Form Sub – Share Deal from Detail” Tag that appears as not fired on the site? This is my Ajax event. If I submit my Ajax form, that block will change its place to the Tags Fired On This Page section. If yours behaves the same, it works!
If you want to learn more advanced stuff about GTM, a good resource is GTM tips - Simo Ahava's blog
I remind you that I’m not an expert, so probably this blog will have answers that I don’t have.
Feel free of play with the different tags, triggers… once you understand the basics, everything will be very straightforward. And probably you will need to configure it once and then forget about it. The changes of the workspaces don’t be published until you click the Submit button, so you can test a lot of stuff in the Preview mode.
Good luck!
This is not going to be a comprehensive guide. There is a lot of good tutorials in internet about GTM (see some of them at the end of the post). Instead, I want to introduce you in this fantastic tool for marketers and developers.
This guide will guide you in all the important and tricky things, not in the very basics of internet navigation. I mean: I’m not going to guide you like to a grandpa doing an internet course, telling you everything about each form field and which button you have to click. If I say “Create a new account” it means “look for the button that says 'Create account’, click on that, and fill the form with the guidelines the form itself is giving you”.
Also keep in mind that I’m not an expert in the tool, but I’ll try to find a solution or a reference for your questions anyway.
Ok. Let’s get started...
What the hell is GTM?
Putting it simple, is a tool that you install in your site copying and pasting its code (like you do with Analytics) and gives you the ability to manage all kind of tags (tracking codes) from Google or other third parties. That includes site analytics, remarketing, conversion tracking, user’s live recordings and a lot more of fun. All that without touching any code.
It works like a container. You paste the GTM tracking code in your website and then you can remove every other tracking codes you have (Analytics, for example). All of them will be installed inside GTM. That is, once you have GTM installed, you can extend it with new tools without modifying your site code, just activating it in the GTM admin panel.
*** Disclaimer ***
Most of the events you can track in Analytics or any other tracking tool can be done from GTM. However, some times is necessary some HTML update, or some javascript is required. It’s very basic btw and a lot of times you can paste this code in GTM instead of your site. I will share some useful free recipes ready to go (not coded by me).
***
You can benefit from using GTM if...
… you are a developer with a live site and you want to install and manage several tracking codes without updating your site with each one. Less updates are less time and less problems.
… you are a marketer or business owner who want to use Analytics or other tracking tools for your website and you find it difficult to track some events in your page without bother your developer.
… you have a website, mainly
Less chatting and more doing!
Getting GTM up and running
First of all, go to Sign in - Google Accounts and sing up with the google account you want to use. You can create new users later for the same account.
Once you are logged in, the administration page is showed. Create a new account with the website you want to install. I have created a demo site using this forum as example.
Once you have created your account, clicking in it will load the WORKSPACE in which you will manage your tags. In your first visit a modal will tell you how to install GTM in your site. You need to copy that code and paste in you site, in all pages! Just follow the instructions, or give it to your developer.
*** IMPORTANT: Once you copy the GTM code in your site, you must to remove the Analytics tracking code if you are going to manage it with GTM. Not doing this could cause duplication of data in Analytics. ***
You can create several accounts, each of them for a different site. It is also easy to export the configuration from one account to another. So if you need to manage several websites, avoid creating each container from zero. You can find this options in the ADMIN tab in top of the page.
https://image.ibb.co/g07Zwv/gmt_export.jpg
The WORKSPACE
What is important to know about this section? Let's see…
First of all, a workspace is like a draft of a blog post. Or a development environment. All the changes you made here will not publish in your site until you click that blue SUBMIT button in the top-right of the page. Never forget to publish when you have all your changes in place! But avoid to publish if you are still working in the draft.
If you don’t see the changes in your web, or your new data in Analytics, please check if you have publish your changes.
You can create several workspaces if you need to work in parallel with another person. But be careful if both of you are touching the same parameters.
Come on, give me a TAG!
A tag is a piece of code that sends information to a third party, such as Google Analytics. (from the GTM docs)
So how to install Analytics in your site to see track of page views? It couldn’t be easier, but you need to have an Analytics account first. If not, go and create one, I’ll wait here… Once you come back, get your Analytics Tracking ID at hand (usually something like UA-000000-2).
Click the New Tag button in the workspace…
Name your tag with an appropriate name like “Analytics – Page Views” or “GA – Page Views", choose the tag type “Universal Analytics” and choose the trigger “All pages”. Don’t click Save yet…
I will explain what triggers, variables, etc mean below, but for now, click on Tag Configuration to see what options are available. You will see two dropdowns.
The first one allows you select the kind of tracking you want (Page View, Event…). Keep it in Page View for now.
In the next one you must to enter your Analytics Tracking ID creating a new Variable.
Not rocket science here. But again, name it properly! Follow the steps and click Save (NOTE: the Save button is always in the top-right of the page. Sometimes Material design makes things difficult to see).
Congratulations! Now you will have your page views in Analytics managed from GTM.
Now let’s explain briefly what a trigger or a variable means in the context of GTM. You can create and manage variables and triggers with the options in the left menu.
- Variable: this is a chunck of text or code that you can reuse along your tags. This are some variables I have in my site:
- Trigger: as it names suggest, this will fire the execution of a tag whenever a defined event occur. For example: the Page View trigger you have used when creating your first tag means that each time a page is loaded, the event Page View will occur and all the tags containing that trigger will execute. This are some triggers I have in my site:
And this is how the tags list in my site looks like:
Adding other third party tags
It’s easy to install tags for Google products. You also have a lot of third party integrations ready to go. But, what happens if you need to install a third party tag that is not listed? You can do it with the option New tag -> Choose tag type -> HTML Code. Just copy and paste here the tracking code of your third party tool (like Hotjar, ClickTale, etc).
Tracking of specific events/buttons/forms…
Create a tag for Page Views in Analytics is easy. But what if you want to track the clicks in a specify button, or the submits of a form? That was the question that originates this post. So @amp0193, here is the answer.
If you are tracking an Ajax form or a click that send data via Ajax, it can be a little tricky. But here is where the magic occurs. GTM has a great feature that allows you to import recipes from others, i.e. code and configuration that other advance users have done to solve specific problems like this one. Do you remember the capability to export your configuration to share it between sites that I mention in the beginning? Well, you can share that configuration publicly. This are recipes, and they include tags, variables and triggers… ready to use.
So I recommend you one of the best I have found. The recipes by LunaMetrics: http://www.lunametrics.com/labs/recipes/
You can install the Complete Pack, the one that includes Ajax listeners, or you can go with the jQuery AJAX Listener Recipe alone. Scroll down to see all the recipes available, and mentally send good karma to LunaMetrics people
The instructions are very clear in its website, so follow the steps. Just in case you don’t notice it, there is a link with a tutorial in the page: http://www.lunametrics.com/blog/2015/08/26/import-container-google-tag-manager/
NOTE: you need jQuery installed in your site for this recipe to work. It’s very common to have it, but if you are not sure, check it with your developer. You can install it from GTM also! Place the code from the last version in jQuery CDN in a Custom HTML Tag with an All Pages. It will trigger load jQuery on every page of your site. But be sure first you don’t have it already in your site. Code duplication is not funny when dealing with javascript.
Once imported, a new tag has been added along with new variables and triggers (depending of your recipe of your choice). The Ajax Listener Recipe comes with this tag:
Now let's track that bitchy Ajax form!
Create a new tag. Name it correctly (something like "GA - Landing suscribe form". I can stress enough the important of good naming to keep order in your lists...).
Select Universal Analytics and in Tag Configuration select Event in the first dropdown. You can fill the blanks in the form selecting variables by clicking the lego piece button in the field, or you can fill it manually (for now is enough).
This fields are the data you will find later in Analytics. You can read about what Category, Label, Action and Value means in About Events - Analytics Help
The other two fields are:
- Non-hit interaction: this usually affects to bounce rate. If false, your event will make a “hit” in the page, so the visit will not count to bounce rate. I.e. You may want that a “suscribe" ajax form submission counts as a conversion and not as a bounce if user leaves your site after viewing only this page. If true, an visitor who launch this event (i.e. suscribe, click) still will count as a bounce if leaves in this page.
- Google Analytics settings: select the variable with your GA tracking ID.
Selecting the trigger
Now is when LunaMetrics jQuery Ajax Listener Recipe will do the work for us.
Choose as trigger type Others -> Custom Event.
As Event Name write “ajaxComplete”. This is the name of the event that the LunaMetrics Ajax Recipe will launch, so this name links the trigger with the event.
Check “This trigger fires on Some Custom Events” and select the conditions you need. This conditions are related to the Ajax response (or the HTML element who recibes the click if you are tracking a click in some part of the web).
For this example, select the variable DLV - attributes.url to trigger the event when the url of the form match with the last field. Select the type of condition in the second field (I recommend “contains”) and write in the last field the url of your Ajax form. You can find it looking at the code of the page and looking for the “action” attribute of the <form> element. Or you can ask your developer.
If your url is something like https://yoursite.com/subscribe-form, use only “subscribe-form”. One image is better than a thousand words:
Save the changes in the tag.
That’s all, I think. All you have to do now is to publish the changes in your WORKSPACE clicking in the SUBMIT button on top-right of the page.
You can (and must) enter in PREVIEW mode prior tu submit. That will allows you to enter in your website from the same browser you have activate PREVIEW mode and see the site in test mode. Open your site in another tab and look for the Tags Fired On This Page that you will see in the Summary on the bottom of the screen. It will look like this:
Did you notice that "GA – Form Sub – Share Deal from Detail” Tag that appears as not fired on the site? This is my Ajax event. If I submit my Ajax form, that block will change its place to the Tags Fired On This Page section. If yours behaves the same, it works!
If you want to learn more advanced stuff about GTM, a good resource is GTM tips - Simo Ahava's blog
I remind you that I’m not an expert, so probably this blog will have answers that I don’t have.
Feel free of play with the different tags, triggers… once you understand the basics, everything will be very straightforward. And probably you will need to configure it once and then forget about it. The changes of the workspaces don’t be published until you click the Submit button, so you can test a lot of stuff in the Preview mode.
Good luck!
Dislike ads? Remove them and support the forum:
Subscribe to Fastlane Insiders.
