Skip to main content

Creepy JavaScript Tracking

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:
<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.

Comments

  1. Nice code. I read a paper about Microsoft tracking cursor movements to improve search: http://jeffhuang.com/Final_CursorBehavior_CHI11.pdf

    But 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

    ReplyDelete
  2. I could see some applications to an A|B test suite! How's that for creepy..?

    Well Done ;-D

    ReplyDelete

Post a Comment

Popular posts from this blog

Geolocation Search

Services that allow users to identify nearby points of interest continue to grow in popularity. I'm sure we're all familiar with social websites that let you search for the profiles of people near a postal code, or mobile applications that use geolocation to identify Thai restaurants within walking distance. It's surprisingly simple to implement such functionality, and in this post I will discuss how to do so.

The first step is to obtain the latitude and longitude coordinates of any locations you want to make searchable. In the restaurant scenario, you'd want the latitude and longitude of each eatery. In the social website scenario, you'd want to obtain a list of postal codes with their centroid latitude and longitude.

In general, postal code-based geolocation is a bad idea; their boundaries rarely form simple polygons, the area they cover vary in size, and are subject to change based on the whims of the postal service. But many times we find ourselves stuck on a c…

Reading Unicode (UTF-8) in C

In working on scanner code for Kiwi I did a bit of reading up on Unicode. It's not really as difficult as one might think parsing UTF-8 character by character in C. In the end I opted to use ICU so I could take advantage of its character class functions instead of rolling my own, but the by-hand method I thought was still worth sharing. Functions like getc() read in a byte from an input stream. ASCII was the predominant encoding scheme and encoded characters in 7-8 bits, so reading a byte was effectively the same as reading a character. But you can only represent 255 characters using 8 bits, far too little to represent all the characters of the world's languages. The most common Unicode scheme is UTF-8, is a multi-byte encoding scheme capable of representing over 2 million characters using 4 bytes or less. The 128 characters of 7-bit ASCII encoding scheme are encoded the same, the most-significant bit is always 0. Other characters can be encoded as multiple bytes but the mo…

Composing Music with PHP

I’m not an expert on probability theory, artificial intelligence, and machine learning. And even my Music 201 class from years ago has been long forgotten. But if you’ll indulge me for the next 10 minutes, I think you’ll find that even just a little knowledge can yield impressive results if creatively woven together. I’d like to share with you how to teach PHP to compose music. Here’s an example: You’re looking at a melody generated by PHP. It’s not the most memorable, but it’s not unpleasant either. And surprisingly, the code to generate such sequences is rather brief. So what’s going on? The script calculates a probability map of melodic intervals and applies a Markov process to generate a new sequence. In friendlier terms, musical data is analyzed by a script to learn which intervals make up pleasing melodies. It then creates a new composition by selecting pitches based on the possibilities it’s observed. . Standing on ShouldersComposition doesn’t happen in a vacuum. Bach was f…