In this article, you’ll learn how to use the Click Tracking feature in WP Google Analytics Events to track clicks on specific links, buttons, or other elements on your site.
This feature works in both the free WP Google Analytics Events plugin and the Pro version, though WP Google Analytics Events Pro users have some advanced functionality for inserting dynamic information.
With this implementation, you’re able to target specific elements on your site and supply your own information for Category, Action, Label, Value, and interaction type.
There are three parts to the process:
- 1. Find The CSS Class Or ID For The Link You Want To Track
- 2. Configure Click Tracking In WP Google Analytics Events Pro Interface
- 3. View Event Tracking Report In Google Analytics
Step 1: Find The CSS Class Or ID For The Link You Want To Track
WP Google Analytics Events Pro’s Click Tracking feature works by targeting specific links via their CSS class or id (this post is a good primer on CSS class and id if you’re not sure what those mean).
WP Google Analytics Events Pro needs this information to function, so if the link you want to target doesn’t already have a CSS class or id, you’ll need to create your own.
Generally, if you want to track a button, you can find its existing CSS class or id. But if you want to track a regular link, you’ll usually need to add a CSS id to the link.
We’ll show you how to perform both actions in the following sections…
1.1 How To Find The CSS Class Or ID For A Button
If you want to track clicks on a button, your button will already have its own CSS class or id.
You don’t need to be an expert to find this information – all you need is to use your browser’s Developer Tools. We’ll show you how to do this using Google Chrome, but the process is similar for Firefox and other browsers.
Here’s what to do:
- Navigate to the page with the button you want to track.
- Right-click on the button and choose Inspect.
Once you click Inspect, you should see a new window open either on the right-side of your screen or at the bottom of your screen. This window will display the underlying code for the page that you’re looking at.
Because you right-clicked to Inspect a specific button, your browser should already be highlighting the specific line of code that applies to that button.
You need to look for one of two things in the highlighted code:
In the example above, you can see that the button has
Copy this information to a safe place because you’ll use it in the next step.
1.2 How To Add A CSS Class Or ID To A Link
The above method works fine if you’re dealing with a button. But if you want to target a regular link, your link is unlikely to already have a CSS class or id.
Don’t worry, though – it’s easy to supply this information yourself.
- Go to the WordPress editor for the post or page with the link that you want to track.
- Select the Text tab in the WordPress editor.
- Find the link in the page.
- Add the text
id="name_of_id"right after the opening
<atag. You can see this in the screenshot below:
Because there’s no CSS attached to this id, it won’t affect how your link looks or functions. But it will give WP Google Analytics Events Pro the information that it needs to track this specific link in the next step.
Step 2: Configure Click Tracking In WP Google Analytics Events Pro Interface
Now that you’ve either:
- Found the CSS class or id for the button that you want to track
- Added a unique CSS id to a link that you want to track
You’re ready to set up your click tracking in WP Google Analytics Events Pro.
To do that, go to your WordPress dashboard. Then:
- Click on WP GA Events Pro or WP GA Events in your WordPress dashboard sidebar.
- Select the Click Tracking tab.
- Enter the CSS class or id in the Element Name box. Do not include the quotation marks – just the regular text between the quotation marks.
- Use the drop-down box to select whether the element name in the previous box applies to a class or id. Remember – it’s a class if it reads
class=”element_name”and an id if it reads
- Enter the information for Event Category, Event Action, Event Label, Event Value, and Non-Interaction. If you’re not sure what to put in these boxes, you can find a full explanation for what all the labels mean in this post.
- Click Save Changes at the bottom.
- Repeat the process to track additional links.
There are two things to pay attention to here:
First, you don’t need to enter information for all of the event labels. The only two labels that are required are:
- Event Category
- Event Action
The others are all optional.
Second, WP Google Analytics Events Pro includes a number of Placeholders that you can use to dynamically insert information in any of the labels.
You can see a full list of these placeholders under the Available Placeholders heading:
Here’s how these placeholders work:
Let’s say you run a multi-author blog and want to track how well different authors do by using the Event Label field.
You could dynamically add the author name by putting
$$AUTHOR$$ in the Event Label box like so:
- If someone clicks the button on a post written by John, the Event Label will include John.
- If someone clicks the same button on a post written by Sally, the Event Label will include Sally.
Placeholders are a little bit more advanced, but they come in quite handy if you need to track a button or link that appears in multiple locations. And you can even dynamically track whether the person who clicked on a link is an anonymous guest or a logged-in user, as well as other information.
Step 3: View Event Tracking Report In Google Analytics
Once you finish setting up the details in the Click Tracking tab, you’ll be able to view click tracking data inside your Google Analytics account.
To view real-time click data, go to Real-time → Events in your Google Analytics dashboard.
And to view historical click data, go to Behavior → Events → Overview.
For more information on where to view your click tracking reports, you can find a deeper explanation in this article.
WP Google Analytics Events Pro Users Can Also Use Global Link Tracking
If you’re a WP Google Analytics Events Pro user, you can also track every single link on your site simply by turning on the Track Links option in the General Settings tab:
While this method is fine for general tracking, there’s one potential issue with the global tracking:
It’s not always very specific. And sometimes, you’ll want more detailed information about link clicks (or even clicks on other elements, in some situations).
For example, if you have two different buttons that point to the same destination URL, the default global link tracking setting above won’t be able to help you differentiate between the two buttons. That could be a problem if you want to use click tracking to see which button is more effective.
For that reason, you will likely still have specific situations where you want to use the individual Click Tracking feature outlined in this article.