how to know visitors is actually looking at the webpage and for how long?

Question

when the visitor goes to a webpage, how do we know the visitor is actually showing the page on top (instead of going to another tab or app already).

also how do we know how long the user has read the page or how long the page stayed open?

Answer 1

Google analytics is the best free analytics AFAIK. It shows you all you need.

Answer 2

Install a camera and time the video. :)

<rant>Frankly, why do you need to know? How long it takes me to understand what you write? How long I went to lunch? Is total surveillance of your visitors a Good Thing(tm)?

I already gave you my IP address and the fact that I did visit your page. Is the size and color of my underwear really that important?

As a web surfer, I hate web bugs, data collecting JavaScript and any kind of surveillance in general. If I don't want to give something to you, then don't try to steal it from me.

People all around the globe begin to understand how precious and endangered their privacy is. Criminals come up with more cunning and more devious ideas to abuse data that someone collected. Websites start to fall apart when I visit them without JavaScript. NoScript tells me "jdhsdg.com" wants to run some stuff in my browser. What should I do? Allow? Deny? What happened to good old honesty? What do the marketing guys have to hide that they use names like that?</rant>

[EDIT]

If you need to know whether your site is bad, call in people from the street and watch them (hence "Install a camera"). This way, you can ask them what they think, instead of guessing by watching what their mouse pointer does. Maybe their pet is playing with it?

Don't do this in the wild with unsuspecting victims. That will only make them mad when they find out and in the Internet, your reputation is the only thing with value.

[EDIT2] To improve a web site, use a usability lab. Guesswork with second-level artificial data, which has no fixed relation to what you want to measure, will deceive you. You can't tell what people on earth do by watching the lights during the night from the moon.

At least not unless you pull in lots of data. Google is able to tell what people are interested in by collecting huge amounts of data and search it for patterns. They do attach tokens to browsers to track what an individual does but for the analysis, they join the patterns of millions of individuals.

Also always remember that this data might be valuable to a criminal. The more valuable your data, the more energy they will invest in finding a way to make money from it. They could crack your famous site to distribute viruses, they could crack your server to encrypt your data and blackmail you for ransom, they could copy the data and sell it to a competitor, or they might use it for one of their own schemes.

The various criminal organizations around the globe make billions every year with Internet related crime.

From my point of you, you should really ask yourself: How much is this data worth? How accurate can it ever be? How much will it tell me and how risky is it to collect? How easy is it to fool my scheme? For example, I could create a script which hammers your service, telling it that I'm actively reading some of your pages for hours. Or I could disable JavaScript for your site, see that it doesn't work, and simply walk away, never coming back.

So far, you only asked what's in for you. Start thinking what's in for your customers and about the worst case scenarios.

Answer 3

Apart from GA,if you want detailed analytics to analyze how people browse your pages, how menus are traversed, areas users tend to focus and all things UED related like mouse heatmap, time spend etc , ClickTale is the one for you.

Understand that Google Analytics and ClickTale serve radically different purposes. The latter is for the frontend engineer and the other for the SEO or Product Manager

Preview from their blog:

_{(source: clicktale.com)}

Comes with a price though...

Answer 4

I use woopra for some time now at it is just great! Still beta and still free but works like a dream. Great managment tool!

http://www.woopra.com/

Answer 5

Open Source Google Analytics alternative: Piwik. Written in PHP, JS; runs on MySQL.

From their site:

Piwik is a downloadable, open source (GPL licensed) 
web analytics software program. 
It provides you with detailed reports on your website visitors: 
the search engines and keywords they used, 
the language they speak, your popular pages ...

Answer 6

On page load, save the current time in JavaScript, and on page unload (when the user closes his/her window) send an Ajax request to your server with the time minus the time that you recorded to get the duration. That would probably be your best bet. As for finding out if the window is on top, I don't think there is any reliable way of doing that.

Answer 7

i was thinking whether some websites use onmousemove or onscroll to call a function, and then every 1 minute, report the user activities back to the server using AJAX.

Answer 8

That's a good point Aaron. You can't avoid the web from becoming like the real world...intrusive (commercial phone calls and others statistic stuff)

Jian, you may be able to know such a thing by calling a timer each 4 or 5 seconds which calls a dynamic page with post or get fields that contain the guest IP, the page name, and the timestamp of the page onload event, and compare it to right now.

You also should have a look at push methods like comet
ajaxian.com/wp-content/images/comet.png

Answer 9

Here is a 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.

No solution is perfect. But hopefully this one provides value, too.

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);
};