How to track Google Analytics Events via Google Tag Manager

You can track Google Analytics events via Google Tag Manager by creating a Google Analytics tag of type ‘Event’ and then creating a specific trigger to track specific time of users’ interactions (like PDF Downloads, image link clicks, button clicks, form submissions, form fields, video watching, scrolling, external link clicks etc.).

Every time you want to track a new page element, you would need to create a new Google Analytics tag of type ‘Event’. This tag is used to send event tracking data (Event Category, Event Action, Event Label and Event Value) to Google Analytics. 

Before you start event tracking via Google Tag Manager (GTM), do this…

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
• Forms
• Videos
• Scrolling
• Visibility

By doing this, these variables will be available to you when you create new tags and triggers later on for the purpose of event tracking.

Follow the steps below to enable all the required built-in variables for event tracking:

Step-1: Login to your Google Tag Manager (GTM) account and then click on the ‘Variables’ link from the left-hand side menu:

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

You should now see a window like the one below:

Step-3: Enable all the ‘built-in variables’ of type: Pages, Clicks, Forms, Videos, Scrolling, and Visibility by clicking on the checkboxes:

 

How to track a button click in Google Tag Manager

Consider the following button:

<button id=”checklist3″ type=”button” onClick=’location.href=”http://www.optimizesmart.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. Let us suppose that URL is: https://www.optimizesmart.com/62925-2/

Step-3: Right-click on the button and then click on ‘Inspect’:

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

Step-4: Note down the ‘id’ attribute of the button (in our case it is ‘checklist3‘). If the ‘id’ attribute is missing, then ask your developer to add one.

Step-5: Create the new trigger with following similar configurations and then click on the ‘Save’ button:

Trigger Name: Check for clicks 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(1):  In GTM, if you want to track any HTML element other than a link, then you set the ‘Trigger Type’ to ‘Click All Elements’.

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

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 button to Google Analytics as an event:

Tag Name: Send button clicks to GA as event

Tag Type: Google Analytics: Universal Analytics

Track Type: Event

Category: Button Clicks

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

Label: {{Page Path}}

Value: <<enter your event value. This is optional>>

Non-Interaction Hit: True

Google Analytics Settings: <<Select your Google Analytics Settings Variable>>

Firing Triggers: Check for clicks on the download button

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 the event label so that in my event tracking reports, I can see the page on which the button was clicked. This can be useful if you have embedded the same button 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.

Step-8: Navigate to the web page (in Google Chrome browser) which contains the button you want to track via GTM. You should now see the Google Tag Manager Debug console window at the bottom of the page:

Step-9: Click on the button and then click on the ‘Click’ event in the GTM debug console window:

If you see the tag ‘Send button clicks to GA as event‘ is listed under the ‘Tags Fired’ section then it means that your tag fires on button click.

Step-10: To double-check that your tag is firing and sending events data to Google Analytics, navigate to Real Time >> Events report in your main Google Analytics reporting view:

 

Step-11: Navigate back to your GTM account and then publish the container.

 

 

Tracking clicks on a 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:

Here .* is a regular expression.

 

How to track link clicks in Google Tag Manager (tracking PDF downloads)

Consider the following link on a web page:

<a id=”checklist” href=”http://www.optimizesmart.com/Worksheets/seo-guide.pdf” >Download SEO Guide</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. Let us suppose that URL is: https://www.optimizesmart.com/62952-2/

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 the unique class name. If you can’t find a unique class name then ask your developer to add the ‘ID’ attribute with a unique value. Without the 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 clicks 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:

Some Link Clicks

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

Note: ‘Check Validation‘ ensures that the trigger fires on a successful link click and not just when a user tries to click the link.

Step-6: Create a new tag with following similar configuration which can send clicks on the tracked link to Google Analytics as an event:

Tag Name: Send clicks on the download link to GA as event

Tag Type: Google Analytics: Universal Analytics

Track Type: Event

Category: Link Clicks

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

Label: {{Page Path}}

Value: <<enter your event value. This is optional>>

Non-Interaction Hit: True

Google Analytics Settings: <<Select your Google Analytics Settings Variable>>

Firing Triggers: Check for clicks on the download link

 

 

Step-7: Preview your container.

Step-8: Navigate to the web page (in Google Chrome browser) which contains the link you want to track via GTM and then click on the link.

Step-9: To check that your tag is firing and sending events data to Google Analytics, navigate to Real Time >> Events report in your main Google Analytics reporting view:

Step-10: Navigate back to your GTM account and then publish the container.

 

How to track outbound link clicks via Google Tag Manager

Outbound links (also known as external links) are links to other websites from your website.

Tracking clicks on all outbound 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 outbound 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 makes sure, that this trigger does not fire for clicks on the links, which are internal i.e. the links that contain your domain name.

Step-2: Create a new tag with the following configuration which send clicks on external links to Google Analytics:

Tag Name: Send Clicks on external links to Google Analytics

Tag Type: Google Analytics: Universal Analytics

Track Type: Event

Category: Traffic to Other Websites

Action: {{Click URL}}

Label: {{Page Path}}

Value: <<leave this field empty>>

Non-Interaction Hit: True

Google Analytics Settings: <<Select your Google Analytics Settings Variable>>

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.

Step-4: To check that your tag is firing and sending events data to Google Analytics, navigate to Real Time >> Events report in your main Google Analytics reporting view:

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

How to track link clicks on images in Google Tag Manager

Consider the following image link (link in the form of an image):

<a id=”chk324″ 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 link clicks on image

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

      Some Link Clicks

This trigger fires on:

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

Note: 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 an event:

Tag Name: Send clicks on the image to GA as event

Tag Type: Google Analytics: Universal Analytics

Track Type: Event

Category: Image Link Clicks

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

Label: {{Page Path}}

Value: <<enter your event value. This is optional>>

Non-Interaction Hit: True

Google Analytics Settings: <<Select your Google Analytics Settings Variable>>

Firing Triggers: Check for link clicks on image

Step-6: Preview your container.

Step-7: Click on the image link and test whether the event data is being sent to Google Analytics, via Real Time > Events reports in your main Google Analytics reporting view:

Step-8: Publish your container.

 

 

How to track a form submissions via Google Tag Manager

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 the ‘ID’ attribute in the <form> tag. In my case, the form ID is ‘gform_1’:

Step-3: Create a new trigger to check for form submissions with following similar configurations:

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 the ‘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 the form submit event to Google Analytics:

Tag Name: Send form submit event to Google Analytics

Tag Type: Google Analytics: Universal Analytics

Track Type: Event

Category: New Lead

Action: {{Page Path}}

Value: <<enter your event value. This is optional>>

Non-Interaction Hit: True

Google Analytics Settings: <<Select your Google Analytics Settings Variable>>

Firing Triggers: Check for form submit

Note: 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 the same form on multiple pages of your website.

Step-5: Preview your container.

Step-6: Navigate to the page which contains the form submit button and then click on it.

Step-7: Check whether the event data is being sent to Google Analytics, via Real Time >> Events reports.

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

Form field tracking with Google Tag Manager

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 set up, 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 solutions in addition to heatmaps, session recordings, and funnels analysis. Its form tracking report is much better than you can ever get through Google Tag Manager:

Hotjar provides the 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 alternatives. Using GTM won’t make you independent from IT anyway. If nothing else, you still need IT/developer 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 that 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 the Facebook JavaScript SDK.

I mentioned partial deployment (with and without GTM) because I get a lot of emails from folks who get stuck with their implementation just because somehow feel they compelled to use GTM for all of their tracking needs.

It doesn’t need to be that way.

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

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