ga-rm.js Easy to implement Form Analysis plus Click- & Scrolltracking for Google Analytics
Implementation
Simply add ga-rm.js to your Source Code and it automatically starts tracking User Interaction Time with Forms Fields plus Scroll Depth Tracking in Google Analytics on all pages of your domain:
<script src="ga-rm.js"></script><script>$.ga_rm();</script>
No further Setup / Configuration needed. (Dependencies: Google Analytics & jQuery)
In addition, you can easily implement Click- and Scrolltracking for Custom Elements in Google Analytics like DIVs, Links or Call-to-Action-Buttons by adding the according HTML-Classes as outlined below.
Default Tracking Options
Per default, ga-rm.js tracks the User Interaction Time for Form Analysis of the following Elements (in seconds):
- Select Dropdowns, Range Slider, Checkboxes, Radio Buttons, Input Labels (start: mouseenter | stop: mouseleave change)
- Textareas, Inpout Text Fields, Input Password Fields, Date Pickers and all other HTML5 Input Types (start: focusin keypress | stop: blur)
The default Scroll Tracking area is the document's body height (tracked from 1-100%).
Custom Initialisation
You can Switch off/on the Default Tracking Options and Set the Minimum Interaction Time from when an Element gets tracked:
form:0 - Default Form Analysis (bool: 0 off / 1 on | default: 1)
scroll:0 - Default Scroll Tracking (bool: 0 off / 1 on | default: 1)
min_itime:10 - Min. Interaction Time from when Element gets tracked (integer: in Seconds > 0 | default: 0.1)
example: <script src="ga-rm.js"></script><script>$.ga_rm({form:0, scroll:0, min_itime:10});</script>
Tracking Reference in Google Analytics
In Form Analysis / User Interaction Time Tracking, the Element's ID is used as Tracking Reference in Google Analytics (Event Label). If there is no ID, the Name-Attribute is used as Tracking Reference instead. If there is no Name-Attribute either, no tracking will take place.
The time a user is hovering an Input Label will be counted at the Field with the according ID. For example:
<label for="pwd">Password:</label> <input type="password" id="pwd"> (label tracked as "pwd" in Google Analytics)
In Custom Tracking with HTML-Classes (below), please always use a unique ID for each Element (just Custom User Interaction Time Tracking works with Name-Attributes as Tracking References too).
Custom User Interaction Time Tracking (seconds)
Activate User Interaction Time Tacking to a Custom Element/DOM simply by adding class="ga-rm-hover" (start: mouseenter | stop: mouseleave change) OR class="ga-rm-focus" (start: focusin keypress | stop: blur) to the Element/DOM like Adspace- or Teaser-DIVs on your website. For example:
<div id="mydiv" class="ga-rm-hover"></div>
not (yet): <div id="mydiv" class="ga-rm-hover ga-rm-focus"></div>
Custom Click Tracking / Time on Page until Click (seconds)
Activate Click Tracking (Time on Page until Click) in Google Analytics by adding class="ga-rm-click" to the Element/DOM like a Call-to-Action-Button or Download-Links. For example:
<div id="mydiv" class="ga-rm-click"></div>
Custom Scroll Tracking / Scroll Depth (percentage)
Activate Custom Scroll Depth Tracking in Google Analytics by adding class="ga-rm-scroll" to the Element/DOM like your Content-Container. For example:
<div id="mydiv" class="ga-rm-scroll"></div>
Note: The value returned by class="ga-rm-scroll" can be negative if the element wasn't in the user's viewport at all. This helps in optimisation. Because looking at an average scroll depth of -12% (for example), will tell you immediately that you may want to place the element (at least) 12% higher on the page, if it is important for your project or business. If you want to receive just values from Scrolling inside an Element (1-100%), use class="ga-rm-scroll-in" to get the In-Element Scroll Depth Percentage in Google Analytics.
Custom Scroll Tracking / Time until Scroll Depth (seconds)
Activate Custom Time until Scroll Depth Tracking in Google Analytics by adding class="ga-rm-scroll-top" OR/AND class="ga-rm-scroll-bottom" to the Element/DOM like your Content-Container or Call-to-Action to find out how long it takes that a user scrolls until its top or bottom position. For example:
<div id="mydiv" class="ga-rm-scroll-top"></div>
or: <div id="mydiv" class="ga-rm-scroll-top ga-rm-scroll-bottom"></div>
Combine Tracking Methods
You can easily Combine Custom Tracking Methods by adding all the according classes to the Element/DOM:
<div id="mydiv" class="ga-rm-hover ga-rm-scroll-top ga-rm-scroll-bottom ga-rm-click"></div>
Test your Tracking
The best way to test your new tracking is via the Event-Section of the Real Time Report in your Google Analytics Account.
Google Analytics Hit Limits
The design of ga-rm.js reduces the number of event hits to a minimum. Even though, in Large Scale Enterprise Tracking and being aware of Google's Data collection limit, you may use this script just within your most important funnels / switch off default tracking / set a minimum interaction time unless you are on Google Analytics 360.
TO DO: Custom Scroll Tracking / Visible Time (coming soon)
Track for how long an Element/DOM was visible in a user's browser simply by adding class="ga-rm-scroll-visible" to the Element/DOM like a Content-Container with an important Call-to-Action. For example:
<div id="mydiv" class="ga-rm-scroll-visible"></div>
Further:
- Add "no interaction" init option (until min_time_on_page)
- Add generic "time on page" tracker (init option) for a more accurate Bounce Rate tracking in Google Analytics
- Add class="ga-rm-form" to re-activate form analysis comfortably for all fields of an entire form element in case the default tracking has been switched off
Copyright (C) 2017 Robert Matthees
GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007