Google Analytics event tracking via Google Tag Manager

21 October 2017

15-20 mins

Learn how to set up Google Analytics event tracking via Google Tag Manager in order to measure business relevant actions on your website.

In this blog post, I will show you how to set up Google Analytics event tracking via Google Tag Manager. Google Analytics comes with a number of interesting aggregate engagement metrics such as SesssionsAvg. Duration on Site, Bounce Rate and others. Usually, these metrics are good to have, but they are not necessarily indicative of a website’s business contribution. With Google Analytics event tracking and its customized events to measure form submissions or other conversions, the gap can be bridged to more business relevant measurements. Google Analytics event tracking was commonly implemented with custom code on the website, but with Google Tag Manager the event tracking can be set up through a graphical user interface instead of code. So, in summary, the approach described in this post allows you to:

  1. capture more business relevant and conversion focused data,
  2. gain flexibility and independence in regard to the implementation of Google Analytics event tracking,
  3. save time as you can verify correct tracking implementation right away and don’t need to wait for data to flow in.

In order to benefit from the advantages of Google Analytics event tracking for your business, you need to:

  1. have access to the HTML code of your site to place the Google Tag Manager tracking code on it,
  2. use a conventional website with conversion actions that do possess unique elements that can be used to trigger an event,
  3. which, if that is not the case, may require some web developer work like for instance adding a custom CSS class name to an element for an individual conversion action.

Now, let’s dive into the topic and see how you can implement Google Analytics event tracking via Google Tag Manager. The post uses the following structure:

1. Introduction to Google Tag Manager

Google Tag Manager is a stand-alone tag management tool that integrates seamlessly with Google Analytics. In this chapter, I will show you how Google Tag Manager operates and what to do first before implementing Google Analytics event tracking with it.

1.1 Understand Variables, Triggers and Tags

If you are using Google Tag Manager for the first time, you will need to create an account and container as well as place the Google Tag Manager script on your website. Once that is done, you should familiarize yourself with the user interface. In the workspace of your container, you will find OverviewTagsTriggersVariables, and Folders (image 1). For implementation, you will mostly use Tags, Triggers, and Variables, which will be further explained in this section.

Img. 1: Google Tag Manager Workspace

Put briefly, Tags define the type of measurement/placement (Google Analytics, Google AdWords, Custom HTML) that should occur, whenever happens what is defined in the Triggers based on Variables. In the following, I will give you more explanation about Variables, Triggers, and Tags.

Variables in Google Tag Manager can be built-in variables including data layer variables such as Click ClassesClick Text or Form ID as well as URL variables such as Page Hostname, Page Path or Page URL and others (image 2). Next to the built-in variables, there are user-defined variables that you can create based on Custom JavaScript, DataLayer VariableConstant or others. We will make use of a user-defined variable based on a Constant later for the Google Analytics Tracking Id. Variables allow you to retrieve values (e.g UA-12345678-1) and can not only increase your productivity in Google Tag Manager, but also support the correctness and completeness of your Google Tag Manager setup. Variables are referenced by using {{ and }} around your variable name as you will see later. Whenever the variable name should be changed the variable name will automatically be updated for all its references.

Img. 2: Variables in Google Tag Manager

Triggers in Google Tag Manager can be of various types. There are page view triggers (DOM Ready, Page View, Window Loaded), click triggers (All Elements, Just Links) and other triggers (e.g. Custom Event, Form Submission, Timer). For every trigger, you will need to define conditions, if you don’t want the trigger to be true in all scenarios such as for example all page views or all link clicks. The conditions you can select are based on the Variables. So, an exemplary Trigger is a click trigger for only those links where the Page URL equals example.com/my-link-page-I-like-to-track. In this case, the variable Page URL is used as the condition for the Trigger (image 3).

Tags in Google Tag Manager can be either featured tag types from online platforms such as Google Analytics, Google AdWords, but also AdRoll, CrazyEgg, HotJar and many others or custom tag types such as Custom HTML or Custom Image. The tag type usually allows more configuration like the Google Analytics Tracking Id in the case of Universal Analytics for Google Analytics. After selecting and configuring the tag type, you can either select one of the previously created Triggers or create it ad-hoc.

In conclusion, TagsTriggers, and Variables are all interconnected in Google Tag Manager and it is good to understand their interdependencies when you want to work productively with Google Tag Manager.

Img. 3: Trigger with restricting Page URL variable

1.2 Configure built-in variables

