If you are using the WordPress Social Icons block and wonder how your social links are performing, here is a quick way you can track them using Goal Tracker for Google Analytics.
In this post, I’m going to show you two ways you can use Goal Tracker for Google Analytics to track your social buttons. Both are simple, but using the Pro version is a bit quicker.
The Social Icons Block
In this example, I added three social icons via the social icons block.
I will walk you through tracking these buttons and creating a report in Google Analytics.
Getting the social icon class
Before we can start tracking these buttons, we need a way to find them on the page.
We will use CSS selectors to track the buttons, and in this case it’s a class attribute.
The next section will show you how to find the class name for each of these buttons, but if you are in a hurry, here’s a table of some of the common social icons and their classes:
| Icon | Class |
|---|---|
| wp-social-link-twitter | |
| wp-social-link-facebook | |
| Goodreads | wp-social-link-goodreads |
| Github | wp-social-link-github |
| wp-social-link-instagram | |
| wp-social-link-linkedin | |
| Mastodon | wp-social-link-mastodon |
| wp-social-link-pinterest | |
| Twitch | wp-social-link-twitch |
| Telegram | wp-social-link-telegram |
| SoundCloud | wp-social-link-soundcloud |
| wp-social-link-reddit | |
| Spotify | wp-social-link-spotify |
| wp-social-link-whatsapp | |
| YouTube | wp-social-link-youtube |
| WordPress | wp-social-link-wordpress |
| URL | wp-social-link-chain |
The Pro version of goal tracker makes it a bit easier and allows you to use a single class for tracking all of the buttons (“wp-social-link”) but more on that later.
Grabbing the class
First, I’m going to hover over the button and right-click it. Then select Inspect.
This will open up the browser’s developer tools.
You can see that the “li” element has three classes – wp-social-link, wp-social-link-twitter, wp-block-social-link.
In this example, the most suitable class is going to be wp-social-link-twitter.
You can go ahead and close the developer tools.
Option 1 - Creating an event in Goal Tracker
Now that we have the class, we can go ahead and create an event by clicking the social button.
If you haven’t already, install the Goal Tracker plugin.
Then head over to the Tracker Tab and click on “Clicks” . Then click the Add Event button.
In Custom Event Name enter – social_icon_click
Then in the Class or Id Selector enter the class we grabbed in the previous stage. Because this is a CSS selector for a class, we will add the dot sign before the class name and also add an a after the class name – .wp-social-link-twitter a
The last thing we need is to add a property that would tell Google Analytics which social icon the user clicked. Set the key to social_icon and the value to Twitter. Then click Add Property:
Click Save and do the same for the rest of your social buttons.
Note that we are using the same event name for tracking all of the buttons.
Option 2 - Using Goal Tracker Pro
Ok, I promised a slightly simpler option for tracking all of your social buttons.
The Pro version of Goal Tracker has a feature called Placeholders that can help us in this case.
Instead of creating a separate event for each social button, we just use a class that they all have in common and then a placeholder to tell which icon the user clicked.
The flow is very similar but with slight changes.
For Custom Event Name put in social_icon_click (same as before).
In the Class or Id selector put in: .wp-social-link a
Make sure to keep the . sigh and the a
Then in Additional Properties use a placeholder – set the key to social_icon and in the value field select $$ELEMENT_TEXT$$:
Click Save, and that’s it. You only need to configure one event.
Creating the social_icon dimension in Google Analytics
There’s one additional thing that you have to do before we move on to the reports.
You may have noticed that we used the social_icon property in our event. In Google Analytics, this is a custom dimension that you need to create.
Head over to your Google Analytics account and open the Admin section. Under your property column, you will find the Custom Definitions button.
Open it and then click on Create Custom Dimension.
In the dimension name, enter Social Icon.
The scope should be set to Event. And in Event Parameter, enter soical_icon.
Creating the Social Icons report in Google Analytics
I’m going to show you two ways you can structure your reports. The first will show you how many people clicked on each social button website-wide. The second report will show you, for each page, how many people clicked on the various social icons.
In Google Analytics, open the Explore screen and create a blank report.
Then, in the variables tab, click the “+” sign next to “Dimensions”.
We want to add the following dimensions:
- Page Title
- Event Name
- Social Icon
- You can use the search to locate them.
Overall social icon usage report
Drag the Social Icon dimension and drop it in the Rows section (to the right).
Then, drag the Event Count metric to the Value section (below rows and columns).
As you can see, along with the social icon names there’s also an empty row.
To get rid of this empty row, drag the Event Name dimension to the Filters section. Then, in the Conditions, set it to “exact” and set the expression to “social_icon_click”. Click “Apply” and view the report.
Social icons usage per page report
Drag the Page Title dimension and drop it in the Rows section (to the right).
Then, drag the Social Icons dimension and drop it in the Column section.
The Event Count metric goes into the Value section.
Then, finally drag the Event Name dimension to the Filter section. In conditions set it to “exact” and set the expression to “social_icon_click”.
Your report should look like this:
As always, don’t forget to name your reports.
