Article sections
To learn more about Event Tracking check out our guide – Complete Guide to Google Analytics Event Tracking
The click tracking feature allows you to trigger a Google Analytics event when a someone clicks on an element on your website.
It is very useful to get a better understanding of how users interact with the page and give you more information better-performing components on the site.
Click tracking configuration
For our example, we set up a demo site with multiple “call to action” buttons that lead to the same page. We want, however, to be able to tell which of them is better performing.
By using the click tracking feature, we will be able to determine which button was clicked and have the data ready for analyzing in Google Analytics.
Identifying the tracked elements
The first thing we need to do is to be able to identify the individual buttons. Luckily, the underlying HTML code gives us multiple ways to do that. Our plugin uses two of them to determine how to behave.
In HTML, an element can have either an “id” which has to be unique or multiple “classes” assigned. If you wrote the code for a page element such as a button, link paragraph, you could specify a class or id, and later use that in our plugin’s settings. But if you already have an element like the buttons in our example, you will have to find a way to extract this information.
I will use the built-in Chrome Developer tools to show you how to grab the id of the buttons on a demo page. Most browsers have similar tools to do the same.
Right-click the buttons you want to track and select the Inspect option. Chrome will launch it’s developer tools pane and highlight the section’s HTML code. If you move the cursor around that element, you will see chrome highlighting the exact area in on the page.
You can see that the first button has an id – “btn-hipster” and the second one, has the id – “btn-elegance” – That was easy.
Configure Tracking
Now that we can uniquely identify each button, it is time to configure the plugin:
- Open the Click Tracking tab, and set the Element Name to btn-hipster (the id we just grabbed).
- Choose the “id” Type.
- Set the Event Category, Action, and Label to whatever you like. This information will show up in Google Analytics every time someone scrolls to the area. Make sure that the information will allow you to identify the specific button that the visitor clicked on.
- For this particular scenario, we recommend setting the non-interaction field set to false. You can read more about it here – https://support.google.com/analytics/answer/1033068#NonInteractionEvents
- Save the settings
- Repeat for the second button only, this time, use the element name – btn-elegance.
Users of the Pro version of the plugin can also use placeholders in the Category, Action, and Label fields, to include more dynamic information for each event.
Triggering the Event
You can now open or refresh your website’s page and click each button.
The Google Analytics real time dashboard should now show you two events with all the relevant information as you can see in the screenshot.