Create and send events on button click in Google Analytics

Often, to track various actions on a website (such as a button click or a price sheet download) you need to create and send an event on click in Google Analytics or Universal Analytics. Let's examine the event sending code, how it is built, and how it differs between each version of analytics.

To determine which version of analytics you have, inspect your site's code. If the analytics script loads ga.js, that's Google Analytics (old code); if it loads analytics.js, that's Universal Analytics (new code).

Event‑sending code for Google Analytics

The function we call when the event fires to send its information to Google Analytics looks like this:

_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction']);

As you can see, the code contains several parameters - some are mandatory (category and action) while others are optional. To make the event more detailed in Analytics, it's better to include all of them:

• category (required) – what the tracked object is (for example: 'button' or 'link');
• action (required) – the action the user performs on that object (usually 'click', could also be 'load');
• label (optional) – a group or category the object belongs to (for example: 'navigation buttons');
• value (optional) – a numeric value associated with the event (for example: '4 times');
• non‑interaction (optional) – can be true or false. If true, the event does not affect the bounce‑rate calculation.

In practice, the code for tracking a click on a "Show Phone Number" button could look like this:

<a href="..." class="button" onclick="_gaq.push(['_trackEvent', 'button', 'click', 'Show the phone number']);">Show Phone Number</a>

Or, a more advanced version without an explicit onclick on the button:

<script>
    var callButton = document.getElementById("button1");
    callButton.onclick = (function () {
        _gaq.push(['_trackEvent', 'button', 'click', 'call-button1']);
    })();
</script>

Here the button must have id="button1".

Event‑sending code for Universal Analytics

For Universal Analytics, the event‑tracking function looks like this:

ga('send', 'event', 'button', 'click', 'hiding buttons', 4);

where:

• button – the object you acted upon;
• click – the action performed;
• hiding buttons – the group the object belongs to (in this case, a button that hides a phone number);
• 4 – a numeric value.

'event', 'button', 'click' are required parameters; the rest are optional. If you don’t want the event to affect the bounce‑rate, add the key‑value pair 'nonInteraction': 1 like this:

ga('send', 'event', 'category', 'action', { 'nonInteraction': 1 });

You can also pass all parameters using a key‑value object for clarity:

ga('send', {
    'hitType': 'event',
    'eventCategory': 'button',
    'eventAction': 'click',
    'eventLabel': 'hiding buttons',
    'eventValue': 4
});

In real life, the code for sending an event on a button click in Universal Analytics looks like this:

<a href="..." class="button" onclick="ga('send', 'event', 'button', 'click', 'Show the phone number');">Show Phone Number</a>

Or, more elegantly by moving the tracking code out of the button element:

<a href="..." class="button" id="show-phone-button">Show Phone Number</a>

Then after the Universal Analytics script, add:

var phoneButton = document.getElementById('show-phone-button');
addListener(phoneButton, 'click', function () {
    ga('send', 'event', 'button', 'click', 'Show the phone number');
});

/* Utility to handle event listeners across W3C‑compliant browsers and IE */
function addListener (element, type, callback) {
    if (element.addEventListener) element.addEventListener(type, callback);
    else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

Verifying the code to send event works

1. Click the button that has the event attached.
2. Open Google Analytics.
3. In the left menu, select Real‑Time.
4. Under Events, check whether the recently triggered event is displayed.