Heat Map on different screen resolution using jquery

0
votes

I read Chris Coyier article ( http://css-tricks.com/tracking-clicks-building-a-clickmap-with-php-and-jquery/ ) . It shows how to track user clicks through out a page , save it to a database and later build a heat map out of it.

No problems with that it works fine with a fix screen resolution but the moment i resize the window if fails.

Let's say i want to track clicks for my entire website , what will happen between different screen resolutions , so let's say a user is on 1024×768 screen resolution , the other one from desktop again is on 1024×640 and one more from a mobile phone.

At last i am looking at my website report using a totally different screen resolution let's say 1280×720. Isn't it going to create a mess.

Would love to hear if there is any fix on it or not ?

1
jqueryheatmap
Maybe detect size with jQuery and then send the results to a different database table/section for that specific screen size? - ayyp
do you think is it going to be an effective way because there are lot of screen resolutions and also some users have habit to resize browser size. - Aman Virk
You could restrict it to a range then. But if you want the most accurate reading, that would be the way. - ayyp
Use percentages over fixed pixel positions for multiple screen resolutions. If you're using media queries though, and your layout changes, this won't work. Maybe also save the screen resolution to the database as well? The majority of users will not resize the page after load. - ahren
yeah there will be a problem with media queries, because they are tend to adjust elements depending upon page sizes... really a problem, their are all sort of weird people on this planet, every one have their preferences, and till now i believe 50% reports are going to be true only - Aman Virk

1 Answers

0
votes

You could implement this with a particular fixed resolution (say 1024 x 768 ). If the window is resized, you would then need to recalculate the width and the height, and then try and 'scale' the clciked position back to your fixed 1024 x 768 design. This will not be 100% accurate, but it will give you decent results.