Index
#1 Tracking clicks on a link via Google Tag Manager
#6 Tracking form fields
#2 Tracking clicks on an image link
#7 Tracking clicks on external links across a website (Exit Tracking)
#3 Tracking clicks on a button
#8 Video tracking via Google Tag Manager
#4 Tracking clicks on the button which is embedded across website
#9 Scroll tracking via Google Tag Manager
#5 Tracking form submissions
Before you Start
Before you implement event tracking via Google Tag Manager (GTM), make sure that you have enabled all the ‘built-in variables’ of type: Pages, Clicks and Forms, so that they are available, to be used, when creating tags and triggers later on.
Navigate to your GTM account, click on the ‘Variables’ link and then enable all the ‘built-in variables’ of type: Pages, Clicks and Forms:
Tracking Clicks on a link via Google Tag Manager (GTM)
Following is the example of a link on a web page:
<a id=”checklist” href=”http://www.weplan.com/Worksheets/worksheets.pdf” >Download Wedding Planning Checklist</a>
Fig. Link
In order to track clicks on a link, follow the steps below:
Step-1:Navigate to the web page (in Google Chrome browser) which contains the link you want to track via GTM
Step-2: Note down the URL of the web page where the link is embedded.
Step-3: Right click on the link and select ‘Inspect‘ from the drop down menu:
You will now see the Google developer console window at the bottom of the page:
Step-4: Note down the value of the ‘id’ attribute of the anchor tag (<a>). In our case, it is ‘checklist’. You will need this ‘id’ later on while setting up triggers in GTM.
In HTML, the ‘id’ attribute is used to uniquely identify an HTML element (like link, button etc). The value of the ‘id’ attribute must be unique and it must not contain any white space. For example,
<a id=”checklist” href=”…
Here <a> is an HTML element
and ‘id’ is the attribute of <a> element which is used to uniquely identify this element in a HTML document.
Note: If you do not find any ‘id’ attribute for the link, you want to track, then you need to ask your developer to add this attribute with a unique value. Without ID attribute, you can’t track clicks on a link via GTM.
Step-5: Navigate to Google Tag Manager and create a new trigger with following similar configurations:
Trigger Name: Check for click on the download link
Choose Event: Click
Configure Trigger:
Targets: Just Links
Wait for Tag: Max. Wait time 2000 milliseconds
Check Validation
Enable when:
Page URL equals <<enter the URL of the page where the link you want to track is embedded>>
Fire ON:
Click ID equals <<enter the ID of your <a> element>>
Note(1): ‘check validation‘ ensure that the trigger fires on successful link click and not just when a user try to click the link.
Note(2): If you are not sure what trigger is and how to create a new trigger in GTM, then read this article: Understanding Triggers and Variables in Google Tag Manager V2
Note(3): Under ‘Fire on‘ section, click on ‘Some Clicks’ button:
Note(4): ‘Page URL’ is a built-in variable of GTM which returns the URL of a web page.
Note(5): ‘Click ID’ is a built-in variable in GTM which returns the ‘id’ attribute of the link clicked.
Step-6: Create a new tag with following similar configuration which can send clicks on the tracked link to Google Analytics as event:
Tag Name: Send click on the download link to GA as event
Choose Product: Google Analytics
Configure Tag:
Tag Type: Universal Analytics
Tracking ID: <<Enter your Tracking ID>>
Track Type: Event
Category: Downloads via link
Action: <<enter the name of event action>>
Label: {{Page Path}}
Non-Interaction Hit: True
Fire On: Check for click on the download link
Here,
{{Page Path}} is the page path variable.
The Page Path variable returns the Request URI of a web page. For example,
For the URL: https://www.optimizesmart.com/contact/
The Request URI is: /contact/
I have used ‘Page Path’ as event label so that in my event tracking reports, I can see the page on,which the link was clicked. This can be useful, if you have embedded same link on multiple pages of your website.
Non-Interaction Hit – Set non-interaction Hit to ‘True’, so that event tracking does not affect the bounce rate of your website.
Note: If you are not sure what a tag is and/or how to create a new tag in GTM, then read this article: Beginners guide to Google Tag Manager
Step-7: Preview your container to make sure that the new tag fires, when you click on the link.
Step-8: If everything is working as intended then publish the new version of your container.
Note: To learn more about previewing a container or publishing a new container, read this article: Beginners guide to Google Tag Manager
Step-9: Click on the link and test whether the event data is being passed to Google Analytics, via real time reports:
Tracking clicks on an image link
Following is the example of an image link (link in the form of an image):
<a id=”checklist2″ href=”http://www.weplan.com/Worksheets/worksheets.pdf” ><img src=”http://www.book2web.com/images/download-button-blue-300×133.png” /></a>
Fig. image link
In order to track clicks on an image link, follow the steps below:
Step-1:Navigate to the web page (in Google Chrome browser) which contains the link you want to track via GTM
Step-2: Note down the URL of the web page where the image link is embedded.
Step-3: Note down the ‘id’ attribute of the image link through Google developer console (as explained before). If the ‘id’ attribute is missing, then ask your developer to add one.
Step-4:Navigate to Google Tag Manager and create a new trigger with following similar configurations:
Trigger Name: Check for click on the image download link
Choose Event: Click
Configure Trigger:
Targets: Just Links
Wait for Tag: Max. Wait time 2000 milliseconds
Check Validation
Enable when:
Page URL equals <<enter the URL of the page where the image link you want to track is embedded>>
Fire ON:
Click ID equals <<enter the ID of your <a> element>>
Note: Under ‘Fire on‘ section, click on ‘Some Clicks’ button:
If you want to use the ‘id’ attribute of the image tag instead of the ‘id’ attribute of the <a> tag in order to identify your image link:
<a id=”checklist2″ href=”http://www.weplan.com/Worksheets/worksheets.pdf” ><img src=”http://www.book2web.com/images/download-button-blue-300×133.png” /></a>
<a href=”http://www.weplan.com/Worksheets/worksheets.pdf” ><img id=”checklist2″ src=”http://www.book2web.com/images/download-button-blue-300×133.png” /></a>
then you need to set the ‘Targets‘ to ‘All Elements‘ instead of ‘Just Links‘:
In GTM, if you want to track any HTML element other than a link, then you set the ‘Targets’ to ‘All Elements’.
Step-5: Create a new tag with following similar configuration which can send clicks on the tracked image link to Google Analytics as event:
Tag Name: Send click on the image download link to GA as event
Choose Product: Google Analytics
Configure Tag:
Tag Type: Universal Analytics
Tracking ID: <<Enter your Tracking ID>>
Track Type: Event
Category: Downloads via Image link
Action: <<enter the name of event action>>
Label: {{Page Path}}
Non-Interaction Hit: True
Fire On: Check for click on the image download link
Step-6: Preview and publish your container.
Step-7: Click on the image link and test whether the event data is being passed to Google Analytics, via real time reports:
Tracking clicks on a button
Following is an example of a button:
<button id=”checklist3″ type=”button” onClick=’location.href=”http://www.weplan.com/Worksheets/worksheets.pdf”‘>Download</button>
In order to track clicks on an button, follow the steps below:
Step-1:Navigate to the web page (in Google Chrome browser) which contains the button you want to track via GTM
Step-2: Note down the URL of the web page where the button is embedded.
Step-3: Note down the ‘id’ attribute of the button through Google developer console (as explained earlier). If the ‘id’ attribute is missing, then ask your developer to add one.
Step-4:Navigate to Google Tag Manager and create a new trigger with following similar configurations:
Trigger Name: Check for click on the download button
Choose Event: Click
Configure Trigger:
Targets: All Elements
Enable when:
Page URL equals <<enter the URL of the page where the button you want to track is embedded>>
Fire ON:
Click ID equals <<enter the ID of your button element>>
Note(1): The striking difference in the configuration of this trigger. Here we have set ‘Targets‘ to ‘All Elements‘ instead of ‘Just Links‘:
In GTM, if you want to track any HTML element other than a link, then you set the ‘Targets’ to ‘All Elements’.
Note(2): Under ‘Fire on‘ section, click on ‘Some Clicks’ button:
Step-5: Create a new tag with following similar configuration which can send clicks on the tracked button to Google Analytics as event:
Tag Name: Send click on the button download to GA as event
Choose Product: Google Analytics
Configure Tag:
Tag Type: Universal Analytics
Tracking ID: <<Enter your Tracking ID>>
Track Type: Event
Category: Downloads via button
Action: <<enter the name of event action>>
Label: {{Page Path}}
Non-Interaction Hit: True
Fire On: Check for click on the download button
Step-6: Preview and publish your container.
Step-7: Click on the button and test whether the event data is being passed to Google Analytics, via real time reports:
Tracking clicks on the button which is embedded across a website
The whole process of tracking clicks on the button which is embedded across a website, instead of just one particular page, is similar to tracking clicks on a button, embedded on a single page.
The only difference is that, when you create the trigger, you set the ‘Page URL’ to .* so that trigger can fire on any page of your website.
For example:
Tracking form submissions
Following is an example of a form with three input elements and a submit button:
<form id=”gform_1″ action=”http://www.weplan.com/Worksheets/worksheets.pdf”>
Username: <input type=”text” id=”username”><br>
Password: <input type=”text” id=”password”><br>
Email: <input type=”text” id=”email”><br>
<input id=”submitButton” type=”submit” value=”Submit”>
</form>
To track form submissions on a website via Google Tag Manager, follow the steps below:
Step-1: Note down the URL of the page where your form is embedded. For example:
Step-2: Find the form ID and make a note of it. To find your form id, right click on the form, select ‘Inspect Element’ (Google Chrome) and look for ‘id’ attribute in the <form> tag:
In my case, the form ID is ‘gform_1’
Step-3:Create new trigger to check for form submissions. Follow the steps below:
#3.1 Create a new trigger and name it ‘Check for form submit’.
#3.2 Select ‘Form Submission’ as event:
Every trigger in GTM V2 requires a trigger condition. Our trigger will fire on ‘Form Submission’ event.
#3.3 Click on the ‘continue’ button and then configure the rest of your trigger as shown below:
Trigger Name: Check for form submit
Choose Event: Form Submission
Configure Trigger:
Check Validation
Enable when:
Page URL equals <<enter the URL of the page where your form is embedded>>
Fire ON:
Form ID equals <<enter the ID of your embedded form>>
Note(1): If your form is embedded on several pages across your website, then set the ‘Page URL‘ to .* as explained earlier.
Note(2): Make sure that ‘check validation‘ option is checked. This is done to ensure that the trigger fires on successful form submission and not just when a user clicks on the form submit button.
Note(3): Under ‘Fire on‘ section, click on ‘Some Forms’ button:
Note(4): ‘Form ID’ is a built-in variable of GTM which returns the ‘id’ attribute of a form.
Step-4: Create a new tag of type Universal Analytics to send form submit event to GA server. Follow the steps below:
#4.1 Create a new tag of type ‘Universal Analytics’ and name it ‘Send Form Submit Event to Google Analytics’:
#4.2 Click on the ‘continue’ button, enter your web property ID, select ‘Event’ from the ‘Track Type’ and then enter your event tracking parameters (event category, action etc):
Here I have selected the variable {{Page Path}} from the drop down menu as event action:
The Page Path variable returns the Request URI of a web page.
For the URL: https://www.optimizesmart.com/contact/
The Request URI is: /contact/
I have used ‘Page Path’ as event action, so that in my event tracking reports, I can see the page on which the ‘Form submit’ event was triggered. This is useful, if you have embedded same form on multiple pages of your website.
#4.3 Set non-interaction Hit to ‘True’ so that event tracking does not affect the bounce rate of your website:
#4.4 Click on the ‘continue’ button and then on the ‘Form’ button (under ‘Fire on’):
You will then see ‘Choose from existing Form triggers’ dialog box:
#4.5 Select the form trigger which you just created and then click on the ‘save’ button.
Your final tag configuration will look like the one below:
#4.6 Click on the ‘Create Tag’ button to create your new tag.
Step-5: Preview your container to make sure that the new tag is firing.
Step-6: If everything is working as intended then publish the new version of your container.
Step-7: Click on the form ‘submit’ button and test whether the event data is being passed to Google Analytics, via real time reports:
Tracking Form Fields
Sometimes manually tracking something, when better alternatives are available, is not the best use of your limited time and resources. Tracking form fields via GTM is one of those tasks.
While it is technically possible to track each and every form field value, field abandonment and various form events. I have found that it is better, to leave this type of tracking, to the in-page analytics tools (like hotjar) which provide much better functionality.
Manually tracking form fields is difficult, time consuming and highly prone to errors. The actual implementation depends upon how your form has been setup, which fields it has got and the technology behind it.
But if you still want to reinvent the wheel, then here is the detailed guide on tracking form fields. However remember, that the functionality you will get through manual form field tracking, is likely to be very basic.
I use an in-page analytics tool called hotjar.
It provides excellent Form tracking solution in addition to: heatmaps, sessions recordings and funnel analysis. Its form tracking report is much better, than you can ever get from Google Tag Manager:
This tool provides following Form Tracking Functionality:
#1 Time spent on each form field (measured in seconds).
#2 % of re-filled for each field.
#3 Number of interactions with each field.
#4 % of drop off at each field step.
#5 Conversion rate of the form.
#6 Visualization of user flow from the first form field to the last.
No matter which in-page analytics tool you use, the important point to remember here is that, you don’t have to track everything via GTM just because you are using GTM.
GTM is not the solution to all of your tracking problems and if a tag does not work via GTM, then feel free to hard code it on your website or look for other alternative.
Using GTM won’t make you independent from IT anyways. If nothing else, you still need IT to hard code data layers on your website.
There is no rule set in stone than once you start using GTM, you are not allowed to hard code tags on your website ever again or look for other alternatives.
There are many tags which don’t work when deployed via GTM (either because you can’t figure out how to make them work or there are some technical constraints).One good example is Facebook JavaScript SDK.
I mentioned partial deployment (with and without GTM) because I get lot of emails from folks who get stuck with their implementation, when they can’t find a solution via GTM and they some how feel compelled to use GTM for all of their tracking needs.
It doesn’t need to be that way.
Tracking Clicks on external links across a website (Exit Tracking)
External links are the links to other websites from your website.
Tracking clicks on all external links is known as exit tracking or outbound tracking.
Through exit tracking, you can measure the volume of traffic your website is sending out, to other websites. This type of tracking is especially useful, if you run an Affiliate website.
Follow the steps below, to track clicks on all external links on your website via Google Tag Manager:
Step-1: Create a new trigger with following similar configuration:
Trigger Name: Check for clicks on any external link
Choose Event: Click
Configure Trigger:
Targets: Just Link
‘Wait for Tags’ checked
‘Check validation’ checked
Enable When: Page URL matches Regex .*
Fire on: Click URL does not contain <<yourdomain.com>>
Note(1): replace ‘yourdomain.com’ by your website name.
Note(2): ‘Click URL’ is a built-in variable in GTM, which returns the ‘URL’ of the clicked link.
Note(3): The ‘Fire on’ condition make sure, that this trigger does not fire for clicks on the links, which are internal i.e. the links which contain your domain name.
Step-2: Create a new tag with following configuration which send clicks on external links to Google Analytics:
Choose Product: Google Analytics
Choose a Tag Type: Universal Analytics
Configure Tag:
Tracking ID: << enter your GA tracking ID>>
Track Type: Event
Category: Traffic to Other Websites
Action: {{Click URL}}
Label: {{Page Path}}
Non-Interaction Hit: True
Fire On: Check for clicks on any external link
Note(1): {{Click URL}} is a built-in variable in GTM which returns the URL of the link clicked. You can select this variable from the drop down menu.
Note(2): {{Page Path}} is a built-in variable in GTM which returns the URL of a web page.
Step-3: Preview your container to make sure that the new tag is firing.
Step-4: If everything is working as intended then publish the new version of your container.
Video Tracking in Google Tag Manager V2
To learn about implementing video tracking, via Google Tag Manager, read this article: Understanding Triggers and Variables in Google Tag Manager V2
Scroll Tracking in Google Tag Manager
To learn about implementing Scroll Tracking, via Google Tag Manager, read this article: Implementing Scroll Tracking via Google Tag Manager
The post Event Tracking in Google Tag Manager V2 – Complete Guide appeared first on Optimize Smart.