[vc_row][vc_column][vc_column_text]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).
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Google Tag Manager (GTM) Setup” font_container=”tag:h2|text_align:left|color:%230099ff” use_theme_fonts=”yes”][/vc_column][/vc_row][vc_row][vc_column][vc_text_separator title=”Create Triggers” i_icon_fontawesome=”fa fa-external-link” i_color=”custom” i_background_style=”rounded-outline” i_background_color=”custom” i_size=”xs” title_align=”separator_align_left” align=”align_right” color=”custom” style=”dotted” add_icon=”true” i_custom_color=”#0099ff” i_custom_background_color=”#0099ff” accent_color=”#0099ff”][vc_column_text]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.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]Trigger Name = GA gaTriggerEvent
Evnet Name = gaTriggerEvent[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_single_image image=”6805″ img_size=”medium” add_caption=”yes” alignment=”center” onclick=”link_image” css_animation=”right-to-left”][/vc_column][/vc_row][vc_row][vc_column][vc_text_separator title=”Create Variables” i_icon_fontawesome=”fa fa-external-link” i_color=”custom” i_background_style=”rounded-outline” i_background_color=”custom” i_size=”xs” title_align=”separator_align_left” align=”align_right” color=”custom” style=”dotted” add_icon=”true” i_custom_color=”#0099ff” i_custom_background_color=”#0099ff” accent_color=”#0099ff”][vc_column_text]Create the Variables that will store the date you want to send with each event.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]
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)[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_gallery type=”image_grid” images=”6830,6831,6832,6833″ img_size=”medium”][/vc_column][/vc_row][vc_row][vc_column][vc_text_separator title=”Create Tag – Google Universal Analytics Event” i_icon_fontawesome=”fa fa-external-link” i_color=”custom” i_background_style=”rounded-outline” i_background_color=”custom” i_size=”xs” title_align=”separator_align_left” align=”align_right” color=”custom” style=”dotted” add_icon=”true” i_custom_color=”#0099ff” i_custom_background_color=”#0099ff” accent_color=”#0099ff”][vc_column_text]Create the Tag that will associate the fields to and fire the Google Universal Tracking Events.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]
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 gaTrigerEvent[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_gallery type=”image_grid” images=”6840,6839″ img_size=”medium”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”DataLater Tracking Event” font_container=”tag:h2|text_align:left|color:%230099ff” use_theme_fonts=”yes”][/vc_column][/vc_row][vc_row][vc_column][vc_text_separator title=”DataLayer Push Snippet” i_icon_fontawesome=”fa fa-code” i_color=”custom” i_background_style=”rounded-outline” i_background_color=”custom” i_size=”xs” title_align=”separator_align_left” align=”align_right” color=”custom” style=”dotted” add_icon=”true” i_custom_color=”#0099ff” i_custom_background_color=”#0099ff” accent_color=”#0099ff”][vc_column_text]Now 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>
[/vc_column_text][vc_message message_box_style=”outline”]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”[/vc_message]
<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>
[/vc_column][/vc_row][vc_row][vc_column][vc_text_separator title=”Related Links” i_icon_fontawesome=”fa fa-external-link” i_color=”custom” i_background_style=”rounded-outline” i_background_color=”custom” i_size=”xs” title_align=”separator_align_left” align=”align_right” color=”custom” style=”dotted” add_icon=”true” i_custom_color=”#0099ff” i_custom_background_color=”#0099ff” accent_color=”#0099ff”][vc_column_text]
[/vc_column_text][/vc_column][/vc_row]