What Website Click Tracking Records, and Which Clicks It Loses

What is click tracking on a website?

On a website, click tracking is the practice of recording which element a visitor clicked, on which page and at what moment, then sending that record to an analytics tool so clicks can be counted, compared and tied to conversions. A small script listens for the browser's click event, reads what was clicked, and sends a short payload to a collection endpoint. Track clicks on the elements that decide whether a visitor converts, such as the signup button, the pricing toggle and the checkout link, before tracking anything else.

Click tracking is the data layer underneath several reports that look different. A goal counts clicks on one button. A heatmap paints clicks by position. A funnel step can be a click. The method you pick decides which of those reports the data can feed.

What does a browser count as a click?

A browser fires a click event when a pointer button is pressed and released inside the same element, when a touch gesture lands on it, or when a keyboard user activates it, so one listener covers mouse, touch and keyboard. MDN's reference states that "click fires after both the mousedown and mouseup events have fired, in that order," and lists "a touch gesture" and "pressing the Space key or Enter key while the element is focused" as equivalents.

The keyboard rule has a catch that breaks tracking on custom controls. MDN notes the Enter and Space equivalence "only applies to elements with a default key event handler, and therefore, excludes other elements that have been made focusable by setting the tabindex attribute." A <div tabindex="0"> styled as a button receives no click from the keyboard, so keyboard users vanish from its click count. Use a real <button> or <a> for anything you plan to track.

The event also counts repeats. MDN says the detail property holds "the number of times the target was clicked," so it reads 2 for a double click and 3 for a triple click. That counter is the raw material for rage click detection.

What are the three ways to track clicks?

The three methods are a named event on chosen elements, one delegated listener that records every click on the page, and coordinate capture that stores where on the screen each click landed. Each one answers a different question and fails in a different way.

Named events are the method behind event tracking, where the event name carries the action and properties carry the detail. The delegated listener is what vendors call autocapture. Coordinate capture feeds the website heatmap, which aggregates positions from many visits into one picture. A practical split is named events for the handful of clicks that matter and session replay for the rest.

What should a click event record?

A click event should record the element's stable identifier, the page it happened on, the destination for links, and a timestamp, and nothing typed by the visitor. Those four fields answer "what, where, to where and when" without storing anything personal.

Leave out link text on pages that render account data, and never read values from nearby form fields, because a button labelled with a customer's name sends that name with every click. A dedicated data-track attribute is the safest identifier, since it only changes when someone changes it on purpose.

The listener below uses one handler for the whole document, filters to elements carrying data-track, and sends with navigator.sendBeacon():

document.addEventListener(
  'click',
  (event) => {
    const el = event.target.closest('[data-track]');
    if (!el) return;
    navigator.sendBeacon(
      '/collect',
      JSON.stringify({
        name: el.dataset.track,
        path: location.pathname,
        href: el.getAttribute('href'),
        clicks: event.detail,
        ts: Date.now(),
      }),
    );
  },
  { capture: true },
);

The capture: true option runs the handler on the way down the DOM, before any handler on the button itself. A component that calls event.stopPropagation() in its own click handler then cannot hide the click from the tracker.

Why do some tracked clicks never reach the report?

Clicks go missing when the page unloads before the request is sent, when a blocker drops the request, or when the clicked element never matched the listener. Links carry the extra risk of the first cause, because the click that starts a navigation is also the click that tears down the page sending it.

MDN describes the problem directly: "the browser may be about to unload the page, and in that case the browser may choose not to send asynchronous XMLHttpRequest requests." Its answer is navigator.sendBeacon(), which "asynchronously sends an HTTP POST request containing a small amount of data to a web server" and is built for this case. The sendBeacon vs fetch keepalive comparison covers the size limits and when fetch with keepalive: true fits better.

Work through the causes in this order when counts look low:

1. Compare against a known total. Clicks on a checkout button cannot exceed checkout pageviews. A ratio far below expectation points at loss, not low interest.
2. Test the link case. Click the element with the network panel open and "Preserve log" on. A request that shows as cancelled is the unload problem.
3. Test the keyboard. Tab to the element and press Enter. No event means a focusable div instead of a button.
4. Test with a blocker on. A request that disappears under a content blocker is lost for that share of visitors in every report.
5. Check the selector. A definition written against a class name stops matching after a redesign, and the count drops to zero without an error.

