GA Event Tracking in GTM – Pass-Through Data Layer

This is the third post in a series on design patterns for tracking events in Google Analytics (GA) using Google Tag Manager (GTM). This third pattern is a developer-focused implementation pattern where your site developers push all the required information into a data layer. This method is sometimes referred to as a “pass through” method.

❓ GTM allows 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.

Below are the most common methods of collecting site interaction data using GTM to send event tracking data to GA.

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

Method 2: Custom HTML and JS Tags in GTM

Method 3 (this post): Developer Pushes to a Pass-Through Data Layer

Method 4: Combined Auto-Event & Data Layer

METHOD 3: DEVELOPER PUSHES TO A PASS-THROUGH DATA LAYER

Advantage: The advantage of this method is that developers have full control. There is virtually nothing that can’t be tracked, and the tracking shouldn’t break when the site design is updated, since it lives within the regular code base and goes through the regular development and testing cycle.  Further, it greatly simplifies setup in GTM; instead of requiring triggers for every action, you can get by with just a small number of generic tags, triggers, and variables. Finally, this pattern may be easier to implement if you already have on-page tracking, since you can just modify the existing syntax to make it work.

Disadvantage: This method removes most of the tagging benefits of GTM, such as the ability to maintain and test tracking code in a single place. It pushes control back to developers, potentially meaning long wait times and a lack of flexibility. Lunametrics posted a great discussion of the negatives of using this “pass through” method here: https://www.lunametrics.com/blog/2017/05/25/google-tag-manager-best-practice-avoid-pass-events/

This is a common method for large enterprises that prefer to implement analytics through their IT team.

IMPLEMENTATION STEPS OVERVIEW

  1. Have your developers push event information into the data layer using a generic syntax
  2. Create Variables with generic names like {{category}}, {{action}}, and {{label}}, and a Trigger that collect the information passed in from the data layer
  3. Create a new Universal Analytics tag in GTM with Track Type = Event.  Populate the Category, Action, and Label fields and set the trigger with the variables and trigger from step 2.

DETAILED IMPLEMENTATION EXAMPLE:

STEP 1: PUSH INFORMATION TO A DATA LAYER

In this method, your developers push information to a data layer using the following syntax:

So an example for a navigation bar click could be:

The event value ‘eventTracking’ will always remain the same, while the category, action, and label will be set depending on what you are tracking. As always, use a logical naming strategy. This data layer can then be read by GTM.

(This post provides some more examples of data layer pushes: GTM dataLayer.push Examples (Standard, Ecommerce, Advanced))

STEP 2: SET UP DATA LAYER VARIABLES IN GTM

For the next step, click Variables > User-Defined Variables > New >  Variable Type = Data Layer Variable.

Set up 3 separate Variables, one each for category, action, and label, each matching the key name that was pushed into the data layer in the first step.

gtm-developer-pushes-img1

STEP 3: CREATE AN EVENT TAG IN GTM

Use these variables to populate a generic event tag. Click Tags > New > Universal Analytics > Track Type = Event, and populate the event tracking parameters using the generic Data Layer variables created in step 2.

gtm-developer-pushes-img2

STEP 4: ADD A TRIGGER

Add a trigger by navigating to Triggers > New > Custom Event and choose the following:

  • Trigger Type: Other – Custom Event
  • Event Name: eventTracking
  • This Trigger Fires On: All Custom Events

gtm-developer-pushes-img3

STEP 5: COMPLETE THE TAG

The complete tag together should look like this:

gtm-developer-pushes-img4

CONCLUSION

Following this implementation, any time your site developers push an event named “eventTracking” into the data layer, all of its associated event information for category, action, and label will automatically populate the event tag and be sent to GA, without any additional work needed in GTM. You can basically set and forget GTM, as anything sent to the data layer by your developers will be automatically passed through and picked up by your generic GTM event tag.

Q: Which method do you use to track events with GTM? Leave a comment below!

Comments:8

  1. Best instructions I’ve ever seen. Straight to the point, simple and for some reasons noone else seems to be able to do this. Good job.

  2. Thank you very much for this post. I was used to the old way without GTM, of justing calling the ga(‘send’,’event’,’category’,’action’,’label’). I had to go through a lot of digging, before finally i found a good article on sending the event via javascript.

  3. I’m having a little trouble getting this to work and I’m not sure how I can go about debugging it. I think I’ve followed the directions in the article properly. It’s a little fuzzy to me how exactly GTM hears the event being fired. I put mine within a click event handler that simply pushed the values into the dataLayer object as you’ve outlined in the first step. Does GTM watch for changes to that object, or is there something else I need to do to make GTM pass the values?

    1. As long as the data layer push is correctly configured, GTM will automatically hear the event being fired. What happens when you open up GTM Preview mode? You should see the data layer pushes reflected in the left-hand panel. Please also remember that to actually use those values for GTM tags, you’ll need to set up triggers and variables to collect the information from the data layer.

Leave a Reply

Your email address will not be published.