Google Analytics is the "to go" tool everytime we want to be aware of how many users are browsing our websites today. It's just what we are used to use, and it does its job pretty well.

Analytics will show you tons of good metrics like page view, bounce rate, audience per location / OS / browser...etc.

Most people stop there, but reality is none of those metrics are based on user interaction and how users use your website.

Don't you want to see how many people clicked that button or how many people show this custom error notification? Google Analytics has the answer for you.

In this post I'm going to show you how to track custom events from your code, right into Google Analytics reports.

Embed your Analytics code

In case you didn't before

Go to Admin from the menu on the left.

Property > Tracking Info > Tracking code.

Get your code and embed it into your website.

It should look like this.

<script>
  ;(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r
    ;(i[r] =
      i[r] ||
      function () {
        ;(i[r].q = i[r].q || []).push(arguments)
      }),
      (i[r].l = 1 * new Date())
    ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
    a.async = 1
    a.src = g
    m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga')
  ga('create', 'UA-XXXXX-Y', 'auto')
  ga('send', 'pageview')
</script>

Create a tracker

A tracker is an object that can collect and store data and then send it to Google Analytics.

A tracker is being created automatically by the default Analytics code by the following line.

ga('create', 'UA-XXXXX-Y', 'auto')

When creating a tracker, you should specify a tracking ID that correspond to one of your Analytics properties, as well as how cookies are stored (In this case, the auto specifies automatic cookie domain configuration).

Send custom events

When the code above is loaded into your site, there is going to be a new function available to you from the global scope.

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject])

Event hits can be sent using the send command and specifying the hit type of event.

The following arguments are:

Event Category: Typically the object that was interacted with (ie: "Buy Button")
Event Action: The type of interaction (ie: "Navigated to https://www.livenation.co.uk/artist/bts-tickets")
Event Label: To categorize events (ie: "Buy Tickets from homepage")
Event Value: A numeric value associated with the event (ie: 3)

Where Event Label and Event Value are not required.

ga(
  'send',
  'event',
  'Buy Button',
  'Navigated to https://www.livenation.co.uk/artist/bts-tickets',
  'Buy Tickets from homepage',
)

You can also send parameters as an object this way:

ga('send', {
  hitType: 'event',
  eventCategory: 'Buy Button',
  eventAction: 'Navigated to https://www.livenation.co.uk/artist/bts-tickets',
  eventLabel: 'Buy Tickets from homepage',
})

How can I know they are working?

Before you actually put this live, you can test if your code works by installing this extension.

Once you have it, enable it and reload your page, you should see Google Analytics initializing from your dev-tools console.

Initializing Google Analytics.
...

Now, if you interact with the bit you intend to track, your command should be logged onto the console.

> Executing Google Analytics commands.
  Running command:
  ga(
    'send',
    'event',
    'Buy Button',
    'Navigated to https://www.livenation.co.uk/artist/bts-tickets',
    'Buy Tickets from homepage'
  )

That will mean, your command is successfully tracked and sent to your Google Analytics dashboard.

Where do I see them in Google Analytics?

There is two ways of seeing them potentially:

From Realtime > Events for real time data.
From Behavior > Events for historical data.

In review

Sending custom events to Analytics is the way forward to know how users interact and use your site.

It will not impact your performance, as you don't need to add another third party script to your website, and it's such a little piece of code that you need to write on every user interaction that you want to track.

Definitely worth a try.

Read about "analytics"

Tracking custom events with Google Analytics