Free tools Windows power users keep installed
One-click scans. No signup required.
To track clicks and display them as a clickmap, capture selected click coordinates in the browser, send them to a PHP endpoint, validate and store only the fields you need, then draw aggregated records over the matching page layout. jQuery’s .on("click", handler) can capture a click, and event.pageX and event.pageY provide document-relative coordinates. The rest—endpoint security, storage, aggregation, and map rendering—is an implementation you must design for your site.
Choose what a clickmap should measure
Decide whether you need clicks on specific controls or clicks anywhere on a page. Measuring selected elements produces records with clearer meaning, such as clicks on a navigation link or call-to-action. A page-wide handler captures more behavior, but also requires you to decide which clicks are useful and which should be discarded. In either case, avoid collecting form contents, account details, or other sensitive values.
A coordinate is interpretable only alongside its page context and the rendering assumptions used to display it. Store a page identifier or normalized path, the coordinate representation, and only the additional context required for your analysis. Treat the schema and overlay design as choices for your application; jQuery does not prescribe them.
Capture clicks with jQuery
jQuery documents the click event as occurring when a pointer button is pressed and released with the pointer inside the target element. Bind it with .on("click", handler). Use a direct handler when the measured elements already exist, or delegated handling when matching elements may be added later.
#1 Best Overall
Track selected elements
$(document).on("click", "[data-track-click]", function (event) {
const payload = {
page: window.location.pathname,
x: event.pageX,
y: event.pageY,
target: this.dataset.trackClick || ""
};
fetch("/click-event.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
keepalive: true
}).catch(function () {
// Click tracking is optional; do not interrupt the user's action.
});
});Mark only the elements you want to measure, for example with data-track-click="signup-button". The delegated selector is evaluated against clicks that bubble to document; if you bind directly, attach the handler to the measured elements instead. The example sends the current page path, document-relative coordinates, and a short semantic label. Omit the label if it is unnecessary, and do not substitute raw element text or form values.
pageX and pageY are coordinates relative to the document, so scrolling does not convert them into viewport coordinates. They are useful when the map is reconstructed in the same document coordinate system. See the jQuery mousemove event API for the coordinate properties and its warning about high-frequency movement events.
Rank #2
Page-wide capture
If you intentionally need all page clicks, bind to document and remove the selector argument. Then filter out clicks that do not answer your question, and ensure the endpoint accepts only the data you expect. Page-wide collection can capture interactions across the entire interface, so use it only when that scope is justified and clearly communicated.
Send records to PHP and validate them
The browser is not a trusted source: a visitor can modify or forge a request. The PHP endpoint should validate every field, constrain lengths and numeric ranges, and reject malformed or unexpected input. Use server-side rules appropriate to your application and its database; the example below illustrates the shape of a receiver, not a complete production security configuration.
<?php
header('Content-Type: application/json; charset=utf-8');
$raw = file_get_contents('php://input');
$data = json_decode($raw, true);
if (!is_array($data)) {
http_response_code(400);
echo json_encode(['ok' => false]);
exit;
}
$page = $data['page'] ?? null;
$x = $data['x'] ?? null;
$y = $data['y'] ?? null;
$target = $data['target'] ?? '';
if (!is_string($page) || strlen($page) > 500 ||
!is_numeric($x) || !is_numeric($y) ||
!is_string($target) || strlen($target) > 100) {
http_response_code(400);
echo json_encode(['ok' => false]);
exit;
}
$x = (float) $x;
$y = (float) $y;
if ($x < 0 || $y < 0 || $x > 100000 || $y > 100000) {
http_response_code(400);
echo json_encode(['ok' => false]);
exit;
}
// Persist validated, minimized fields using your application's
// parameterized database layer and retention policy.
echo json_encode(['ok' => true]);Replace the persistence comment with your application’s database layer, using parameterized statements rather than building SQL from request strings. Add appropriate abuse controls and operational error handling. Keep the response small; click tracking should not block or disrupt the interaction being measured.
Choose coordinates that can be rendered meaningfully
Document-relative coordinates are straightforward to capture with pageX and pageY, but an absolute pixel position is tied to a particular document layout. If content height, fonts, responsive breakpoints, or page structure change, older points can land in the wrong place when drawn over the current page.
Rank #4
- Document coordinates: store the captured
xandyvalues and render against a page with matching dimensions and layout. - Element-relative coordinates: associate a click with a stable, non-sensitive element identifier and position within that element. This requires additional browser-side calculations and a rendering scheme you define.
- Versioned page context: distinguish materially different page layouts or content versions so records from one version are not misleadingly overlaid on another.
These are design alternatives rather than a prescribed clickmap format. The right choice depends on whether your goal is a visual overview of a fixed page or comparisons that must survive layout changes.
Aggregate records and display the clickmap
A clickmap should generally display an aggregate, not expose an individual visitor’s click history. Query records for the page and layout version being viewed, group or plot their positions, and render a visual layer above the corresponding content. Keep the overlay separate from interactive page elements so it does not intercept clicks when visitors use the live page.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →For a simple point map, draw a marker for each stored point or combine nearby points into a density layer. Normalize coordinates only if the transformation is defined consistently at capture and display time; otherwise, resizing or a different viewport can distort the apparent pattern. For responsive pages, keep records separated by relevant layout conditions or map them through stable elements instead of treating one desktop coordinate set as universal.
Filter or aggregate data before exposing it to an administrative view, restrict access to that view, and avoid publishing raw click records. The specific database schema, access model, and heatmap algorithm depend on your application and are not defined by jQuery’s event API.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Keep collection limited, secure, and transparent
Click coordinates and page context are behavioral data. Collect only what is needed for a stated purpose, explain that purpose clearly, delete the data when it is no longer needed, and protect it in transit and storage. MDN’s Privacy on the web guidance covers these general practices; it is not a complete legal determination. Check the rules that apply where your site operates.
Use HTTPS, restrict access to stored records and map views, set a retention period, and avoid identifiers unless your analysis genuinely requires them. Do not assume that removing a name makes every record anonymous: a detailed click trail may still reveal behavior you did not intend to collect.
Why not track pointer movement?
A clickmap records discrete click events. Continuous pointer movement is a different, much higher-volume signal and is not necessary to answer where visitors click. jQuery’s mousemove documentation warns that the event can fire for every pixel and generate hundreds of events in a short time, potentially draining performance. Do not add movement collection casually; if it is essential, measure its impact and minimize or sample the data deliberately.
Quick Recap
Implementation checklist
- Define the pages, elements, and analysis purpose before collecting events.
- Capture click events with jQuery’s
.on("click", handler)and usepageX/pageYfor document-relative positions. - Include enough page and layout context to interpret a point later, but no unnecessary identifiers or sensitive values.
- Validate and constrain every request field in PHP before persistence.
- Aggregate records and render them only over a compatible page layout.
- Communicate the collection, secure records, and delete them when they are no longer needed.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
