Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

Tracking Mouse Position and Window Size via JS

Posted by bcmoney on April 7, 2009 in HTML, JavaScript with 2 Comments


No Gravatar
An example of mouse pointer trails.

Image via Wikipedia

The following is a useful little script I’ve found myself digging up repeatedly these days while doing some early UI testing on my teacher-student Medical E-Learning portal project. Tracking a user’s mouse position over time is mostly fancy fluff, but in some cases it could generate useful data, which could be utilized to fill analytics charts to supplement server logs and other statistics, ala OWA, for performing in-depth Web Analytics on how users interact with your system.

The code for tracking your cursor is surprisingly easy, with a quick check for support of the window.event, and some alternatives for older or more basic browsers like IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Screen-resize Updater + Mouse Position Tracker [widget]	
	<link type="text/css" rel="stylesheet" href="style.css" media="screen" />	
</head>
<body>
	<div id="page">
		<div id="header">
			<h1>WARNING: Your Cursor Movement now being tracked!</h1>
		</div>
		<div id="menu">
			Window width: <div id="w"></div>
			Window height: <div id="h"></div>
			Window X-position: <div id="x"></div>
			Window Y-position: <div id="y"></div>
		</div>
		<div id="content">
			<img src="" />
		</div>
		<div id="footer">
			CC 3.0: BY-SA
		</div>
	</div>
		<script type="text/javascript">
	window.onload = (function(e) {
		if (window.Event) {
			document.captureEvents(Event.MOUSEMOVE);
		}
		document.onmousemove = (function(e) { 
				document.getElementById("x").innerHTML = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
				document.getElementById("y").innerHTML = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
		});
	});
	window.onresize = function(resize) {
		document.getElementById("w").innerHTML = document.documentElement.clientWidth;
		document.getElementById("h").innerHTML = document.documentElement.clientHeight;	
	}
	</script>
</body>
</html>


– or –

As you can see, the code to accomplish this is not too complicated, and we don’t even need to rely on an onload attribute on the <body> or anything silly like that to get it working.

The only parts worth explaining in more detail are the capture of the mouse movement event:

document.captureEvents(Event.MOUSEMOVE);

As well as the X & Y cursor position:

//if window.Event is supported, use a good browser's native X page position, otherwise do some IE hacking to estimate the position relative to left edge of browser (body opening)
(window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 

//if window.Event is supported, use a good browser's native Y page position, otherwise do some IE hacking to estimate the position relative to top edge of browser window (body opening)
document.getElementById("y").innerHTML = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

That’s about all there is to it, enjoy! But remember, with great power comes great responsibility; use the tracking features wisely and always keep people’s personal security and privacy above short-term profit motives or temptation towards laziness, users will thank you in the long run.

  1. Willian TanejaDecember 27, 2011 - 1:16 pm #1

    Nice article, if only all blog owners supplied the same quality content as you, blogs might be more effective destination for learning.

    Reply
  2. handmadeDecember 28, 2011 - 7:54 pm #2

    This really is quite good stuff. Thank you for all the passion to share this helpful information.

    Reply
Leave a Reply to handmade
Click here to cancel reply.

No trackbacks yet.

No post with similar tags yet.

Posts in similar categories

BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:

1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.

2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.

3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.

  • Archives