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

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 Shoulders Composition doesn’t happen in a vacuum. Bach wa

Learning Prolog

I'm not quite sure exactly I was searching for, but somehow I serendipitously stumbled upon the site learnprolognow.org a few months ago. It's the home for an introductory Prolog programming course. Logic programming offers an interesting way to think about your problems; I've been doing so much procedural and object-oriented programming in the past decade that it really took effort to think at a higher level! I found the most interesting features to be definite clause grammars (DCG), and unification. Difference lists are very powerful and Prolog's DCG syntax makes it easy to work with them. Specifying a grammar such as: s(s(NP,VP)) --> np(NP,X,Y,subject), vp(VP,X,Y). np(np(DET,NBAR,PP),X,Y,_) --> det(DET,X), nbar(NBAR,X,Y), pp(PP). np(np(DET,NBAR),X,Y,_) --> det(DET,X), nbar(NBAR,X,Y). np(np(PRO),X,Y,Z) --> pro(PRO,X,Y,Z). vp(vp(V),X,Y) --> v(V,X,Y). vp(vp(V,NP),X,Y) --> v(V,X,Y), np(NP,_,_,object). nbar(nbar(JP),X,3) --> jp(JP,X). pp(pp(PREP,N

What's Wrong with OOP

Proponents of Object Oriented Programming feel the paradigm yields code that is better organized, easier to understand and maintain, and reusable. They view procedural programming code as unwieldy spaghetti and embrace OO-centric design patterns as the "right way" to do things. They argue objects are easier to grasp because they model how we view the world. If the popularity of languages like Java and C# is any indication, they may be right. But after almost 20 years of OOP in the mainstream, there's still a large portion of programmers who resist it. If objects truly model the way people think of things in the real world, then why do people have a hard time understanding and working in OOP? I suspect the problem might be the focus on objects instead of actions. If I may quote from Steve Yegge's Execution in the Kingdom of Nouns : Verbs in Javaland are responsible for all the work, but as they are held in contempt by all, no Verb is ever permitted to wander about