HTML5 + JS: Tracking user interaction [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

What would be a good way to track user interaction on a website. And then I mean capturing everything like:

• Scrolling
• Clicking
• Moving the cursor
• Emitting input

Of course with a lot of HTTP post/get request it could be displeasing for the user. I'm looking for a way to do this without annoying the user and without much loss of data.

I hope someone has some experience with this!

Answer 1

Disclaimer: Spying on your users like that is frowned upon by many users and I would recommend against doing this without having your users know exactly what you are doing.

That being said, you can add event listeners to events you want to monitor. Then just store them locally first and only store them on your server side at given intervals or when the users leaves the page. Here is a quick example (Fiddle: http://jsfiddle.net/8ucSV/):

var Spy = (function (register, undefined) {
    var eventStore = [],
        // you can also add other things like "mousemove" here…
        events = ['click'];

    var store = function (type, data) {
        eventStore.push({
            type: type,
            data: data
        });
    };

    events.forEach(function (event) {
        register(event, function (data) {
            store(event, data);
        }, false);
    });

    return {
        dump: function () {
            console.log(eventStore);
        },

        store: function () {
            // do whatever you wanna do here…
        }
    };
})(document.addEventListener);

Obviously you can add more abstraction to monitor things other than events that you can register via addEventListener. I also didn't really care too much about browser compatibility here.