This feature is only available in the Pro version of Independent Analytics.
If you’re unsure how to add a class to your link to track it, here are a few of the most common techniques.
You’ll learn how to add classes via the:
Note: When tracking links with a class, please make sure to use a unique class name that does not show up anywhere else on your website.
Adding classes with the Block editor
If you want to track clicks on a Button block, start by selecting the button in the editor.
In the right-sidebar, click on the Advanced section, and then enter the class name into the Additional CSS Class(es) field.
Save your post, and then all clicks on this button will be tracked.
If your link is in another block type, like a paragraph, the steps are the same. However, please note that if you have multiple links within the same paragraph, clicks on all of them will be tracked.
If you have multiple links within a paragraph and you want to track just one, this is possible if you edit the HTML and add the class to the link element itself.
To do this, you would start by selecting the paragraph block. Then, click the Options icon in the toolbar and choose the Edit as HTML option.
Once you’re editing the HTML, you can manually add the class to the link like this:
After adding the class, click the Edit visually button to return the paragraph to its normal state.
This will allow you to add different classes to links within the same paragraph and track their clicks separately.
Adding classes with the Classic Editor
If you’re using the Classic Editor plugin, then the first step is to click on the Text tab at the top-right of the editor.
Once you’re viewing the plain text of the article, you can add the class attribute and value into the link element like this:
You can use this same technique to add a class to any link when using the Classic Editor. You can also add the class to a parent element, but we recommend adding the class to the link element whenever possible.
Adding classes to menu items
It’s easy to track clicks on menu items, whether you’re using a classic theme or a block theme.
Classic themes
For classic theme users, start by visiting the Appearance > Menus page. Once there, click on the Screen Options tab at the top-right of the screen, and then check the CSS Classes box.
Once this field is enabled, you can click on any menu item to open its options and enter the class into the CSS Classes field.
Block themes
If you’re using a block theme, start by clicking on the Appearance > Editor menu item.
In the next screen, click on the Navigation item. Then, click on the three dots icon to the right of the menu name and click the Edit link in the small popup.
On the next page, click on the menu item you want to edit. Then, in the right-sidebar, click the Advanced section and add the class name to the Additional CSS Classes section.
Elementor
If you’re editing your site with Elementor, adding a class to a widget is very easy.
Start by selecting the widget, click the Advanced tab at the top, and then add the class into the CSS Classes field.
Please note that any links within the widget will be tracked. For most widgets, this won’t be an issue, but if you do end up with a widget that includes multiple links, try splitting the widget into multiple widgets. For example, a toggle widget that includes two buttons could be split into two separate button widgets.
HTML
If you’re working with HTML, you can manually add a tracked class to a link, like this:
<a class="track-pricing-clicks" href="https://mysite.com/pricing>Pricing</a>We recommend adding the trackable class to the <a> element, but you can add it to a parent element too. This will work for up to 7 layers of hierarchy. For example, clicks will still get tracked if the class is added like this:
<div class="track-pricing-clicks">
<p>Visit our <a href="https://mysite.com/pricing>Pricing</a> page to buy now.</p>
</div>This allows for more flexibility if, for some reason, it’s difficult to add the class to the link or if you want to quickly track multiple links within one element. Speaking of which, please keep in mind that if there are multiple links within an element, like the <div> above, clicks on all of the links will get tracked.
Clicks are counted for the following elements:
<a><button><input type="submit"><input type="button">
Please make sure that you are tracking one of these four elements, as clicks on other elements like <div> and <img> will not be tracked.