DomLip DomLip - 2 years ago 98
Javascript Question

jQuery: Log all page interaction

I am looking to build an in-house debugging system so we can see how users react to certain things.

What would be the best way to communicate all mouse clicks, moves, etc. back to the server?

One way I've thought of is to run a bind on

body
for everything and then just add it to an array which is sent at page unload, but I figured this could seriously kill a browser if the user has decided to click everything in sight or has sat there in work for 4 hours just moving his mouse on the page.

Ideally I want to avoid web sockets.

I'm sure this has been done before so I'd love to know how it's been done.

Thanks

Answer Source

For those of you wondering, I used the answer found here (How do you log all events fired by an element in jQuery?)

as a wrapper, with a combination of @hallleron's approach - storing the values in a string separated by | firing off AJAX queries every 3.5 seconds, then setting the array back to null. On page unload, the AJAX query fires one final time.

I'm also considering making the unload script dynamically create an iFrame with (again) a dynamically generated form and contents which auto posts the contents, just in case the AJAX hangs for whatever reason.

All array strings use their own CSRF token and have a randomly generated ID for the client side which is then hashed on the server side and is used to check if that has already been sent, just to stop any possible double AJAX requests.

On the server side, it is stored using ARCHIVE Engine Type and also INSERT DELAYED Insert method.

Eventually I'll probably move the logging system to its own EC2/RDS group.

The reasoning behind all this is to be able to see the most popular features of the website, who is clicking where (say if there's 2 home buttons, which one is more popular, etc.)

Hope this helps anyone else stuck in this predicament.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download