When you start out with Google Tag Manager, you will not be able to use all of the pre-configured variables for Triggers. You will need to configure built-in variables first and activate those variables that you want to use in Google Tag Manager. For this, you go to your Variables overview and click on Configure to check all those variables that you wish to be available to you (image 4). I guess Google did this to not overwhelm users since in practice there are certainly some variables that you will use significantly more often than others for common web analytics purposes. Be aware of this opportunity that you can/need to (de-)activate built-in variables depending on what variables you want to use for conditions for your Triggers as described in the previous section.

Img. 4: Configuring displayed built-in variables

1.3 Implement Google Analytics Tracking Code

Now we will get hands-on and establish a connection between Google Analytics and Google Tag Manager. In this section, you will see how you can implement the Google Analytics Tracking Code via Google Tag Manager. More specifically, we will set up a Universal Analytics tag connected with our Google Analytics Tracking Id (e.g UA-12345678-1). This process will touch on Tags, Triggers, and Variables in Google Tag Manager. As described in section 1.1, it is advisable to set up User-Defined Variables for values that we may want to retrieve frequently. In this case, we will save the Google Analytics Tracking Id in a variable named “GA UA” by selecting the Constant variable type and entering the Google Analytics Tracking Id as its string (image 5).

Img. 5: Google Tag Manager Constant variable type

After you set up that variable successfully, it is time to think about triggers. In most cases, we want the Google Analytics Tracking Code to be active on any of our pages. So, this means any page view on the entire site shall be the trigger for our yet to be created tag. In Google Tag Manager, there is a page view type trigger called “All Pages” that is not visible under Triggers, but selectable as a trigger under Tags. In this scenario, we want to employ that specific trigger activated with any page view.

So, in this case, there is no further configuration required under Triggers and you can move on to Tags. Select Universal Analytics as tag type and Page View in the subsequent screen for Track Type (image 6). Under Triggering, below the card for Tag Configuration, you want to select the trigger called All Pages that should appear at the top. Now you can give a descriptive name such as “Google Analytics Tracking Code” and then Save this tag. To fully activate these made changes, you will need to publish the latest workspace changes in Google Tag Manager (top right corner). Congratulations, your Google Analytics Tracking Code will now load via the Google Tag Manager code on all pages, for which you implemented the Google Tag Manager code. This makes the old separate Google Analytics Tracking Code on your pages obsolete if you had this code previously implemented. You can verify that the Google Tag Manager code correctly includes the Google Analytics Tracking Code with the browser plugin Google Tag Assistant.

Img. 6: Universal Analytics Tag with Page View track type

1.4 Implement generic click listeners

In preparation for the implementation of Google Analytics event tracking via Google Tag Manager, you should set up generic click “listeners”. This ensures that Google Tag Manager actively listens for any general clicks as well as link clicks. The Google Analytics event tracking will build on top of that and allow us to set up tracking for any occurred click on the website. We will need to set up two triggers of the click type for this. First, create a trigger with All Elements as Click trigger type and call it “All Elements – Clicks”. Second, create a trigger with Just Links as Click trigger type and call it “All Links – Clicks”. You should see your two triggers now in your list of triggers (image 7).

Img. 7: Generic click listeners in Google Tag Manager

You can verify whether the listeners work, by entering the Preview mode (top right corner) and opening any page of your website in a new tab. You should now be in the Google Tag Manager Debug mode that allows you to see what is recorded in the data layer and more. When you click anywhere on your page, you should see gtm.click appearing on the left side of your Debug window. Similarly, when you click on any link on the page, you should see both gtm.click and gtm.linkClick recorded (image 8).

Img. 8: gtm.linkClick & gtm.click in Preview mode

2. Understand Google Analytics event tracking

Everyone who has used Google Analytics before appreciates the out-of-the-box metrics offered. After setting up Google Analytics, you have immediate access to aggregate engagement metrics such as SessionPages/SessionsAvg. Session DurationBounce Rate and others. Whilst these metrics are interesting for general website engagement monitoring, they are usually quite distant from your actual business objectives. This is were Google Analytics event tracking comes in. By setting up events via Google Tag Manager as it will be explained later, you will enrich your data in Google Analytics meaningfully. With events you can measure every on-page and outbound click, PDF downloads, video plays and signups/registrations via a form.

2.1 Decide on events to track

As there are many opportunities for tracking website engagement with events, it is important to decide on or at least prioritize the most business critical website interactions. Usually, I would recommend using Google Analytics event tracking for interactions that are part of your marketing funnel. In a previous post called automate Google analytics reporting in Google Sheets, I describe how you can automate reporting in Google Sheets for a product signup funnel that contains a CTA click as well as a form submission, both tracked with Google Analytics events. If you know what a specific event is worth to your business, you can even assign a monetary value in your preferred currency to that event.

