How to track button clicks in Google Analytics simply with jQuery/JavaScript?

TLDR; Track & analyse button clicks (events) on website pages with Google Analytics by pasting these few lines of jQuery/JavaScript code onto your site under the Google Analytics code.

It'll find most common button types and send clicks to Google Analytics for analysis.

The jQuery/JavaScript code for tracking GA button click events is here hosted on GitHub Gists:

View the Code Gist on GitHub

On-page vs Cross-page Analytics - What's the Difference?

When it comes to analysing user behaviour & acquisition, Google Analytics is a pretty powerful tool - most personal and commercial websites use it for tracking visitors and optimising their sites.

Most people use the easiest Google Analytics setup, just copy/pasting the JavaScript tracking code directly from Google Analytics into their websites template or CMS without any consideration, letting Google organise and make sense of it.

You might want to analyse "on page" interactions like; activating product image slide-shows, 'show more information' style buttons, CTAs and embedded videos or animation triggers etc.

Dynamic web-pages that change content to encourage engagement and SPA (single-page applications) can benefit greatly from in-page behaviour analytics - whether that's for fine-grained targeting or UI/UX optimisation.

Note: Once you start tracking on-page events, expect your bounce rates to change... as you may have quite a high 'false positive' bounce rate as Google Analytics doesn't know the user has engaged with the on-page elements before leaving the pages in some circumstances.

User engagement can usually be measured more effectively in the page on modern sites - rather than how visitors move across the site, e.g. from page-to-page - but Google Analytics doesn't do a great job of tracking on page activity by default.

How to Easily Analyse On-page User Experiences?

Google Analytics can track users actions within a page, called "Events" - but you would usually have to manually edit your Google Analytics API integration to enable it for each button/event/action you'd like to track etc...

Since Google Analytics has not quite caught up with this trend, by making its on-page powers more obvious or easily accessible... many other services have sprung up to fill that gap - the easy way.

Such as Smartlook, these guys take site analytics into the modern world without any code modifications - the main feature is effectively recording - like a video - your anonymised users interaction of the site.

You can actually see where people engage, what they read, where they get stuck and what makes them convert exactly. These provide some incredible incites into optimising UX, not to mention the dashboard allows you to track any elements on the site after-the-fact - pretty powerful stuff right out of the box.

I've used Smartlook myself on a few projects and it's been truly invaluable - if you'd like to give it a try, it has a full-featured free tier too, use my referral link above! ;)

The Easy Way, with a Google Analytics mod.

You don't need to sign-up for another service or know much about the the GA API just yet - use the full Google Analytics power for on-page analysis just as easily by using the JS code below.

I've pulled together, from other bits around the internet, a small JavaScript code snippet to add below the Google Analytics code - it requires jQuery, an exceptionally popular JavaScript library that your site may already be using.

// Google Analytics Event Button Tracking

// wait till eveythings ready
jQuery(document).ready(function () {
	
	// use whatever selectors you want to track, e.g. "a.trackMe"
	jQuery('.gaTrack, button, a.button, input[type="submit"], input[type="button"], input[type="reset"], .wp-block-button__link, .menu-item a, .menu a, li a').on('click', function() {
		
		// what was clicked?
		var name = jQuery(this).text();
		
		// assuming Google Analytics is already loaded, fire event log
		ga('send', 'event', 'button', 'click', name);
	});
	
})

This small snippet should be placed after the standard Google Analytics code.

But... for the latest version, it's probably best to source the GitHub Gist directly or copy/paste from the Gist rather than this blog post.

It looks for the most common button selectors a modern site might be using and sends a button click event to Google Analytics, with the buttons text, each time one is clicked.

If you'd like to make sure a button is tracked, that may not be auto-setup by the jQuery above, you can just add the .gaTrack CSS class in the buttons HTML...

It also has some tweaks to work seamlessly with WordPress too.

Knowledge is really powerful when it comes to optimising sites, especially for e-commerce and pursuing defined goals.

If you're having trouble still - feel free to reach out on Twitter @benhoskins64.