Riveted
A Google Analytics plugin for measuring active time on site
Google Analytics does a lot of things really well but the way it measures visit duration—by calculating the time difference between pageviews—provides only a partial view of how much time is actually spent on site.
Riveted helps fix this by measuring the amount of time users are actively engaged (e.g., clicking, scrolling, using the keyboard) and then reporting the data to Google Analytics in frequent intervals.
It supports Universal Analytics, Classic Google Analytics, and Google Tag Manager. It can also be used with any analytics tool that supports events, e.g. Mixpanel or Keen.io.
Details
The plugin listens for mouse movements, clicks, scrolling, and keyboard activity to define an active user. It also checks whether the tab is currently visible.
Every 5 seconds it check if the user is active and pings Google Analytics. If the user goes 30 seconds without registering an action the user is considered idle.
You'll find the data in the dashboard under Events > Riveted. Each Event Label represents a duration of seconds. The Event Value shows the total number of seconds. Giving each tick of the clock its own label like this allows you to use Advanced Segments to create segments based on engagement time.
The first interaction also triggers a User Timing Event, which allows you to measure the number of milliseconds from the pageload to the user's first action.
Here's a blog post with tips on how to use the data Riveted collects.
Depending on your volume of traffic you may need to increase the reporting interval (see Google's collection quotas).
Using it
After your Google Analytics tracking code, load the script and call the riveted.init() function, like this:
<script src="riveted.min.js"></script>
<script>riveted.init();</script>
Plugin options
reportInterval
This number, in seconds, determines both the increment of reporting and the frequency of pinging. The default is 5 seconds.
idleTimeout
This number determines how long a user can go without triggering an event before we consider them inactive. The default is 30 seconds.
nonInteraction
By default, GA Events are sent with the Non-interaction option set to true. This keeps the event from impacting the bounce rate and visit duration. Caution: If you set this to false, the bounce rate will drop to near zero and the visit duration may leap. Make sure you know what you're doing before using this option.
gaGlobal
If you're using Universal Analytics this lets you set a custom name for the GA global object. You may need this option if you're using Yoast's analytics plugin, which changes the GA global name to __gaTracker.
gaTracker
If you're using Universal Analytics and tracking multiple properties on the same page, this option lets you specify which property Riveted should send data to.
// Example with options
riveted.init({
reportInterval: 10, // Default: 5
idleTimeout: 20, // Default: 30
nonInteraction: true // Default: true
});Non-Google Analytics Use
With a simple callback you can use Riveted with any analytics service that supports events.
eventHandler
The eventHandler callback receives one argument, which is the current tally of engaged time, in seconds. This fires at whatever interval is specified in the reportInterval option. Note: this option is not yet available in the WordPress plugin.
// Example using Keen.io
riveted.init({
eventHandler: function(data) {
Keen.addEvent("Riveted", data);
}
});userTimingHandler
There's also a custom event handler for the timing event. This fires only once and records the length of time (in milliseconds) from the initial page load to the first activity event.
Methods
There are some methods for interacting directly with the Riveted timer.
riveted.trigger()
Calling this method restarts the Idle timer. One use for this would be to keep the Riveted timer running while the user watches a video.
riveted.setIdle()
This method stops the timer and sets the user to the Idle state. Any user action will reactivate it.
riveted.reset()
This method resets the clock. This is useful for asynchronous page navigation where you want to reset the page context client-side.
riveted.off()
This method completely turns the plugin off.
riveted.on()
If you've turned off the plugin with the riveted.off() method, this method will turn it back on.
Google Tag Manager
If you want to integrate with Google Tag Manager, here are the dataLayer variable names:
- Riveted Event Name = Riveted
- Riveted Timing Event Name = RivetedTiming
- Event Category = {{eventCategory}}
- Event Action = {{eventAction}}
- Event Label = {{eventLabel}}
- Event Value = {{eventValue}}
- Event Non-Interaction = {{eventNonInteraction}}
Browser Support
Tested in latest versions of Chrome, Firefox, Safari, and Opera. Internet Explorer 8-11. iOS and Android.