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

❓ GTM is a very flexible tool, opening up many potential implementation design patterns for tagging. There is a spectrum, where some of these patterns exclusively use GTM’s built-in auto-event tracking, others primarily rely on developers adding values to a data layer, and others lie somewhere in the middle.

NEW! API CONNECTOR ADD-ON FOR GOOGLE SHEETS

Check out my new API Connector Add-on to import data from thousands of platforms (e.g. Shopify, Harvest, Mailchimp, ActiveCampaign, VWO, YouTube, etc.) directly into Google Sheets.

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.

event-tracking-methods-img0

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.
event-tracking-methods-img1

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

event-tracking-methods-img2

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

event-tracking-methods-img3

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:
event-tracking-methods-img4

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.
event-tracking-methods-img5

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

❓ Note that you want to be as specific as possible so you don’t accidentally track unwanted activity on the page, while also making sure you don’t miss out on clicks that don’t match your exact selector. This usually happens when elements are nested inside other elements, for example a button that contains a separate class for its outer border. The best way to mitigate this is to use the Inspect tool to make sure your selector covers the entire clickable span. Then enter that selector along with a wildcard for its descendants. This will ensure that it’s tracked whether you click it on the outer rim or within the element.

STEP 7: FINISH POPULATING THE TRIGGER

Finish populating the trigger with Click Element matches CSS Selector .navigation *
event-tracking-methods-img6

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.

Comments:3

  1. Hi Ana,
    Thank you very much for all the useful information.
    Can you help me with one detail? I want t know about “Then enter that selector along with a wildcard for its descendants. ” What is a wildcard? How can I do that?

    Thanks again

    1. Hey Fernando, good question. By wildcard I mean an asterisk *. So if you wanted to track an elements with class = “navigation”, you would set up a trigger of Click Element matches CSS Selector .navigation *. I’ll update the post to make that more clear.

Leave a Reply

Your email address will not be published.