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 Overview

Click 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 linkThe 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.

Categories

About the Author:

Lavora in ambito IT e Web da più di 10 anni. Ama tutto ciò che riguarda le nuove tecnologie, per questo non smette mai di impegnarsi al fine di accrescere le sue competenze. Appassionato di viaggi, insegue costantemente il suo sogno di vivere da nomade digitale. Si è trasferito a Dublino nel Dicembre 2012.

2 Comments
  1. Juan

    I find this tutorial very interesting. The reason I reply is that i dont agree with the avg time meaning. The way i see it, it reperesents the percent (in a 10 base way) that user spents in the selector and NOT the user avg time.

    Sorry for the mistake in the previous comment.

    • admin

      Hi Juan, thanks a lot for your feedback.

      In the tutorial, we mention that the Avg. Time indicator shows how much time the user spent on a specific section, due to the fact that we had set the selectors to reflect the section span. Basically, the actual code monitors the selectors as you said, but the Avg. Time shows the number of seconds (not the percentage, you can double check that in the official Screentime documentation) that the user spent on the specific selector. I have modified the paragraph to mention that technically it monitors the time spent on the selectors. Any questions, fire away!

One Ping
  1. […] 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 …  […]

Leave a Reply

%d bloggers like this: