Capturing visitor clicks

In this task we need to build the part that captures any clicks that occur on the page. While the page is open we want to record information about the layout and the click itself.

Engage Thrusters

We can capture clicks and record the other information we want to store using the following code, which should be added directly after the ajax() method that we added to heat-map-client.js in the last task:

$.imagesLoaded(function() {

    doc.on("click.jqHeat", function (e) {

        var x = e.pageX,
              y = e.pageY,
             docWidth = doc.outerWidth(),
             docHeight = doc.outerHeight(),
             layout,
             click = {
                 url: url,
                 x: Math.ceil((x / docWidth) * 100),
                 y: Math.ceil((y / docHeight) * 100)
            };

        $.each(layouts, function (i, item) {

            var min = item.min || 0,
                  max = item.max || docWidth,
                  bp = i + 1;

            if...