Screentime.js – a small js tool for on-screen time monitoring

When it comes to Website Analytics, the first things that we think about are terms like “PageViews”, “Visits”, “Clicks”, etc. Thanks to consolidated tools like Google Analytics, we are able to monitor the user behaviour in loads of different ways.

ScreenTime.Js is a small library (only 6kb) that will help us in monitoring the user behaviour in a proficient way. How? Screentime (ST hereinafter) will help us monitor the exact time that a user spends in a specific area of our page (let’s think about a One Page Website with 4 section blocks: Home, Services, Contacts and Portfolio). Thanks to ST we’ll be able to monitor the exact amount of seconds that the user spends on each one of this section, and send a GA event to Google Analytics or more scalable data to a backend like KEEN.IO.

ST is very easy to implement, you just need to include it before the end of your <body> section and add the following code snippet:

Once you have implemented this code snippet, ST will start sending a report to your Google Analytics backend (every 10 seconds, but this parameter can be configured by adding the reportInterval option in your code) with the time (in seconds) that has spent on each area of your page. Cool, isn’t it?

What you’ll see in the GA backend (under Behavior – Events) is something like this:

Google Analytics Event Overview

Google Analytics Event OverviewClick on “ScreenTime”, then “Event Label” and the following screen will show up:

ScreenTime Event RiepilogueScreenTime Event Riepilogue

In the example, there are 236 Total events. The Highlighted section “Avg. Value” shows (as you have already guessed) the average time that the users have spent on the sections (technically it monitors the time spent on the specific selector we have defined above) of our one page website.

Screentime is available at this link

The official page contains all the options that can be configured, like a specific callback that is useful in case we want a scalable data collection (GA has its limits, of course).

I hope you found this simple tutorial useful and easy-to-read. Feel free to drop a comment below in case you might need any help.