How To Set Up Event Tracking via Google Tag Manager

Grant Marlowe - September 2, 2016

Often times, once Google Analytics has been installed on a website and begins collecting data, site owners, marketing teams, business owners, and anyone else with a stake in the website, begins to realize they want to know even more. They want to learn all they possibly can about their website traffic. You’ll know you’ve been bitten by the Data Bug when analyzing data, only generates more questions. As soon as we discover something insightful about traffic patterns, we want to know more and more.


While the default Google Analytics Tracking Code (GATC) provides quite a robust library of metrics and dimensions for you to pivot through in the Analytics interface, the next level of tracking usually comes in the form of Event Tracking. “Events are user interactions with content that can be tracked independently from a web page or a screen load.” – https://developers.google.com/analytics/devguides/collection/analyticsjs/events

Some examples of Event Tracking include interactions with embedded videos, PDF downloads, social icon clicks, Newsletter signups, and almost any other on-page interaction that doesn’t generate a new URL. Collecting data on the number of times one video is played compared to another video, or which of our PDF’s is downloaded most often, can lead to valuable insights and thus, help us improve our websites user experience.

Installing Event Tracking on our website can be done quickly and accurately by leveraging Google’s free Tag Management solution known as Google Tag Manager (original I know!) For the remaining portion of this post, we are going to assume you have Google Tag Manager (GTM) installed site-wide.

The Scenario

Let’s assume we want to get an understanding of the number of clicks our “Submit” button receives when users sign up for our monthly newsletter. Now, because clicking “Submit” on our form does not generate a new page, using Event tracking to hone in on “Submit” clicks is a viable alternative.

MoreVisibility Newsletter Sign-Up Form Example

Now that we have identified exactly what we want to track, there are a few steps required in order to setup Event Tracking following a best practice implementation:

  1. Create an Event Tag in Google Tag Manager
  2. Define our Event Tracking Parameters
  3. Specify What Will Cause Our Tag to Fire
  4. Preview, Test and Publish our Event

Creating Our Event Tag

From the container overview page, select New Tag from the options.

Creating a New Event Tag
First thing is to name our tag, let’s call it “Newsletter Sign-up Submit Clicks.” Choose the tag template for Google Analytics and Tag Type as Universal Analytics. This will open up our configure tag options and we need to enter our Universal Analytics Tracking ID (which can be found in the Admin section of the GA interface) we also need to change the Track Type from Page View to Event. Doing this will open up the Event Tracking Parameters fields, which we need to define next.

Define Our Event Tracking Parameters

This is one of the most important parts of the setup process because what we enter here is what will populate in the actual Event report in GA. For Category we can input “Newsletter Form”, and our Action will be “Clicked Submit.” Now, Label and Value are both optional fields and the tag will work even if these are left blank. Label can be useful if our newsletter form appears on more than one page of our site, and we would like to know exactly what page the form was submitted on. In order to do this we need to dynamically fill in the Label with a pre-built GTM variable named “Page URL”, select the lego block icon to the right of the field and select Page URL from the drop down.

Event Tracking Parameter List

If we want to assign a numeric amount (monetary value) to our event, we can add it in the Value field below Label. In this case we are going to leave Value blank. Additionally, we are going to leave the Non-Interaction Hit field set to False, as we do not want this event to impact our Bounce Rate metric. Hit “Continue” and we can move on to creating our trigger!

Specify What Will Cause Our Tag To Fire

The final step in building out the Event tag is to define the rules that will trigger our Newsletter Sign-up Submit Clicks tag to fire the hit and send data to Google Analytics. In the Fire On section select “Click” from the trigger types listed and that will open up a new window where we will define our triggers rules.

We need to name our trigger and we want to name it something intuitive and literal so we know it corresponds with our newsletter tag. Let’s name our trigger “Newsletter Form Submit.” We have already selected our Event type as Click so we can leave Event as it is.

The next section “Configure Trigger” lets us select if we want our trigger to listen for All Elements or Just Links. Making a selection will depend on each situations unique circumstances. For our newsletter submit event the button being clicked is not a link, so we are going to leave the target set at “All Elements.”

Next GTM asks us if we want to fire our trigger on All Clicks or Some Clicks, because we don’t want to fire our tag on every single user click, we’re going to select “Some Clicks” and then set our conditions. We want our Newsletter Submit tag to fire anytime the “Submit” button is pressed, so we are going to use the Click ID variable (which is pre-built into GTM) to capture this activity. We are going to set our operator to “equals” and then in the open field place the unique HTML ID for the Submit button.

Create Trigger in Google Tag Manager

 

If you do not know how to identify the HTML ID, right click on the element you want to identify, select “Inspect” (on Chrome) and this will open up your Developer Tools panel with the element highlighted.

Look for the ID attribute and copy + paste that into your condition statement. From here, hit Create Trigger and then Create Tag. Our Event tag is now ready for testing!

Preview, Test and Publish our Event

Before we publish our Event tag and start collecting data on our Newsletter submit button, we want to preview the changes we have made. This step helps make sure the tag is firing as intended and that everything is functioning properly.

In the top right corner of your screen, select the drop down arrow next to Publish and click to enter Preview and Debug mode. This will refresh the window and there should now be an orange banner informing you that preview mode has been enabled.

If we reload our website, the bottom portion of the window should open an iFrame with the GTM preview pane. Now we can use this to test our implementation and confirm that our Newsletter Sign-up Submit Clicks tag is firing when, and only when, a user has clicked the Submit button.

Google Tag Manager New Tag Fired Notification

Once we have validated our tag we can return to GTM and safely publish our changes globally. Now, as users fill out our newsletter form and hit the submit button we will be able to track those interactions in Google Analytics.

We will be able to answer several questions regarding our newsletter sign-ups such as the traffic channels, user device types, geo-locations and pages that are responsible for driving the most signups. All made possible via Event tracking with Google Tag Manager!

© 2023 MoreVisibility. All rights reserved.