agentlyticsby measuremy.site
agentlytics / Blog

Track Button Clicks Without Google Tag Manager

October 7, 2026 · 4 min read

A hand pointing at colorful charts with a laptop in the background on a desk.
Photo by Lukas Blazek on Pexels

Why skip Google Tag Manager

Google Tag Manager is a capable tool, but it is more than many small sites need. It adds a container script, a separate tag setup flow, and another place to debug when events do not fire. If your main goal is to know which buttons people click, a direct listener in your own code is easier to review and maintain.

Start with a data attribute

A stable naming convention keeps click tracking readable. Add a data attribute to each button or link you care about.

<button data-track-click="nav_signup">Sign up</button>

Then add one delegated listener near the end of your page or in your main JavaScript bundle.

document.addEventListener('click', function (event) {
  const element = event.target.closest('[data-track-click]');
  if (!element) return;

  const name = element.getAttribute('data-track-click');
  recordClick(name);
});

The listener catches clicks on the button itself or any child element. You do not need to attach a handler to every button.

Decide what to record

A click event is more useful with context. At minimum, record:

Avoid recording the button text or other visible content unless you have a specific reason. The event name should be enough to tell you what happened.

Send the click somewhere useful

Keep the sending logic in one function so you can change analytics providers later.

function recordClick(name) {
  console.log('click', { name: name, path: location.pathname });
  // Replace with your analytics call or fetch to your own endpoint.
}

For a simple dashboard, you could POST events to your own backend. For a small site, a client-side analytics tool is often faster to set up.

Start with the three clicks that matter

Before instrumenting every button, list the actions that directly affect your business. For a small site, that might be:

Tracking fewer events well is better than tracking fifty events loosely. Too many event names make reports hard to read and encourage you to ignore them.

Use click events for conversion steps

Click tracking is most valuable when it feeds a funnel. Track the small number of actions that matter, such as pricing_click, signup_click, and checkout_start. If your analytics tool supports funnels from events, you can see where people drop off.

A cookieless option with built-in click tracking

If you do not want to maintain your own listener, check whether your analytics script supports click tracking through a data attribute. For example, agentlytics is a hosted cookieless tracker that sets no cookies and stores no personal data. It has a free plan of 5,000 pageviews a month with no card. You install it with one script tag:

<script defer src="https://a.measuremy.site/t.js" data-key="YOUR_KEY"></script>

Then mark a button like this:

<button data-agentlytics-event="signup_click">Sign up</button>

The script collects the click, and the dashboard shows it as an event. That removes the need to write and maintain your own listener.

Debug with the browser console

When you first add the listener, open the browser console and click a marked button. The console log should appear once. If it appears twice, you likely have two listeners. If it does not appear, check that the script runs after the DOM is available and that the attribute name matches exactly. This quick check catches most setup problems before they affect your reports.

Watch out for duplicate and missed clicks

If you add both a framework click handler and a global listener, a single click may be recorded twice. Choose one path per event. In React or Vue apps, a global document listener can also miss clicks when components stop propagation or render inside shadow DOM. For most small sites, the simple listener works. Test on a staging page before relying on the numbers.

Filter out your own clicks and bots

Internal testing can inflate a button's count. If possible, ignore your own IP or use a separate staging environment. Some bots click buttons while crawling forms, so consider filtering out impossible timing or known bot user agents. This keeps your conversion rates readable.

Keep event names stable

Event names such as signup_click should stay the same across weeks. Keep a short list in your README or code comments. Stable names let you compare this week with last week without rebuilding reports.

You do not need Google Tag Manager to learn which buttons matter. A data attribute and one listener can cover many small sites, and a cookieless analytics script with built-in click tracking can remove even that code. Whether you use a custom listener or a tool like agentlytics, keep event names stable, record only what you need, and test that clicks appear in your reports before you rely on them.

See it on your own site

agentlytics is cookieless analytics your coding agent can read. Free for 5,000 pageviews a month, no card.

Start free See the live demo

Add agentlytics analytics to this project. Follow the instructions at measuremy.site/llms.txt

More from the blog