Click count with Google Analytics event tracking

Basic jQuery tutorial: Vizune uses Google Analytics which is a free web analytics tool that tracks and reports traffic to your website. Gathering the number of clicks/finding out the popularity of certain buttons/links on a page is a popular request I receive from clients. Unfortunately, Google Analytics does not provide this as a feature. However, this can be achieved with event tracking and some jQuery.

I used to use Ccount back in the day but, trust me, this is a lot less hassle to install, doesn’t overwrite your URLs with “ccount/click.php?id=123” and is a lot more user friendly.

  1. First, you need to assign the class names to the links/buttons you want to track. In my example, I want to track how many users are interested in seeing the preview/demo of my web templates.
    <a class="button templatePreview" href="http://vizune.com/site/templates/014/" title="Template 014 Preview" target="_blank">Demo</a>
    
    <a class="button templateDownload" href="http://vizune.com/site/templates/014/vizuneTemplate014.zip" title="Template 014 Download" target="_blank">Demo</a>
    
  2. Your jQuery for event tracking goes directly underneath your Google Analytics code after ga(‘send’, ‘pageview’); is mentioned.
     
    A GA event consists of four fields: eventCategory (Typically the object that was interacted with), eventAction (The interaction), eventLabel (Used for categorising events), eventValue (A numeric value associated with the event). A typical event is written like the example below:

    ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);
  3. The code below is a jQuery function that triggers an event and sends to your Google Analytics account when a user clicks on any element with the class name “videoPlay”.
    $(".videoPlay").click(function () {
        ga('send', 'event', 'Videos', 'play', 'Play button');
      });
    
  4. You can use jQuery variables as the event fields especially if you want to gather information from the web page e.g. when tracking clicks to Vizune’s template previews links, I want to know which template users want to preview so I retrieve the URL from the button and use this for my eventLabel. I have also provided a second example that would retrieve the “title” attribute in the hyperlink, this would be a more tidy alternative for your results.
    $(".templatePreview").click(function () {
        var url = $(this).attr("href");
        ga('send', 'event', 'Post clicks', 'Preview web template', url);
      });
    
    $(".templatePreview").click(function () {
        var title = $(this).attr("title");
        ga('send', 'event', 'Post clicks', 'Preview web template', title);
      });
    
  5. There are so many possibilities with events, it depends on your level of knowledge with jQuery. For example, I could use if statements that send a certain event depending on the type of button that is clicked. In my code below, I have a situation where I have merged two different events into one click function. All my buttons have the class name “downloadButton” and an extra class name to differentiate what the button will be downloading such as “downloadTemplate”.
    <a class="downloadButton downloadTemplate" href="#" target="_blank">Download template</a>
    
    <a class="downloadButton downloadPSD" href="#" target="_blank">Download template</a>
    
    
    $(".downloadButton").click(function() {
        if ($(this)).hasClass('downloadTemplate')) {
    	downloadType = 'Template Download';
        } else {
    	downloadType = 'PSD Download';
        }
        downloadLink = $(this).attr("href");
        ga('send', 'event', 'Download buttons', downloadType, downloadLink);
    });
    
    
  6. It can take up to 24 hours for your event tracking code to take affect. I use a Google Chrome Extension called Google Analytics Debugger that helps me test whether my code works before going live.
     
    Activate the extension in your browser, go to the Console tab in your Developer Tools (F12). Events will be tracked within the console log and this will help identify whether your code is working successfully. Below is an example of testing Vizune’s Google Analytics event tracking code using the extension.

    Google Analytics Debugger

  7. And lastly, to see your event tracking results, log into your Google Analytics account and go to Behaviour > Events > Overview. You can filter your results via Event Category, Event Action, Event Label. Below is a preview of Vizune’s event tracking results.

    GA_event_results

Happy event tracking! I would greatly appreciate any feedback and feel free to request a tutorial. If you’re struggling with Google Analytics event tracking, please comment below with any queries you have.

Share
  •  
  •  
  •  
  •  
  •  
  •  
  •  

One thought on “Click count with Google Analytics event tracking

Leave a Reply

Your email address will not be published. Required fields are marked *