I recently began allergy shots so my new Monday morning routine includes me sitting in a doctor's office for 30 minutes (I must wait after receiving the shots and be checked by a nurse to make sure there was no reaction). With nothing else better to do while I waited last week, I started playing around with some JavaScript. This is what I came up with:
Essentially the code watches your mouse movements and can play them back for you. A callback function is attached to the window object's onmousemove event to obtain the coordinates of the cursor (mX and mY), and a callback is attached to the onscroll event to obtain the scroll position of the window (sX and sY). To record the input, a simple function is called every 200 milliseconds to push the coordinate values onto a queue. Playback is done by reading from the queue and positioning a sprite and scrolling the window accordingly.
So what's the practical value of this, you may ask? Probably not much beyond spying.
Right from the early days of the commercial Internet, your online activity has been tracked and analyzed. Unfortunately (or fortunately, depending on your perspective) efforts over the years have increased the amount of data that can be collected and improved its accuracy. Gone are the days of relying solely on httpd access logs; today there is Google Analytics, evercookies, and even HBGary's Aaron Barr's social mapping scheme. We are being watched in more ways than we can imagine.
I showed the code to several friends and the consensus was the same. If there was any practical value at all to it, most likely that would be tracking. It's a trivial exercise to adapt it so the coordinates are posted back to the server for storage in a database. Once there, all sorts of analysis could be performed on them. Perhaps a heat map could be constructed to see which products on an e-commerce catalog page shoppers thought about clicking on. Marketers could then fine-tune their images and layout to increase conversion.
I don't have any intention of working on this code anymore; it's served its purpose for me as a brief diversion. The questions I've begun to ponder as a result of it though will endure longer than 20 minutes. Is this sort of tracking already in use, and if so then by whom? I'm not the first to play with this. What would be an easy way to thwart such tracking? Such tracking would probably happen unknowingly and it'd be unlikely there would be any opt-out. Where does one draw the ethical line between tracking and spying? It's understandable someone would want to get a better understanding of how their site is being used, but watching mouse movements seems kind of creepy.
So what are your thoughts? Leave your comments below and let me know what you think.
UPDATE 6/5/2011: I've uploaded this code to my JavaScript Experiments repository at GitHub if anyone is interested in playing around with it.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
window.onload = function () {
var mX = 0, mY = 0,
sX = 0, sY = 0,
queue = [],
interval = 200,
recIntv = null,
playIntv = null,
b = document.body,
de = document.documentElement,
cursor = document.getElementById("cursor"),
record = document.getElementById("record"),
play = document.getElementById("play");
window.onmousemove = function (e) {
e = e || window.event;
if (e.pageX || e.pageY) {
mX = e.pageX;
mY = e.pageY;
} else {
mX = e.clientX + (de.scrollLeft || b.scrollLeft) -
(de.clientLeft || 0);
mY = e.clientY + (de.scrollTop || b.scrollTop) -
(de.clientTop || 0);
}
};
window.onscroll = function () {
if (window.pageXOffset || window.pageYOffset) {
sX = window.pageXOffset;
sY = window.pageYOffset;
} else {
sX = de.scrollLeft || b.scrollLeft;
sY = de.scrollTop || b.scrollTop;
}
};
record.onclick = function () {
if (recIntv === null) {
queue.length = 0;
recIntv = setInterval(function () {
queue.push([mX, mY, sX, sY]);
}, interval);
this.innerHTML = "Stop";
cursor.style.display = "none";
play.disabled = true;
} else {
this.innerHTML = "Record";
clearInterval(recIntv);
recIntv = null;
play.disabled = false;
}
};
play.onclick = function () {
var i = 0;
if (playIntv === null) {
cursor.style.display = "inherit";
play.disabled = record.disabled = true;
playIntv = setInterval(function () {
if (i < queue.length) {
cursor.style.left = queue[i][0] + "px";
cursor.style.top = queue[i][1] + "px";
window.scrollTo(queue[i][2], queue[i][3]);
i++;
} else {
clearInterval(playIntv);
playIntv = null;
play.disabled = record.disabled = false;
}
}, interval);
}
};
};
</script>
</head>
<body>
<p>Press Record to track mouse movements and scrolling.
Press Play to view.</p>
<button id="record">Record</button>
<button id="play" disabled="disabled">Play</button>
<img id="cursor" src="cursor.png"
style="position:absolute; display:none;"/>
</body>
</html>Essentially the code watches your mouse movements and can play them back for you. A callback function is attached to the window object's onmousemove event to obtain the coordinates of the cursor (mX and mY), and a callback is attached to the onscroll event to obtain the scroll position of the window (sX and sY). To record the input, a simple function is called every 200 milliseconds to push the coordinate values onto a queue. Playback is done by reading from the queue and positioning a sprite and scrolling the window accordingly.
So what's the practical value of this, you may ask? Probably not much beyond spying.
Right from the early days of the commercial Internet, your online activity has been tracked and analyzed. Unfortunately (or fortunately, depending on your perspective) efforts over the years have increased the amount of data that can be collected and improved its accuracy. Gone are the days of relying solely on httpd access logs; today there is Google Analytics, evercookies, and even HBGary's Aaron Barr's social mapping scheme. We are being watched in more ways than we can imagine.
I showed the code to several friends and the consensus was the same. If there was any practical value at all to it, most likely that would be tracking. It's a trivial exercise to adapt it so the coordinates are posted back to the server for storage in a database. Once there, all sorts of analysis could be performed on them. Perhaps a heat map could be constructed to see which products on an e-commerce catalog page shoppers thought about clicking on. Marketers could then fine-tune their images and layout to increase conversion.
I don't have any intention of working on this code anymore; it's served its purpose for me as a brief diversion. The questions I've begun to ponder as a result of it though will endure longer than 20 minutes. Is this sort of tracking already in use, and if so then by whom? I'm not the first to play with this. What would be an easy way to thwart such tracking? Such tracking would probably happen unknowingly and it'd be unlikely there would be any opt-out. Where does one draw the ethical line between tracking and spying? It's understandable someone would want to get a better understanding of how their site is being used, but watching mouse movements seems kind of creepy.
So what are your thoughts? Leave your comments below and let me know what you think.
UPDATE 6/5/2011: I've uploaded this code to my JavaScript Experiments repository at GitHub if anyone is interested in playing around with it.
Nice code. I read a paper about Microsoft tracking cursor movements to improve search: http://jeffhuang.com/Final_CursorBehavior_CHI11.pdf
ReplyDeleteBut it doesn't seem like they've deployed it. I looked at the network traffic when I visit Bing and it sends some data back to their servers but not my mouse movements
I could see some applications to an A|B test suite! How's that for creepy..?
ReplyDeleteWell Done ;-D