Event Tracking in Google Tag Manager V2 – Complete Guide

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:

built in variables

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

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:

inspect

You will now see the Google developer console window at the bottom of the page:google developer console

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:

click download link

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:some clicks

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

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:

download via link

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>

image link

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:some clicks

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

all elements

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:

download via image link

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>

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:

click download button

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

all elements

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:some clicks

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:

download via button

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:

button accross website

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>

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:

note down page url

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:

note down form id

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:forum submission

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:

check for form submit

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:

some forms

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

send form submit event

#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):configure tag

Here I have selected the variable {{Page Path}} from the drop down menu as event action:

page path

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:

non interaction hit

#4.4 Click on the ‘continue’ button and then on the ‘Form’ button (under ‘Fire on’):

fire on form event

You will then see ‘Choose from existing Form triggers’ dialog box:choose from existing form triggers

#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:final tag creation

#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:new lead

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 analysisIts form tracking report is much better, than you can ever get from Google Tag Manager:

form analytics 1

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.

Video Tracking in Google Tag Manager

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

 

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:exit tracking

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:

send clicks on external links

send clicks on external links2

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.

Announcement about my books

Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

Attribution Modelling in Google Analytics and Beyond
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Himanshu Sharma

Certified web analyst and founder of OptimizeSmart.com

My name is Himanshu Sharma and I help businesses find and fix their Google Analytics and conversion issues. If you have any questions or comments please contact me.

  • Over eleven years' experience in SEO, PPC and web analytics
  • Google Analytics certified
  • Google AdWords certified
  • Nominated for Digital Analytics Association Award for Excellence
  • Bachelors degree in Internet Science
  • Founder of OptimizeSmart.com and EventEducation.com

I am also the author of three books:

error: Content is protected !!