Track events on all elements with Google Tag Manager

Box Tag Code
Requirements: Google Tag Manager, jQuery

[skill_bar heading=”Cyclomatic Complexity” percent=”80%” bar_text=”Javascript”]

This program is designed to monitor a users activity for events (var events) and on each event it tracks the users action then push the data to Google Analytics via Google Tag Manager.

The first issue with tracking elements within the DOM is element naming, most back-end element names are not user friendly and the report would require a developer to decode or a secret decoder ring. To work around this issue I have added an HTML5 data attribute that can be used to store easy to understand names, ‘ga-boxtag’.

The second issue is that not all DOM elements have the same attributes, or at lest not the same attributes I would like to track, therefore I have added a switch statement to look at the element tagName then based on the tagName it will create a label.

Data I am pushing to Google Analytics

  • Category : ‘Box Model Tags’  (a static string )
  • Action: Event Type ( one of var events )
  • Label : A bar | separated list of parent elements names with the HTML5 data attribute of ga-boxtag
  • Value : First it looks for the title attribute if null, it looks for an alt attribute if null then it will capture the src for images or the textNode for A elements.

Event Report in Google Analytics:

[image src=”http://jaminquimby.com/wp-content/uploads/2015/05/boxTagGAReport-1.png” alt=”Google Analytics Event Report Sample” type=”rounded, circle, thumbnail, lightbox” float=”left, right, none” link=”false” href=”#” title=”Google Analytics Event Report Sample” target=”blank” info=”Google Analytic Event Report, popover” info_place=”top, right, bottom, left” info_trigger=”hover, click, focus” info_content=”Google Analytics Event Report Sample” lightbox_thumb=”http://jaminquimby.com/wp-content/uploads/2015/05/boxTagGAReport-1-300×160.png” lightbox_video=”true” lightbox_caption=”This content will only show up if you use a lightbox”]

Google Tag Manager Setup
[tab_nav type=”three-up”]
[tab_nav_item title=”Tags” active=”true”]
[tab_nav_item title=”Triggers”]
[tab_nav_item title=”Variables”]
[/tab_nav]
[tabs]
[tab active=”true”] Name: Analytics – Box Tag Code
Product: Custom HTML Tag
Note: This function has been wrapped in a closure so it will not interfere with any other code on the site.

Configure Tag Code:


Name: Analytics – Box Tag Tracking
Product: Google Analytics
Choose a Tag Type: Universal Analaytics
Configure Tag:

  1. Tag Type: Universal Analytics
  2. Tracking ID: {{Google Analytics ID}}
  3. Track Type: Event
  4. Category: {{Box Tag Category}}
  5. Action: {{Box Tag Action}}
  6. Label: {{Box Tag Label}}
  7. Value: {{Box Tag Value}}

Fire On: Box Tag
[/tab]
[tab] Name: Box Tag

Choose Event: Custom Event

Fire On:

Event Name: boxTag
[/tab]
[tab]

Choose Type: Data Layer Variable

Data Layer Version: 1

 

Name: Box Tag Action

Data Layer Variable name: boxTagAction

 

Name: Box Tag Category

Data Layer Variable name: boxTagCategory

 

Name: Box Tag Label

Data Layer Variable name: boxTagLabel

 

Name: Box Tag Value

Data Layer Variable name: boxTagValue

Optional Variable:

One should already have a Google Analytics ID variable, Static Variable with your Google Analaytics Account Number [/tab]
[/tabs]

Comments

comments