Google Analytics Event Tracking in Google Tag Manager

There are many types of site interactions you may be interested in tracking: scroll distance down a page, clicks on a hero image, email address submissions, and so on. All of these can be tracked using Google Analytics' event tracking tags, which in turn can be set through Google Tag Manager (GTM).

This blog series describes the most common methods of collecting site interaction data using Google Tag Manager to send event tracking data to Google Analytics.

Method 1 (this post): GTM's Built-In Interaction Tracking (aka Auto-Event Tracking / DOM Scraping)

Method 2: Custom HTML and JS Tags in GTM

Method 3: Developer Pushes to a Pass-Through Data Layer

Method 4: Combined Auto-Event & Data Layer

METHOD 1: GTM'S BUILT-IN INTERACTION TRACKING (DOM SCRAPING)

Advantage: The advantage of this method is that you don't need to write any code or use any development resources. Do it all yourself, in GTM. This method will work for tracking interactions with nearly any element on the page.

Disadvantage: Since this method relies on the existing page structure, it can break if the page layout changes. You also will still need developer support if the page isn't set up with clear "hooks" for tags, or if you require accessing some value from the site's back end (e.g. a user ID). Finally, this method requires tags for each component, so your GTM container may become quite cluttered. You'll need to use good naming and organizational systems.

Feb 2018 Update: I came across a couple interesting and relevant posts that further describe the pros & cons of DOM scraping vs using a data layer: 1) http://marketlytics.com/blog/dom-scrapping-to-quickly-collect-data-in-tagmanager, 2) http://www.cardinalpath.com/tms-data-layer-dom-scraping-pros-cons/ 

IMPLEMENTATION STEPS OVERVIEW

1. Create a new Universal Analytics tag in GTM with Track Type = Event.
2. Populate the Category, Action, and Label fields with text and/or variables that dynamically change. Often you will use a combination of these. Make sure to create a logical naming strategy that will make sense later on.
3. Create a trigger using GTM's built-in automatic triggers like "All Elements" or "Just Links". Typically you will set this trigger to fire when the Click Element matches some CSS selector.

DETAILED IMPLEMENTATION EXAMPLE

For this example, we'll track clicks on part of the navigation bar on popular developer site stackoverflow.com.

STEP 1: CREATE A NEW EVENT TAG IN GTM

Create a new Universal Analytics tag in GTM by clicking Tags > New > Tag Type = Universal Analytics, Track Type = Event.

STEP 2: POPULATE THE EVENT CATEGORY, ACTION, AND LABEL

Here you need to name the tag and populate the event fields. Here I named it GA - Event - Navbar, and populated it with Category = Header, Action = Clicked Navigation Bar, and Label = {{Click Text}}.

{{Click Text}} is a built-in variable that automatically collects the text of whatever element was clicked on. For this example we're just tracking the part of the nav bar that contains text; other parts of the nav bar would require additional tags.

STEP 3: SAVE THE TAG

Click Save. Every tag requires at least one trigger in order to fire, so GTM will give you a warning pop-up saying "No Triggers Selected". Ignore it for now and click Save Tag.

STEP 4: ADD A TRIGGER

Now, we'll create and choose triggers for the tag. For event tracking, you will most commonly use Click tracking. Click tracking comes in two forms: All Elements and Just Links. All Elements will track all clicks on a page, including clicks that don't link to another URL. Just Links targets only links to other URLs.

For this example, click Triggers > New > Trigger Type = Just Links.

STEP 5: CHOOSE WHEN THE TRIGGER FIRES

In the Click - Just Links setup box, select the 'This trigger fires on Some Link Clicks' radio button.

This will open up an option saying "Fire this trigger when an Event occurs and all of these conditions are true". From the dropdown menus, choose Click Element matches CSS Selector:

STEP 6: FIND THE CSS SELECTOR ON THE PAGE

To identify what the CSS selector is for the element you want to track, right-click the element you're interested in and click Inspect. Now you can look through the DOM and find the CSS selector that best matches your element.

In this case it looks like all the navigation links we're interested in exist under nav class = navigation.

STEP 7: FINISH POPULATING THE TRIGGER

Finish populating the trigger with Click Element matches CSS Selector .navigation *

STEP 8: COMPLETE THE TAG

Add your new trigger to your event tag, Preview, test, and Publish.

CONCLUSION:

Event tracking using CSS selectors has been a giant revelation for shifting tagging power to web analysts. While it requires some familiarity with CSS and the DOM, you don't have to write a line of code for this to work. It's quick and easy, and for these reasons is a fantastic method for the analyst's tagging toolbox.

P.S. For a more advanced example of accessing page information that isn't accessible by built-in variables like Click Text, please check DOM Scraping into Data Layer & Custom JS Variables.