Google Tag Manage (GTM) has been a godsend for digital marketers and analytics gurus alike. Its easy-to-use interface and out-of-the box components allow for much needed flexibility, more control, and loads of time-savers.
Here is a great way to make a sustainable system for creating and tracking custom events on your site(s).
Create the trigger event that google will look for when adding tracking to the data layer. This will essentially be used for an event listener.Trigger Name = GA gaTriggerEvent
Evnet Name = gaTriggerEventCreate the Variables that will store the date you want to send with each event.
Event Action
Variable Name = GA gaEventAction
(The Action we will be tracking for the event i.e. “click”)
Data Layer Variable Name = gaEventAction
Data Layer Version = Version 2
Event Category
Variable Name = GA gaEventCategory
(The Category we will bucket the event into i.e. “Timer”)
Data Layer Variable Name = gaEventCategory
Data Layer Version = Version 2
Event Label
Variable Name = GA gaEventLabel
(The Label we will assign to the event to identify it i.e. “casual reader”)
Data Layer Variable Name = gaEventLabel
Data Layer Version = Version 2
Event Value
Variable Name = GA gaEventValue
(The Value we will be assigning to the event i.e. “1”)
Data Layer Variable Name = gaEventValue
Data Layer Version = Version 2
Set Default Value = “1”
(This will make sure a value is set if this variable is not included as a general counter)Create the Tag that will associate the fields to and fire the Google Universal Tracking Events.
Choose Product
Google Analytics
Choose a Tag Type
Universal Analytics
Configure Tag
Tracking ID = “your GA tracking number”
Track Type = Event
Category = {{GA gaEventCategory}}
Action = {{GA gaEventAction}}
Label = {{GA gaEventLabel}}
Value = {{GA gaEventValue}}
Advance Settings > Tag firing options = Unlimited
Fire On
More > Then Select = GA gaTrigerEventNow that Google Tag Manager is watching for the Event Triggers and Values when the Events are fired you can add code to your site to Trigger the Events.
There are 3 easy ways to do this.
- JavaScript or jQuery dataLayer push
- onClick event for links <a></a>
- onLoad events for image <img>
The “gaEventValue” value is optional and can send other values other then numbers. However if you do not include this value it will default to “1”
<html>
<script type="text/javascript">
dataLayer.push({
'event':'gaTriggerEvent',
'gaEventCategory':'banner',
'gaEventAction':'impression',
'gaEventLabel':'name of the ad',
'gaEventValue':1 // This can be left out and a default set in Tag Manager
});
</script>
<!-- link example -->
<a href="//zamartz.com#somelink" onClick="dataLayer.push({'event':'gaTriggerEvent','gaEventCategory':'link','gaEventAction':'click','gaEventLabel':'#somelink','gaEventValue':1});"></a>
<!-- image example -->
<script type="text/javascript"> dataLayer.push({ 'event':'gaTriggerEvent', 'gaEventCategory':'banner', 'gaEventAction':'impression', 'gaEventLabel':'name of the ad', 'gaEventValue':1 // This can be left out and a default set in Tag Manager }); </script> <!-- link example --> <a href="//zamartz.com#somelink" onClick="dataLayer.push({'event':'gaTriggerEvent','gaEventCategory':'link','gaEventAction':'click','gaEventLabel':'#somelink','gaEventValue':1});"></a>
</html>