Record and store mouse movements

Question

My requirements are that every time a user enters the page the mouse movements start to get recorded and once the user leaves the page, all the data (Coords x, y and time) gets sent to a server for later analysis.

You mean after the mouse leaves the actual browser page? You want to track the mouse outside of the browser? — Lix, Aug 12 '14 at 09:25
So once your website is closed you want to track the users mouse movements on other pages? — Lix, Aug 12 '14 at 09:30
When the user enters the website, it starts to track mouse movements, when the user leaves the website all the mouse movements get sent to the database for later analysis. Sorry for not making it clear enough. — Wolfgang, Aug 12 '14 at 09:31
Yes, there are ways to do this. No, this is not a question fit for Stack Overflow. [See the FAQ](http://stackoverflow.com/help/dont-ask). — Niels Keurentjes, Aug 12 '14 at 09:32
@Ellie - please can you paste your attempts to solve this in your post - as it currently stands, it just looks like you're asking people to do the work for you. — Lix, Aug 12 '14 at 09:33
@Ellie Look down. There's plenty of examples. Including my own. — Bradly Spicer, Aug 12 '14 at 09:59

score 12 · Accepted Answer · edited Dec 23 '18 at 15:51

12

unload()

Javascript:

document.onmousemove = function(e){
  var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
  console.log(pageCoords);
};

DEMO

Unload javascript:

window.onunload=function(){
  //SomeJavaScriptCode
};

jQuery:

var pageCoords = []; //array for storing coordinates
$(document).onmousemove = function(e){
  pageCoords.push("( " + e.pageX + ", " + e.pageY + " )");//get page coordinates and storing in array
}
$( window ).unload(function() {
  //make ajax call to save coordinates array to database
});

UPDATED DEMO

edited Dec 23 '18 at 15:51

cstayyab

318
2
20

answered Aug 12 '14 at 09:36

Manwal

23,450
12
63
93

This is not a solution to the question it's just the question itself transformed to pseudo code. – chm-software.com Aug 12 '14 at 09:41
`alert()` combined with `onmousemove` is the worst you could do here - I would downvote a second time if I only could. – chm-software.com Aug 12 '14 at 09:45
1

Your last edit improves your example but the use of jQuery was not necessarily intended by the OP and may cause confusion as well as it prevents him/her from learning real JavaScript. – chm-software.com Aug 12 '14 at 09:50
@chm-software.com see javascript also and answer updated – Manwal Aug 12 '14 at 09:57
2

Upvoted. Because people are pointlessly downvoting in this thread. – Bradly Spicer Aug 12 '14 at 10:00
I see your effort to improve your solution but it is far away from reaching the expectations of the OP as you miss the "harder" part of transferring the collected data to the server in an adequate way. – chm-software.com Aug 12 '14 at 10:17
Sending data using ajax is not harder for OP @chm-software.com. I have given my explanation. – Manwal Aug 12 '14 at 10:22
@bradly-spicer As you told us in another comment: upvoting means "this answer is useful" - it does not mean: "I don't like downvoting"... – chm-software.com Aug 12 '14 at 10:27
@Manwal I accept your justification and retire my downvote for your answer as the whole question is extremely vague. – chm-software.com Aug 12 '14 at 10:28
@chm-software.com He has supplied enough information to piece it together. OP has already stated they're going to be using MYSQL. So that's the PHP + MYSQL Query done. All we need to do is grab the mouse co-ords. Which Manwal posted... – Bradly Spicer Aug 12 '14 at 10:28

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

One but very bad way is tracking the location of the mouse and constantly placing the position into the mysql db

(function() {
    window.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        event = event || window.event; // IE-ism
        // event.clientX and event.clientY contain the mouse position
    }
})();

Have a read of this:

Determine mouse position outside of events (using jQuery)?

and this:

Javascript - Track mouse position

Once you have read them, you'l be able to see that data is being shown in your console. Now we need to send it from the console to PHP and then into mysql.

The following explains how: http://www.coderslexicon.com/the-basics-of-passing-values-from-javascript-to-php-and-back/

Lastly, I suggest reading up on:

http://php.net/manual/en/mysqli.query.php

Don't use MySQL queries. Use MySQLi as MySQL is deprecated.

edited May 23 '17 at 11:53

Community

1
1

answered Aug 12 '14 at 09:36

Bradly Spicer

2,278
5
24
34

Don't just copy code from other peoples answers. If this question is a duplicate and can be answered by other existing questions then just flag as a duplicate. – Lix Aug 12 '14 at 09:37
It looks like you are trying to gain rep from other peoples work. – Lix Aug 12 '14 at 09:37
3

@Lix Not really. I've explained HOW to do it in the line above and then I copied the one function that's neeeded instead of all the extra stuff and then given two different areas to READ. Not copy paste from. The point of voting is to show how USEFUL the post is. Hover over it. "This answer is useful" Which is it. Instead of not helping a user we should be signposting them. Part of a good education. Also, Stop backseat modding when you're multiple commenting. – Bradly Spicer Aug 12 '14 at 09:38

Record and store mouse movements

2 Answers2

UPDATED DEMO