WPZOOM’s Social Icons plugin offers a quick way to add social icons to your pages and posts with more style than the built in block.
Because at Goal Tracker, we are all about collecting data, I wanted to show you how to track these social icons with Google Analytics.And it’s a great way to find out where your users hang out online.
The WPZOOM Social Icons block
In this example, I added four icons using the WPZOOM social icons block.
I will walk you through tracking these buttons in Google Analytics and show you how to create a report to view the collected data.
Getting the social icon class
The tricky part in this tutorial is going to be grabbing the class attribute of each button. Goal Tracker for Google Analytics uses CSS selectors to tell which elements to track, and so we need a unique identifier for each of these buttons.
But don’t worry I’ll show you a quick way to get the class for each of these social icons.
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 (“social-icon-link”) but more on that later.
Grabbing the class
First, I’m going to hover over the icon and right-click it. Then select Inspect.
This will open up the browser’s developer tools.
You can see that the “span” element has three classes – social-icon, socion, and socicon-twitter.
In this example, the most suitable class is going to be socicon-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 in Goal Tracker for Google Analytics.
If you haven’t already, install the 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 – .socicon-twitter
The last thing we need to do is 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 WPZOOM social icons.
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: .social-icon-link
Make sure to keep the .
Then in Additional Properties use a placeholder – set the key to social_icon and in the value field select $$ATTR_TITLE$$
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.
