When working with a client to implement a measurement plan in Google Tag Manager (GTM), I often need to set up multiple events to capture different user interactions.
These can range from ecommerce (e.g. Add to Cart) or user engagement (e.g. Form Submissions).
To simplify the setup, I usually create a generic set of a Custom Event and Data Layer Variables that can be reused across any event I want to track. This also enables me to add additional events down the line without altering the current GTM setup.
Let’s break it down
Custom event
The first step is creating a Custom Event that will be used as a Trigger. I like to name this event ‘ga_event’ as I mostly use it for Google Analytics events, but it can be named anything you like. The important thing is to be consistent in its naming across whichever events you trigger.
To create the trigger, navigate to the Triggers page in GTM and click “New.
Select the trigger type is ‘Custom Event’ and set the Event name to ‘ga_event’. The trigger should fire on all custom events.
Data Layer Variables
To hold the data of the event, I like to use GA’s event data hierarchy:
- Event Category
- Event Action
- Event Label
To pass the data I create three Data Layer Variables (DLV). To create the DLVs, navigate to the Variables page in GTM and under the User-Defined Variables click New.
Select the variable type is ‘Data Layer Variable’ and set the Data Layer Variable name to ‘eventCategory’. Save the variable and repeat for eventAction and eventLabel.
The reason for writing ‘eventCategory’ instead of ‘event category’ is simply because of standard JS naming conventions. It will work just as well written in either form.
Creating a generic Google Analytics event
Now that we have the Custom Event and DLVs ready, we can create our generic Google Analytics event.
Navigate to the Tags page in GTM and click New. Select the Tag Type ‘Google Analytics: Universal Analytics’ and set the Track Type to ‘Event’.
You can now add the DLVs you created in their relevant slots, eventCategory to Event Category and so forth.
Make sure you add Google Analytics Settings to the tag.
Now that the tag is set up, you can select a trigger that will fire it. Click on the Triggering section and select the Custom Event you created.
And that’s it, your event is ready to fire.
Triggering the generic event
To trigger the event, you need to run the following script on the user interaction you want to capture.
The value of ‘event’ should always be ‘ga_event’ (as this is the name of the Custom Event). The value of the DLVs can change according to the data you want to pass.
dataLayer.push({
'event' : 'ga_event',
'eventCategory' : eventCategory,
'eventAction' : eventAction,
'eventLabel' : eventLabel
}); Form submission tracking
In this example, I want to send form submission data, so the event’s category is form submission and the event action will carry the form’s name.
dataLayer.push({
'event' : 'ga_event',
'eventCategory' : 'form submission',
'eventAction' : 'contact us',
'eventLabel' : ''
}); About the Author
3 Responses
Leave a Reply
Hola, is there an option that the GTM is blind to the GA events.
Hi Yishai
GTM can indeed “miss out” on GA events that are hardcoded into the site, if that’s what you mean.
This generally considered a bad practice, to split the events between GTM/hardcoded.
Hi Elad Levy,
I having facing issues with tracking with HubSpot from in GTM. I Google it I found this site I implemented like this but I have tracked a few & a few are not tracked.
So I contacted Elad Leavy through some SM channels he immediately replies to me about what is wrong I did & correct my mistake(s).
Now I am able tracking perfectly
Thank you Very Much Elad Leavy, Great Support & help
Regards,
Ravindra