2.2 Understand Google Analytics event tracking structure

Google Analytics event tracking follows a certain structure and hierarchy in terms of how events are recorded in Google Analytics. It is well worth it to familiarize you with that recording structure beforehand in order to keep later event recordings tidy. Google Analytics records your given names or values and they become visible in the Google Analytics interface. There are up to four dimensions, for which you can input names or values. Google Analytics requires input for Event Category and Event Action, whilst Event Label and Event Value are optional dimensions of the recorded events.

Those four dimensions are also hierarchical in that sense that (1) the level of descriptive granularity that you want to choose for the names increases from Event Category to Event Label and (2) you will most commonly select Event Category, then Event Action and then, if recorded, Event Label to retrieve data on event-specific recordings in Google Analytics.

For example, if you are using events across your website as well as your product, you may want to choose “Web” and “Product” as respective Event CategoryIf you are using events only across your website, you can be more specific at the category level already and choose category names such as “CTAs clicked” and “Forms submitted” for instance. The level of granularity you select for this hierarchical depends on personal preference, but here are a few guiding questions for you:

  • Is my chosen name for Event Category broad enough to include all events I like to see aggregate volumes on in the Google Analytics UI?
    • If you select “CTAs clicked” as Event Category, the highest hierarchical dimension, you will be able to easily retrieve the number of total “CTAs clicked” in the UI. Alternatively, if you select “Web”, you will see the total of events that you assigned to the “Web” Event Category. You will however not be able to easily see the total number of events that occurred under two different Event Categories such as “Web” and “Product”. The respective numbers will be retrievable separately. This might not be an issue for you depending on how you do your reporting, but I like to make aware of this fact for data displayed by default in the Google Analytics UI.
  • Is my chosen name for Event Action broad enough to include all events I like to see aggregate volumes on in the Google Analytics UI?
    • Same principles of broadness apply to the Event Action names that are hierarchically listed below an Event Category. For Event Action names below an Event Category, you can decide to use one or more than one Event Action name for your events. Those should follow the “MECE” principle within their given category by being “Mutually Exclusive, Collectively Exhaustive”. For example, if I am using “Web” as the category and I am only measuring two actions such as “CTAs clicked” and “Forms submitted”, then those two should be the Event Action names.
  • If Event Action is my lowest hierarchical dimension is it narrow and descriptive enough or should I use Event Label as the lowest hierarchical dimension?
    • For example, if you chose “CTAs clicked” as Event Action, then you likely want to add an Event Label name that identifies an individual CTA. Be aware that in the Google Analytics UI you will be able to filter in a second dimension in the Events overview such as Page that will list the URL on which an event was fired. If you were to decide not to chose an Event Label and you chose “CTAs clicked” as your Event Action and filter in Page as the secondary dimension, then you will see a table with the name “CTAs clicked” against those pages where events occurred. However, if you have several CTAs on one page, you would not be able to report on click-throughs of the individual CTAs on that given page. This is an example, in which your Event Action name is not descriptive enough and you should use Event Label. In this scenario, you could give a name that is descriptive on the individual CTA level, for instance, “contact-page-cta-top” as well as “contact-page-cta-bottom”. This exemplary naming gives an indication of the page (also filterable with the second dimension in events overview), but also at which location within a page (e.g. top vs bottom) the individual CTA lives. With these Event Label names, you ensure to also be able to report on the individual CTAs (top and bottom CTA) on a given page.

Spending thoughts in advance in understanding the Google Analytics events hierarchy and a suitable naming convention for your business situation pays dividends later. If in doubt where to start when figuring out the event naming convention, I recommend thinking about what is the most granular action that you like to track with an event. Then start working backward and think about what is the next higher name that groups based on commonalities between several events, for which you like to see aggregate volumes in Google Analytics. Possibly, there is also a higher name above that, which groups your previous groups. In that case, you are looking at three hierarchy levels, which would mean an event setup using (1) Event Category, (2) Event Action as well as the optional (3) Event Label.

Do you like what you read so far? Do you like to get an email, whenever a new post gets published?

3. Example scenario of Google Analytics event tracking via Google Tag Manager

After we addressed the functionalities of Google Tag Manager in chapter 1 and of Google Analytics event tracking in chapter 2, we will set up exemplary events via Google Tag Manager in this third chapter. For simple illustration purposes, my own website will serve as an example in this scenario. The shown approach to setting up Google Analytics event tracking via Google Tag Manager is completely transferrable to your own business or website project.

3.1 Decide on events to track in scenario

