Can I find out how much time a user spent on a page?

Question

Say I have a browser extension that launches JS pages that the user visits.

Is there an "outLoad" event or something similar to start counting and see how much time the user spent on the page?

Answer 1

I assume that your user opens a tab, browses some web page, then goes to another web page, returns to the first tab, etc. You want to calculate the exact time spent by the user. Also note that the user can open the web page and save it, but just leave. Come back in an hour and then access the page again. You would not want to assume that it is located outside the computer, as the time spent on the web page. To do this, the following code checks the watch every 5 minutes. Thus, your actual time can be turned off for 5 minutes, but you can adjust the interval to check the focus according to your needs. Also note that the user can simply watch the video for more than 5 minutes, in which case the following code will not count this. You will need to run smart code that checks if flash is working or something like that.

Here is what I do in the content script (using jQuery):

$(window).on('unload', window_unfocused); $(window).on("focus", window_focused); $(window).on("blur", window_unfocused); setInterval(focus_check, 300 * 1000); var start_focus_time = undefined; var last_user_interaction = undefined; function focus_check() { if (start_focus_time != undefined) { var curr_time = new Date(); //Lets just put it for 4.5 minutes if((curr_time.getTime() - last_user_interaction.getTime()) > (270 * 1000)) { //No interaction in this tab for last 5 minutes. Probably idle. window_unfocused(); } } } function window_focused(eo) { last_user_interaction = new Date(); if (start_focus_time == undefined) { start_focus_time = new Date(); } } function window_unfocused(eo) { if (start_focus_time != undefined) { var stop_focus_time = new Date(); var total_focus_time = stop_focus_time.getTime() - start_focus_time.getTime(); start_focus_time = undefined; var message = {}; message.type = "time_spent"; message.domain = document.domain; message.time_spent = total_focus_time; chrome.extension.sendMessage("", message); } } 

Answer 2

onbeforeunload should match your request. It fires right before loading page resources (the page is closed).

Answer 3

 <script type="text/javascript"> function send_data(){ $.ajax({ url:'something.php', type:'POST', data:{data to send}, success:function(data){ //get your time in response here } }); } //insert this data in your data base and notice your timestamp window.onload=function(){ send_data(); } window.onbeforeunload=function(){ send_data(); } </script> 

Now calculate the difference in your time. You will get the time spent by the user on the page.

Answer 4

For those who are interested, I put some work into a small JavaScript library that increases the user’s interaction time with the web page. It has the added advantage of more accurately (not quite, though) tracking how long the user actually interacts with the page. It ignores the time when the user switches to different tabs, goes into standby mode, minimizes the browser, etc.

Edit: I updated the example to include current use of the API.

http://timemejs.com

An example of its use:

Include on your page:

 <script src="http://timemejs.com/timeme.min.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 time about yourself to your server:

 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 synchronization data via websockets, so you do not need to try to force a full HTTP request in the document.onbeforeunload event.

Answer 5

start_time is when the user first requests the page, and you get end_time , causing an ajax notification on the server before the user leaves the page:

 window.onbeforeunload = function () { // Ajax request to record the page leaving event. $.ajax({ url: "im_leaving.aspx", cache: false }); }; 

you should also save a user session for users who have long stayed on the same page ( keep_alive.aspx may be a blank page):

 var iconn = self.setInterval( function () { $.ajax({ url: "keep_alive.aspx", cache: false }); } ,300000 ); 

then you can spend additional time on the site by checking (each time the user leaves the page) if he goes to an external page / domain.

Answer 6

Repeating this question, I know that this will not help much in Chrome Ext env, but you can just open a websock that does nothing but ping every 1 second, and then when the user finishes, you know the accuracy of 1 second, how much they spent time on the site, since the connection will die, and you can escape as you wish.

Answer 7

Try active-timeout.js . It uses the visibility API to check when the user has switched to another tab, or minimized the browser window.

With it, you can configure the counter, which works until the predicate function returns a false value:

 ActiveTimeout.count(function (time) { // `time` holds the active time passed up to this point. return true; // runs indefinitely });