Track button and link clicks on your website, free

You track button and link clicks in Clicktag by calling window.tt_event(name, metadata) inside a JavaScript click listener. Clicktag's latest.js script is about 4 KB compressed and records pageviews and single-page app navigation automatically, but it does not record clicks, outbound links, file downloads or form submissions on its own. You add a short tt_event call for the interactions you want to count, then turn any event name into a goal to measure conversion rate by source.

Why you choose which clicks to track

Recording every click on a page creates noise in your reports. Clicktag serves neither /auto.js nor /auto-events.js, and it has no heatmaps or session recordings.

Instead, you pick the buttons and links that matter to your site and send a custom event when a visitor interacts with them. Event names can be up to 256 characters long, and optional metadata payloads can be up to 4,096 characters of serialized JSON.

If you want to fire click events before latest.js finishes loading, place the asynchronous buffer queue in your HTML head above the script tag from Site settings > Installation:

<script>
  window.tt_event =
    window.tt_event ||
    function () {
      window.tt_event.q.push(Array.from(arguments));
    };
  window.tt_event.q = window.tt_event.q || [];
</script>
<script
  async
  src="https://clicktag.io/latest.js"
  data-hostname="example.com"
></script>

Always use standard function () syntax in that queue snippet rather than an arrow function so that arguments is captured properly. When latest.js loads, it checks for the q array and replays any queued click events in order.

Track a single button click

To track a specific call-to-action button, attach a standard DOM click listener to the element and call window.tt_event with a lowercase snake_case name.

<button id="upgrade-btn">Upgrade Plan</button>

<script>
  document.getElementById("upgrade-btn").addEventListener("click", function () {
    if (typeof window.tt_event === "function") {
      window.tt_event("upgrade_clicked", { tier: "pro", period: "annual" });
    }
  });
</script>

Clicktag normalizes incoming event names automatically. Any sequence of non-alphanumeric characters is converted to an underscore, and leading or trailing underscores are stripped.

Event metadata is stored with the event, but it cannot be grouped or filtered in reports or the API, so put any detail you want to compare into the event name itself.

For example, if you want to compare clicks on a monthly plan button against an annual plan button in your dashboard, send upgrade_clicked_monthly and upgrade_clicked_annual as separate event names rather than hiding the billing period inside the metadata object. See the custom events documentation for full naming rules and TypeScript definitions.

Track outbound link clicks with one listener

You do not need to attach an individual listener to every external link on your site. A single delegated listener on document can catch clicks on any anchor tag pointing to an external hostname and pass the event to window.tt_event.

document.addEventListener("click", function (event) {
  var link = event.target.closest("a[href]");
  if (!link) return;

  var url;
  try {
    url = new URL(link.href, window.location.href);
  } catch (e) {
    return;
  }

  if (url.hostname && url.hostname !== window.location.hostname) {
    if (typeof window.tt_event === "function") {
      window.tt_event("outbound_link_clicked", { destination: url.hostname });
    }
  }
});

If you want to see which specific external domain gets the most clicks right in the events report, include the hostname in the event name, such as "outbound_" + url.hostname. The collector converts dots and hyphens in the hostname into underscores automatically, turning outbound_github.com into outbound_github_com.

Count form submissions instead of submit button clicks

When a visitor clicks a submit button inside a form, the form might fail browser validation because a required email field is empty or formatted wrong. Tracking the click on the button itself counts failed attempts alongside real submissions.

Attach your listener to the form's submit event instead of the button's click event, or fire window.tt_event("lead_form_submitted") inside your form handler after validation succeeds:

window.tt_event("lead_form_submitted", { source: "nav" }, function () {
  console.log("Event dispatch finished");
});

You can also record completed signups and form submissions from your backend with a POST request to https://clicktag.io/events without an API key. Note that server-side events get an identity built from your server's IP address rather than the visitor's, so browser events are better when you want to connect the action to the visitor's referrer or entry page.

Suggested event names for click tracking

Because Clicktag aggregates events by their normalized name, clear naming keeps your reports easy to scan. This table shows how to name common click interactions so you can compare them in reports and goals:

If you track PDF, ZIP or DMG links the same way, see download tracking for file-specific patterns.

Turn click events into goals and compare sources

Once your site sends click events, you can turn them into goals or multi-step funnels in the dashboard. Each site supports up to 50 goals and funnels combined.

1. Open your site in Clicktag, choose the Goals tab and click New goal.
2. Pick Event as the match type and enter your exact event name, such as upgrade_clicked.
3. Add up to 6 optional filters on the step to narrow it by page, source, country, device, browser, OS, or UTM source, medium and campaign.
4. Save the goal. Goals are computed at query time from the data you already collect, so a newly created goal includes past data right away.

Clicking a saved goal breaks down its visitors, converted visitors and conversion rate (converted visitors divided by visitors, never above 100%) by referrer, entry page, country, device, browser, OS or UTM parameter. That makes goal tracking a direct way to see whether visitors from chatgpt.com click your signup button at a higher rate than visitors from google.com.

You can also chain 2 to 6 steps completed in order on the same UTC day using funnel analytics. For example, set step 1 to a pageview on /pricing and step 2 to the event upgrade_clicked to see the drop-off and the median and 90th percentile time to convert between viewing the page and clicking the button. Full API details are in the goals documentation.

FAQ

Does Clicktag track button and link clicks automatically?

No. latest.js tracks pageviews and single-page app navigation automatically, but it does not record button clicks, outbound link clicks, file downloads or form submissions on its own. Clicktag does not serve /auto.js or /auto-events.js, so you add an explicit window.tt_event call for the elements you want to track.

Can I filter or group click events by metadata in the dashboard?

No. While window.tt_event accepts a metadata object of up to 4,096 characters of serialized JSON, Clicktag does not support filtering or grouping by custom metadata in reports or the API. Put any value you need to compare or turn into a goal directly into the event name, which can be up to 256 characters.

Does the tt_event callback guarantee the click was saved?

No. The optional callback function runs when the /simple.gif network request loads or fails, or immediately when an invalid event name is passed, and a name that is empty after normalization (such as "!!!") sends nothing and never runs the callback. Do not gate critical navigation or application logic on the callback alone.

Do server-side events work in click funnels and referrer breakdowns?

No. Events sent from a backend via POST /events receive a visitor identity built from your server's IP address rather than the visitor's browser request. Because of that, server-side events cannot follow a visitor's pageviews in a funnel or inherit their referrer and entry page; trigger the event in the browser with window.tt_event when you need source attribution.

Does Clicktag include click heatmaps or session recordings?

No. Clicktag is a lightweight web and API analytics tool that sets no cookies and never stores IP addresses. It does not offer click heatmaps or session recordings.