This page is an example of how to generate Click Maps
A Click Map is a heat map of mouse clicks on a web page. Whenever a user clicks on the page an event is triggered, this click's x & y coordinates are logged to a database.
This database of x & y coordinates can later be used to generate a heatmap of the page, showing where the most number of clicks have occurred.
This paragraph contains a number of links. Clicking one should log it's x & y coordinate to the mySQL database.
Show Click Map booklet (drag and drop to toolbar)
Prototype JavaScript class, by Adam Burmister
A Click Map can be thought of as heatmap of mouse clicks on a web page. Whenever a user clicks on the page an event is triggered, this click's x & y coordinates are logged to a database.
This collection of click coordinates can later be used to generate an image, displaying the most active regions of a web page.
Although there are a number of paid and even free services like this around, Adam Burmister has decided to create and release an open source implementation in the hopes of improving the functionality and performance of his original script.
The Flog click map script is designed to be as easy to use as possible.
All you need to do is include the JavaScript link's in the page head, and then create a new instance of the Flog.ClickMap class, passing in the URL to the Click map folder on your server (e.g. http://yourwebsite/click map/) and the HTML element you want to monitor clicks for (such as a #wrapper div, or body tag).
This work is licenced under the Creative Commons Attribution-ShareAlike 2.5 License. To view a copy of this licence, visit http://creativecommons.org/licenses/by-sa/2.5/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
head contents
<!-- Prototype library & DOMReady addon -->
<script type="text/javascript" src="http://yourwebsite/click map/js/prototype-1.4.0/dist/prototype.js"></script>
<script type="text/javascript" src="http://yourwebsite/click map/js/domready.js"></script>
<!-- Flog Click map prototype class -->
<script type="text/javascript" src="http://yourwebsite/click map/js/flogclickmap-prototype.js"></script>
<script type="text/javascript">
/* Create a new click map to watch the wrapper div */
var myClickMap;
Event.onDOMReady(
function() {
myClickMap = new Flog.ClickMap($('wrapper'),'http://yourwebsite/click map/php/backend.php');
}
)
</script>
A bookmarklet is a handy toolbar bookmark that runs a snippet of JavaScript. They are quite handy little things to have, for instance in this case, you can generate a bookmarklet to show a click map — something only accessible to people with the required bookmarklet.
You can generate a custom bookmarklet by filling out the form below with the values that you've used for your implementation.