Tracking Button Clicks with Google Analytics
Published
One of my managed sites recently became interested in tracking button clicks out to an external scheduling service. There were various “Schedule Now” buttons through out our site, and we thought tracking these clicks might helps up learn how many users were clicking through our site when creating appointments.
We were already using Google Analytics to monitor simple things like page views, referral traffic, and search queries. With Goals, it was straight forward to configure Google Analytics to track our “Schedule Now” button clicks, and then view reports summarizing clicks against different dimensions like time or Referral/Source (e.g. Organic Search, Paid Search, etc.).
Capturing Button Clicks as Goals
The easiest way to track button clicks within Google Analytics is to use “Goals”. Goals measure how well your site performs it’s objective, which in our case was getting users to click the “Schedule Now” button. When the user clicks the button, our Goal is completed; each time a Goal is completed (or performed), it is called a “Conversion”.
There are many different types of Goals designed for tracking of specific events / user interactions, time spent on the site, specific pages visited, etc. For our button click tracking, our Goal will be of type “Event”, which is used to represent a single user interaction (i.e. the button click). Events are pretty flexible, and can be used to capture contextual information as well; here is more information about what all is possible with Events.
Including the Google Analytics Tracking Code on your Site
If you don’t already have Google Analytics on your site, you’ll need to create a Google Analytics account, and include the JavaScript snippet (a.k.a. Tracking Code) on your website. The Tracking Code can be found in the Admin section, under the “Property” column, and then inside the “Tracking info” section.
The default Tracking Code snippet will include Analytics via the Google Site Tag, which is designed to streamline site tagging across multiple Google Products1. This is beneficial if you’re using other Google Services like Ads or Tag Manager. However if you’re only using Google Analytics, and prefer to minimize the number of HTTP requests when loading your site, you may want to include the Google Analytics snippet directly.
For performance reasons, you should always include the Tracking Code (an all JavaScript for that matter) at the bottom of your HTML <body> element2.
Setting up a Goal in Google Analytics Console
Now that we’ve got Google Analytics included, the next step is to set up a Goal. This can easily be done via the Google Analytics Console. Head into the Admin section, then inside the “View” column, select “Goals”. At this point we’ll have the option to create a new Goal, or modify an existing; lets create a new Goal.
First we will select “Custom” on the Goal Setup tab. Next we will give the Goal a name, and select “Event” as the Goal Type.
On the last step of the Goal creation, we’ll set a “Category” and an “Action”. These properties help narrow which Events trigger this Goal. That these two properties will be used in the JavaScript snippet that fires our Event tag in the next section, so don’t forget them!
Tracking Goal Events with JavaScript
Now for the fun part :-)We need to attach a small JavaScript snippet to the Schedule Now buttons that triggers our Google Analytics Goal when clicked. As outlined in the Event Tracking documentation, the JavaScript code to trigger our Goal above will look like:
ga('send', {
hitType: 'event',
eventCategory: 'Schedule Now Button',
eventAction: 'click'
})
The simplest way to do this is to add an “onclick” attribute to the button or hyperlink HTML element. For example:
<a class="goal-button" href="https://www.schedulicity.com/scheduling/ABCDEF/services" target="_blank" onclick="ga('send',{hitType: 'event', eventCategory: 'Schedule Now Button', eventAction: 'click'});">Schedule Now</a>
If you prefer to keep your JavaScript and HTML separate, you can also attach event handlers on page load. One approach for doing this is a snippet like:
// attach listener to document DOMContentLoaded (similar to jQuery document.ready)
document.addEventListener("DOMContentLoaded", function(event) {
// query DOM for button elements
var buttonList = document.querySelectorAll('a')
// for loop through buttons since browser support for NodeList.forEach not dependable
for (var i = 0; i < buttonList.length; ++i) {
// add click event handler to each button element
var buttonElem = buttonList[i]
buttonElem.addEventListener("click", () => {
// fire Google Analytics Event tracking tag on click
ga('send', {
hitType: 'event',
eventCategory: 'Schedule Now Button',
eventAction: 'click'
})
})
}
})
While it is safest to include this snippet after the Google Analytics Tracking Code (to make sure the ga() function has been defined), one cool feature included with Google Analytics is the ga Command Queue Reference. This allows you to queue up Analytics ga() requests before the Analytics library has fully loaded (since the library is loaded asynchronously to help with site load time).
This Command Queue is a pretty cool feature, and is an easy way for us developers to incorporate an asynchronous interface into any frameworks or libraries we’re creating.
Viewing Goal Conversions in the Google Analytics Console
Once you define a Goal, Google Analytics will automatically add a “Goal Completions” chart to the Home Dashboard. You can also browse to the “Conversions” > “Goals” > “Overview” page for more charts about the Conversions on your site.
Notice the different Dimensions listed on the bottom left of the reporting panel, specifically the “Source / Medium”. This gave us insight into which Acquisition method was working best for our Conversions (Organic Search, Paid Search, etc.).
Wrap Up
Introducing button click tracking onto our site with Google Analytics was straight forward and easy. The most difficult part was sifting through all of the analytics lingo during research (believe me, there’s a lot). Once we honed in on “Goal tracking”, and “trigging Analytics Events”, we were on the home stretch! Looking forward to working this functionality into future sites.
Comments
No responses yet