GTM Google Universal Analytics Custom Event Tracking

2016.01.09

Home > Articles > GTM Google Universal Analytics Custom Event Tracking

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.

  1. JavaScript or jQuery dataLayer push
  2. onClick event for links <a></a>
  3. 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>

Personalize Posts