How does GA4 track clicks without extra code?

GA4 tracks two kinds of link click automatically through enhanced measurement: outbound clicks and file downloads, and it does not track clicks on buttons that stay on your own domain. Google's help centre says the click event fires "each time a user clicks a link that leads away from the current domain and to another website" and collects "link_classes, link_domain, link_id, link_url, outbound (boolean)." The file_download event fires "when a user clicks a link leading to a file (with a common file extension)."

Everything else, including the signup button and the pricing toggle, needs a custom event. The guides on how to track outbound links and file downloads cover the two automatic cases in detail.

What do click patterns reveal about broken pages?

Repeated clicks on one element and clicks that produce no response are the two patterns that point at a broken page instead of low interest. A rage click is a burst of clicks on the same element, and a dead click is a click after which nothing on the page changes. Both look like engagement in a raw click count, which is why a click report without session context overstates how well a page works. The rage clicks vs dead clicks guide lists the thresholds each vendor publishes.

Flowsery covers both halves of the job. Custom events track any interaction with a JavaScript API call, including button clicks, form submissions and file downloads, and goal tracking turns those events into conversion rates on the goal and event tracking page. Session recording replays cursor movement, clicks, scrolls and form input, and Flowsery's AI flags rage clicks, dead clicks and JavaScript errors in every recorded session, then groups them into issues ranked by how many sessions they affected. Tracking runs without cookies and without a consent banner.

Frequently asked questions

What is the difference between click tracking and a heatmap?

Click tracking is the collection of click records, and a heatmap is one way to display them. A click map aggregates the x and y positions of many clicks into a colored overlay on a page image. Named click events carry no position at all and feed goals and funnels instead.

Does click tracking count taps on mobile?

Yes. A touch gesture on an element fires the same click event as a mouse press and release, so one listener counts both. Mobile clicks need their own heatmap view, since coordinates shift with the narrower layout.

Why are my outbound link clicks undercounted?

The page starts unloading as soon as the visitor follows the link, and the browser can drop an ordinary request during unload. Sending the event with navigator.sendBeacon() or fetch with keepalive: true lets the request outlive the page. Content blockers remove a further share that no sending method recovers.

Should I track every click or only important ones?

Track the clicks tied to a conversion as named events, and leave the rest to session replay or a heatmap. Named events on every element produce a schema nobody maintains. A delegated listener on everything produces volume with selectors that break on the next redesign.

Does click tracking collect personal data?

A click record holds an element identifier, a page path and a timestamp, none of which identify a person. Personal data enters when the payload includes link text or form values that render a customer's details, or when clicks are joined to a persistent identifier. Send a fixed data-track value instead of visible text to keep the record anonymous.

Can GA4 track button clicks automatically?

No. GA4 enhanced measurement records clicks on links that leave your domain and on links to common file types. A button that stays on your own site needs a custom event sent with your own code or through a tag manager.

Why doesn't a <div tabindex="0"> register clicks from the keyboard?

MDN's keyboard equivalence for Enter and Space only applies to elements with a default key event handler, which excludes elements only made focusable with tabindex. A <div tabindex="0"> styled as a button never fires a click event when a keyboard user presses Enter or Space, so those users disappear from its click count. Use a real <button> or <a> for anything you plan to track.

What does the click event's detail property measure?

The detail property holds the number of times the target was clicked, so it reads 2 for a double click and 3 for a triple click. That counter is the raw material rage click detection runs on. A named event that also logs detail can flag repeated clicks on one element without any extra listener.

What is the difference between a rage click and a dead click?

A rage click is a burst of clicks on the same element, and a dead click is a click after which nothing on the page changes. Both look like engagement in a raw click count, so a click report without session context can read a broken page as a popular one.

What does the capture: true option do in a click listener?

It runs the tracking handler on the way down the DOM, before any click handler attached to the element itself. A component that calls event.stopPropagation() in its own handler still gets recorded, because the tracker already ran before that handler fired.