Simplifying Custom Events for Google Analytics using Google Tag Manager

I am relatively new to using Google Tag Manager (GTM), and I am trying to figure out the best way to log Custom Events from a single page app built with React.  I want these events to register in Google Analytics (GA) which I have set up already in Google Tag Manager.  The kinds of events I'm planning to record are user account creation, email validation, user sign in, user sign out, and various other interactions within the application. It looks like there are various ways to trigger events based on form submissions using Google Tag Manager, but I thought it would just be simpler to manually "invoke" each event I want exactly where I want it via the GTM API.

Searching the web, this was the most useful tutorial I found: Google Tag Manager Custom Event Trigger Explained by Julius Fedorovicius.  I made a spreadsheet for my app to capture all the custom events I am interested in.  There were 26 of them.  As I followed the tutorial, I noticed the following things I would need to do:

• Create and push various Variables into the GTM Data Layer to use them in my event labels and values.
• Create a new GTM Trigger for each of the 26 custom events from my spreadsheet
• Create a new GTM GA Tag and associate the corresponding trigger for each of the 26 custom events from my spreadsheet

This seemed like a lot of work and maintenance within GTM.  I wondered if there was an easier way.  Since it is possible to define the event's Category, Action, Label, and Value using variables from the Data Layer, I realized that should be able to handle all of my 26 events with just 1 new GTM Tag and Trigger along with a reusable set of custom Variables.  Here's how I set it up:

Step 1: Create Data Layer Variables for each possible GA Event field

This will be used for all the possible event fields Category, Action, Label (optional), and Value (optional) to be captured from the Data Layer.

Step 2: Create a Custom Event Trigger

This is meant to be generic so it can be used for any Custom Event.

Step 3: Create a Custom Event Tag and Associate with Custom Event Trigger

This Google Analytics tag will be triggered by the Custom Events.  Each attribute of the GA tag (Category, Action, Label, and Value) should be configured to come from the corresponding Data Layer Variable that was created in Step 1.  This is what allows the same Trigger and Tag to be used for all Events.  That's the whole set up!

The list of Tags now only includes one Tag for Custom Events instead of one for each Custom Event.  The tag list should look something like this:

Pushing Events to Google Tag Manager

Now within the application, Custom Events can be pushed to Google Tag Manager's Data Layer and the Trigger that was set up will push them into Google Analytics.  The code would look something like this:

<script>
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'Custom Event',
 'eventCategory': 'My Event Category',
 'eventAction': 'My Event Action',
 'eventLabel': 'My Event Label',
 'eventValue': 0
 });
</script>

Final Thoughts

Perhaps the downside of this approach is that it may be harder to adapt these events to other analytics tags I may use in the future.  Maybe that is why Julius Fedorovicius's post referenced above suggested creating a new Trigger and Tag for each individual event.  I was thinking about trying out Mixpanel next, so I will soon find out.  For all you Google Tag Manager and Google Analytics Experts out there, please let me know your thoughts.