Saving the click data

Someone has visited a page on which our heat map client script is running, they've clicked around, and our script so far has recorded each of those clicks. Now what? Now we need a way of transmitting that information to the server for permanent storage and display in the management console. This is what we'll look at in this task.

Engage Thrusters

We can ensure that any captured clicks are sent to the server for permanent storage using the following code, which should be added after the imagesLoaded()callback function:

window.onbeforeunload = function () {

    $.ajax({
        async: false,
        type: "POST",
        contentType: "application/json",
        url: "/heat-map.asmx/saveClicks",
        dataType: "json",
        data: JSON.stringify({ clicks: clicks })
    });
}

Objective Complete - Mini Debriefing

We attached a handler for the beforeunload event to the window object in order to post the data to the server before leaving the page. Unfortunately, this event...