Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to measure a time spent on a page?

I would like to measure a time (in seconds in integers or minutes in floats) a user spends on a page. I know there is an unload event which I can trigger when they leave the page. But how to get a time they have already spent there?

like image 502
Richard Knop Avatar asked Jan 12 '11 09:01

Richard Knop


People also ask

How do you calculate average time spent on a page?

Average Time on Page: Average Time on Page is calculated as the total time on page, divided by the total number of pageviews minus the number of exits.

How does Google Analytics measure time spent on page?

Google Analytics tracks time on page and time on site by measuring the difference between the timestamps of hits. If the visit is a bounce (that is, the visitor leaves after viewing just one page), no time will be recorded.


2 Answers

The accepted answer is good, but (as an alternative) 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 ignore times that a user switches to different tabs, goes idle, minimizes the browser, etc. The Google Analytics method suggested in the accepted answer 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.

Edit: I have updated the example to include the current API usage.

Edit 2: Updating domain where project is hosted

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

An example of its usage:

Include in your page:

<!-- Download library from https://github.com/jasonzissman/TimeMe.js/ --> <script src="timeme.js"></script> <script type="text/javascript"> TimeMe.initialize({     currentPageName: "home-page", // page name     idleTimeoutInSeconds: 15 // time before user considered idle }); </script> 

If you want to report the times yourself to your backend:

xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","ENTER_URL_HERE",true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds(); xmlhttp.send(timeSpentOnPage); 

TimeMe.js also supports sending timing data via websockets, so you don't have to try to force a full http request into the document.onbeforeunload event.

like image 115
jason.zissman Avatar answered Sep 28 '22 03:09

jason.zissman


If you use Google Analytics, they provide this statistic, though I am unsure exactly how they get it.

If you want to roll your own, you'll need to have some AJAX request that gets sent to your server for logging.

jQuery has a .unload(...) method you can use like:

$(document).ready(function() {
  var start = new Date();

  $(window).unload(function() {
      var end = new Date();
      $.ajax({ 
        url: "log.php",
        data: {'timeSpent': end - start},
        async: false
      })
   });
});

See more here: http://api.jquery.com/unload/

The only caveat here is that it uses javascript's beforeunload event, which doesn't always fire with enough time to make an AJAX request like this, so reasonably you will lose alot of data.

Another method would be to periodically poll the server with some type of "STILL HERE" message that can be processed more consistently, but obviously way more costly.

like image 40
Kevin Dolan Avatar answered Sep 28 '22 04:09

Kevin Dolan