As discussed in section 2.1, I recommend being very focused, when thinking about website performance measurement. You want your tracking set up in a way that you know whether you are moving the needle on some of the most important business metrics. Also, you should be able to actually act on your measurements. You should be able to verify (or falsify) your hypotheses when introducing a change that may yield an improvement.

In this scenario of my own website, one of the metrics I am most interested in is “subscribers”. Measuring how many visitors subscribe to my blog as well as on which page they do it and whether they mostly do it through a CTA in the navigation bar, in-text or at the end of a post allows me to better understand my audience and introduce a change that yields improvement. Such improvements can include eliminating any CTA that seems not to resonate well with my visitors, write more of those types of blog posts that resulted in most engagement and/or change parameters of existing subscription options such as the copy of/around a CTA. Likely, there will be several places that hold the same data such as a number of form fills. This data is available with your email automation software, possibly with a plugin or tool you use for the form and with the described process here you will also have the data available in Google Analytics. The benefit of measuring blog subscriptions in Google Analytics is the opportunity to tie it with any other web analytics data.

At the point of writing this post, I am using the following subscription options:

  • Subscribe link in navigation bar, present on all pages (image 9)
  • Get Updates button in-post, present on all blog posts
  • Get Updates button at end of post, present on all blog posts
Img. 9: Subscription option in navigation

To recap, we decided that the following information will be helpful to inform improvements:

  • Count of all total blog subscriptions
  • Count of blog subscriptions per option/type
    • this requires a differentiation by CTA location (in-post vs end-post)
  • Page, on which people subscribed

This will require the following event tracking setup:

  • Separate tracking (as in separate events) of each of the three ‘subscribe’ options: (1) navigation bar, (2) button in-post, (3) button end of post. We will need three separate events in order to measure the count of blog subscriptions by CTA location.
  • Also, we will need one event firing on every submitted form for a blog subscription

3.2 Decide on event category, event action & event label dimension names

In the context of the considerations about the Google Analytics event structure mentioned in section 2.2, we will choose Event Category names knowing that this is the highest hierarchical structure shown later in the Google Analytics UI.

I choose Subscription as Event Category grouping all subscription related actions below it as respective Event Action. As we know from the previous section, we will need four events in total to measure our example scenario: one event firing on every submitted form for a blog subscription and three events for each of the three mentioned ‘subscribe’ options (navigation bar, in-post & end-post).

For the event for every form submission, we go with Subscription as Event Category and Form submitted as Event Action and no Event Label. The event for the ‘Subscribe’ CTA in the global navigation bar, which measures when a user clicks on ‘Subscribe’ and sees the blog subscription form, will use Subscription as Event Category, Form viewed as Event Action and Subscribe nav as Event Label. The event for the subscription CTA placed in blog posts goes with Subscription as Event Category, Form viewed as Event Action and Subscribe in-post as Event Label. Finally, the event for the subscription CTA placed at the end of blog posts goes with Subscription as Event Label, Form viewed as Event Action and Subscribe end-post as Event Label.

You recall from section 2.2 that this allows us to report easily on all three CTA related events in aggregate by selecting Form viewed as Event Action in the Google Analytics UI once the data started flowing in.

3.3 Use Google Tag Manager Preview mode to see values of variables

When we know what we want to use Google Analytics event tracking for and we have decided on the best event naming structure, we are ready to finally set up the events. We can use the Google Tag Manager Preview mode to understand what values get returned for our Google Tag Manager Variables on a defined action such as a click, pageview or form submission for instance.

First, we want to set up the event for the subscription related CTAs. We start with subscription option 1, the ‘Subscribe’ link in the global navigation bar. You activate the Preview mode in Google Tag Manager by clicking its button in the top-right corner of the UI in the workspace. When you visit the web page, on which you like to set up the event, in your browser, you should see the Preview at the bottom of the page. Now, perform the action you like to measure. In our example scenario, we want to know what values get returned for our Google Tag Manager Variables, when the ‘Subscribe’ link in the global navigation bar gets clicked (image 10).

Img. 10: Preview Mode for Nav Form viewed

We can see that for the Click Element variable the returned value is “https://johannesmehlem.com/#”, which means that page URL with appended “#” seems to be the commonly returned value. We should follow-up with verifying checks whether other navigation links return the same value (which would be the case for other links opening pop-ups as opposed to pages). As there is another popup for ‘Contact’, we want to look for additional variables until we find a set of pairs of variables and values that are unique to the specific action we want to track. In this case, Click Text returns “SUBSCRIBE” and the combination of Click Element and Click Text are unique to clicking on the ‘Subscribe’ link in the navigation bar. In general, be aware that variables such as Click Text can potentially be more volatile than other variables as the website copy may be changed as part of ongoing website optimization.

