CODEWITHSUNDEEP
javascriptanalytics
Marc
Marc

Reputation: 3902

How to capture visitor time on page

I would like to keep track of how long visitors spend reading a page. If they tab away, or minimize the window, time should not count towards the time on page until they look at the tab again.

I assume some combination of javascript and server side work will be necessary.

A couple of issues I'm struggling with:

  1. What's the best way to store this information in the database?
  2. How do I, with Javascript, capture the time on page with a reasonable degree of accuracy? Do I store events like "page loaded", "user idle", "user returned", "page unloaded", and then separately process all the events in the DB to come up with a time on page?

Upvotes: 0

Views: 3243

Answers (2)

jason.zissman
jason.zissman

Reputation: 2800

I've put some work into a small JavaScript library that times how long a user is on a web page. It has the added benefit of more accurately (not perfectly, though) tracking how long a user is actually interacting with the page. It ignores time that a user switches to different tabs, goes idle, minimizes the browser, etc. The Google Analytics method suggested has the shortcoming (as I understand it) that it only checks when a new request is handled by your domain. It compares the previous request time against the new request time, and calls that the 'time spent on your web page'. It doesn't actually know if someone is viewing your page, has minimized the browser, has switched tabs to 3 different web pages since last loading your page, etc.

https://github.com/jasonzissman/TimeMe.js

An example of its usage:

On loading your page:

document.onload = function() {
  TimeMe.setIdleDurationInSeconds(30);
  TimeMe.setCurrentPageName("my-home-page");
  TimeMe.initialize();  
}

Retrieving time spent on the page, and sending it to your server when the user leaves your page:

window.onbeforeunload = function (event) {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST","ENTER_URL_HERE",false);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds();
    xmlhttp.send(timeSpentOnPage);
};

Upvotes: 4

georgedyer
georgedyer

Reputation: 2745

First, you need to detect when a user has moved away from a tab or is inactive. When this happens, start a timer, when they come back, stop the timer. Counting time with setTimeout/setInterval can be innacurate because of blocking, so I made myself an accurate javascript timer based on the actual difference in datetime: https://gist.github.com/4600726

So your code would look something like this:

timer = new Timer;

window.addEventListener('focus', function() {
    timer.start();
}, false);

window.addEventListener('blur', function() {
    timer.stop();
    // send timer.msecs() to the server maybe??
    // if so, also call timer.reset();
}, false);

window.addEventListener('beforeunload', function() {
    timer.stop();
    // send timer.msecs() to the server via jquery post, or better yet websocket
}, false);

Then you can get the elapsed time with timer.secs(). I guess it depends on your preference how often you want to send info to the server. You could do it on blur.

Another option could be to decree that no mouseover means inactivity. Start the timer and then do a setTimeout, then on the window's mousemove event cancel the setTimeout and start another setTimeout , after which you stop the timer.

As far as sending data to the server, I'd probably opt for sending it on blur and of course beforeunload. My preferred method would be with socket.io since it is fast and always connected, so you could use it to track lots of user events in real time, but you could just to an ajax call to your server. If you just send them as mini user sessions, { user: userId, page: pageId, elapsedTime: msecs } then you could then aggregate the data on the server end when you are doing analysis.

Upvotes: 0

Related Questions