Tracking Custom Events in Google Analytics

Tracking Custom Events in Google Analytics

Jul 17, 2017 · by Jigar Mehta

Anyone who owns a website knows the value of Google Analytics - a free tool from Google that gives you a ton of useful information about who is visiting your site, how they are getting to it, what they are doing and much more! As with most of the cases, we can configure this tool to do more than it does out of the box.

Event Tracking is "a must" for a website Success

Google Analytics allows, by default, to track a few "events" that occur on your website such as:

  • Landing pages
  • Visited pages
  • Session duration
  • Exit pages
  • Bounce rate

Although all these indicators are vital for understanding the behavior of your audience, there is a specific feature that will allow you to customize web site-specific events that are more relevant to you and your purpose.

In this article, we will discuss how to use Google Analytics to track custom events on a website. Specifically: tracking call-to-action button clicks.

Tracking a Custom Event: Call to Action Clicks

To track clicks on a call-to-action button using GA, we will need three things:

Now, to report an event to GA servers, we make use of JavaScript. With JavaScript, you can call "at any moment" a function (or a listener) each time a visitor performs a click (or a click event) on our CTA button.

For example, say, our CTA buttons have a class button-cta. Using jQuery, we should be able to attach a click listener to it like this:

// Attach click listener to relevant buttons.
jQuery('.button-cta').click(function() {
  // This code is executed when someone clicks on our CTA button.

Note: Though we used jQuery in the above code, the same thing can also be done without jQuery.

So, we can now execute a particular function when our CTA button is clicked. Right now, the function is empty, so we need to populate it with some code which reports the click to the GA server. To do that, we use the following function, which is included in the GA libraries:

// This function reports an event to Google Analytics servers.
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

As you can notice, the function "ga" supports various arguments which can be used to determine what data gets sent to the GA servers. A quick explanation of these parameters is given below. However, you can learn more about these directly in the event tracking documentation.

  • eventCategory: [required] Typically the object that was interacted with (e.g. 'CTA click')
  • eventAction: [required] The type of interaction (e.g. 'click')
  • eventLabel: [optional] Useful for categorizing events (e.g. 'Subscribe now')
  • eventValue: [optional] A numeric value associated with the event (e.g. 42)

Thus, to complete our example here's how the final code for tracking the "CTA click" event will look:

// Attach click listener to relevant buttons.
jQuery('.button-cta').click(function() {
  // Since we have multiple CTA buttons, it is sensible to use
  // button text to categorize the events.
  var buttonText = jQuery(this).text();
  // This function reports an event to Google Analytics servers.
  ga('send', 'event', 'CTA click', 'click', buttonText);

And finally, here's how the Google Analytics will show these events in its report!

Tracking Custom Events in Google Analytics

What to do next?

Well, the first step is to start using Google Analytics. If you don't have an account, go ahead and get one right away. Once you've done so, go ahead and start setting your custom events.

Here, some additional links that will help you follow up with my tutorial:

Caution: promotion for the Evolving Web training program ahead.

Learn Drupal: From Beginner to Pro

Live Online Drupal Training: We train content strategists, project managers, site administrators, designers, and developers to get the most out of Drupal.

Evolving Web Newsletter

Sign up for tutorials, best practices and insights, plus info about our acclaimed Drupal Training series.