Article sections

    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.

    google chrome inspect element

    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:

    • class=”name_of_class”
    • id=”name_of_id”

    example of element name

    In the example above, you can see that the button has class=”buybutton”.

    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.

    Here’s how:

    • 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 <a tag. You can see this in the screenshot below:

    add css id to regular link

    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.
    • Click the Add New button.
    • Enter the CSS class or id in the Selector 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 id=”element_name”.
    • 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 Add Click Event 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:

    click tracking placeholders

    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:

    That way:

    • 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:

    wp google analytics events pro global click tracking

    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.

    Privacy Policy

    WPFlow.com by PineWise

    Log in with your credentials

    Forgot your details?