Next, we go into Google Tag Manager and create a Trigger that should look like below (image 11).

Img. 11: Trigger for Form viewed

The corresponding Tag configuration will look like below (image 12). Also, we will need to add our previously created Trigger to this Tag for the Google Analytics event to fire correctly.

Img. 12: Tag for Form viewed

Tracking for the two other subscription options, one button placed in the blog post and another button placed at the end of the blog post, follows the same principles and requires a similar setup of corresponding Tags and Triggers.

Second, we like to implement the tracking of any submitted forms in order to subscribe to the blog. To recap, the subscription form will pop up after clicking the ‘Subscribe’ link in the navigation bar on any page and after clicking the ‘Get Updates’ button either the one in the blog post or the one at the end of the blog post. The image below shows an example of a subscription-related CTA in the post (image 13).

Img. 13: Subscription via CTA in-post

In this second step, we want to set up an event in Google Analytics to track any form submission for a blog subscription. Once you submit a form on your page, you should see a gtm.formSubmit in the dataLayer, for which you can then again see the returned values for the variables. In this case, we see some unique value returned for the Form Classes variable (image 14).

Img. 14: Form Classes variable for form submission

Next, we set up the trigger based on the Form Classes variable seen earlier in the Google Tag Manager Preview mode (image 15). Also, we create the corresponding Tag with Subscription as Event Category and Form submitted as Event Action (image 16). Finally, we make sure to link the Trigger to the Tag.

By now, we have set up all three Tags to measure subscription related click-throughs and one Tag to measure all form submissions for blog subscriptions. In the next step, we want to verify whether these four events are also firing as intended.

Img. 15: Trigger for tracking form submissions
Img. 16: Tag for tracking form submissions

4. Verify correct event tracking in Google Tag Manager

After we have set up the Google Analytics event tracking via Google Tag Manager in the previous chapter, we want to verify now whether these events are firing as intended. There are two methods to do so: (1) Google Tag Manager Preview mode and (2) Google Analytics real-time tracking. We have already used the Google Tag Manager Preview mode as part of the event tracking setup and the verification of correctly fired events works similarly.

4.1 Use Google Tag Manager Preview mode

With the Google Tag Manager Preview mode you will see all Tags firing on a particular action. In order to verify whether event tracking works correctly, we simply perform these actions we want to track and see whether the Tag set up for it also fires. In our example, the previously created Tag also fires as intended and we can rest assured that this event will be counted in Google Analytics (image 17). In some instances, we may also want to test (as we did to some extent during the setup) whether the event fires on more actions than it should, which means we will need to go back into Google Tag Manager and edit the respective Trigger to be more restricted.

Img. 17: Tag fired for Form viewed

In case the Tag did not fire as intended, click on the Tag among the list of Tags Not Fired On This Event. Within this view, you will find an overview of those values that were differently returned for the variables in order for the Tag to fire (image 18). This can help troubleshoot and explain why a Tag did not fire.

Img. 18: Tag with not found Click Classes value

4.2 Use Google Analytics real-time tracking

For most cases, you should be able to verify the Google Analytics event tracking with Google Tag Manager’s Preview mode. However, there may be cases in-particular for form submissions, where the whole page reloads and hence, the Tag may only show up briefly (if at all) before Google Tag Manager’s Preview mode reloads with the new page. In such cases, it is not possible to see the Tag firing and hence verify whether the event tracking works.

For such cases, there is an alternative method of verifying Google Analytics event tracking. You can use the Google Analytics real-time analytics section for events to see whether the event is recognized when performing your action. The prerequisite is that you actually publish the Google Tag Manager version with the event setup. Once you perform your action, you should see the event coming through in Google Analytics (image 19).

Img. 19: Google Analytics real-time analytics event fired

5. Conclusion

In order to get more business-relevant data in Google Analytics, you should use event tracking. Google Tag Manager, which has been introduced in Chapter 1, is a great tool that allows very customized implementation of Google Analytics event tracking. As mentioned in Chapter 2, when setting up events, it is important to understand the Google Analytics event tracking structure to start collecting clean event data right from the beginning. Different scenarios of event naming conventions have been illustrated in Chapter 3 with an example from my own website. Once an event has been set up, the opportunity to verify right away that the event tracking is working as intended eliminates any waiting time for captured data as eluded to in the introduction. Chapter 4 discusses Google Tag Manager’s Preview mode as well as Google Analytics’ real-time tracking as the two options to verify correct event tracking.

Did you like what you read? Do you like to get an email, whenever a new post gets published?