Index
Through this article you will learn to track:

#1 Clicks on a link via Google Tag Manager
#2 Clicks on an image link
#3 Clicks on a button
#4 Clicks on the button which is embedded across website
#5 Form submissions
#6 Form fields
#7 Clicks on external links across a website (Exit Tracking)
#8 Videos (Videos Tracking)
#9 Scrolling behavior of your website users (Scroll Tracking)

Before you start event tracking set up via GTM

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.

By doing that these variable will be available to you, when you create tags and triggers later on.

Follow the steps below:

Step-1: Navigate to your GTM account, click on the ‘Variables’ link (in the left hand side navigation):

Step-2: Click on the ‘Configure’ button:

Step-3: Enable all the ‘built-in variables’ of type: Pages, Clicks and Forms:

 

#1 Tracking Clicks on a link via Google Tag Manager

Consider following link on a web page:

<a id=”checklist” href=”http://www.weplan.com/Worksheets/worksheets.pdf” >Download Wedding Planning Checklist</a>

In order to track clicks on this 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 look for unique class name. If you can’t even find unique class name then ask your developer to add the ‘ID’ attribute with a unique value. Without ID attribute, you can’t easily 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

Trigger Type: Click – Just links

Check Validation

Enable this trigger when:

Page URL equals <<enter the URL of the page where the link you want to track is embedded>>

This trigger fires 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): ‘Page URL’ is a built-in variable of GTM which returns the URL of a web page.

Note(4): ‘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

Tag Type: Universal Analytics

Track Type: Event

Category: Downloads via link

Action: <<enter the name of your event action>>

Label: {{Page Path}}

Non-Interaction Hit: True

Firing Triggers: 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 and it fires only when you click on the targeted link.

Step-8: If everything is working as intended then publish the new version of your container.

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 sent to Google Analytics, via real time reports:

 

#2 Tracking clicks on an image link via Google Tag Manager

Consider follwing 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>

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 image 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 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 image download link

Trigger Type: Click – Just links

Check Validation

Enable this trigger when:

Page URL equals <<enter the URL of the page where the image link you want to track is embedded>>

This trigger fires on:

Click ID equals <<enter the ID of your <a> element>>

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 ‘Trigger Type’ to ‘Click All Elements’:

In GTM, if you want to track any HTML element other than a link, then you set the ‘Trigger Type’ to ‘Click 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

Tag Type: Universal Analytics

Track Type: Event

Category: Downloads via Image link

Action: <<enter the name of your event action>>

Label: {{Page Path}}

Non-Interaction Hit: True

Firing Triggers: 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 sent to Google Analytics, via real time reports:

 

#3 Tracking clicks on a button via Google Tag Manager

Consider following button:

<button id=”checklist3″ type=”button” onClick=’location.href=”http://www.weplan.com/Worksheets/worksheets.pdf”‘>Download</button>

In order to track clicks on this button via GTM, 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

Trigger Type: Click – All Elements

This trigger fires on: Some Clicks

Fire this trigger when an Event occurs and all of these conditions are true:

Page URL equals <<enter the URL of the page where the button you want to track is embedded>>

Click ID equals <<enter the ID of your button element>>

Note:  In GTM, if you want to track any HTML element other than a link, then you set the ‘Trigger Type’ to ‘Click All Elements’.

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

Tag Type: Universal Analytics

Track Type: Event

Category: Downloads via button

Action: <<enter the name of your event action>>

Label: {{Page Path}}

Non-Interaction Hit: True

Firing Triggers: 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 sent to Google Analytics, via real time reports:

 

#4 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:

 

#5 Tracking form submissions

Consider following 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 (through Google Developer Console) 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 trigger type and then configure the rest of your trigger as shown below:

 

Trigger Name: Check for form submit

Trigger Type: Form Submission

Check Validation

Enable this trigger when all of these conditions are true:

Page URL equals <<enter the URL of the page where your form is embedded>>

This trigger fires on: Some Forms

Fire this trigger when an Event occurs and all of these conditions are true:

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): ‘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:

Tag Name: Send form submit event to Google Analytics

Tag Type: Universal Analytics

Track Type: Event

Category: New Lead

Action: {{Page Path}}

Non-Interaction Hit: True

Firing Triggers: Check for form submit

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.

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 sent to Google Analytics, via real time reports:

 

#6 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 the 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 through 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.

 

#7 Video Tracking via Google Tag Manager

To learn about implementing video tracking via GTM, check out the following two articles:

#1 YouTube Video tracking via Google Tag Manager

#2 Video Tracking via YouTube Video Trigger In Google Tag Manager

 

#8 Scroll Tracking via Google Tag Manager

To learn about implementing Scroll Tracking via GTM, check out the following two articles:

#1  Implementing Scroll Tracking via Google Tag Manager

#2 Scroll Tracking via Scroll Depth Trigger in Google Tag Manager

 

#9 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 External links

Trigger Type: Click – Just Links

Check Validation

Enable this trigger when all of these conditions are true:

Page URL matches Regex .*

This trigger fires on: Some Link Clicks

Fire this trigger when an Event occurs and all of these conditions are true:

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 this trigger’ 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:

Tag Name: Send Clicks on external links to Google Analytics

Tag Type: Universal Analytics

Track Type: Event

Category: Traffic to Other Websites

Action: {{Click URL}}

Label: {{Page Path}}

Non-Interaction Hit: True

Firing Triggers: Check for clicks on External links

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.