Track custom events on your website using Google Analytics

Photo by 🐣 Luca Iaconelli 🦊 on Unsplash

Google Analytics is a very robust solution when it comes to tracking users. But, the tiny script everyone includes isn’t enough.

It might be critical for you to know how many users click a particular button (call-to-action), or visit pages using cross-selling strategies rather than direct navigation. Actually, you need custom events.

It is what this article is all about.

You will need:

  • Minimal knowledge of Javascript (listeners and handlers)
  • 1 minute

It assumes that:

  • Google Analytics is already configured on your website ( snippet included with your UA-XXXXXXX identifier)
  • You’re familiar with the Google Analytics dashboard

Hands-on practical example

Let’s say you’ve just built an incredible landing page for your product and you’d like to track how effective your call-to-actions are.

Something like that:

We will focus on the big purple button: Is it clicked frequently or not?

Three things cannot be long hidden: the sun, the moon, and the truth. — Buddha

There’s only one thing you need to know:

Short explanation:

  • 'send': It is a command (known as hitType in the manual). It will ask Google Analytics to trigger “something”.
  • 'event': The “something” is an event. So you will trigger an event.
  • 'Category': What has been interacted with. Quoting the manual: video, button, picture, etc.
  • 'Action': The kind of interaction. For instance: a video is played ( 'play' action), an article is read ( 'read' action), and so on.

Further details:

  • 'Label': Lets you categorize events. For instance, when an article is read you could provide the name of the article as a label. See later.
  • 'Value': A numeric value. For instance, when a download has ended you could track how long it has taken for the browser to download it. See later.

How it’s done

Arching back to our call-to-action, we’d like to know how many times it’s been clicked.

Snippet:

It means:

  • Trigger a custom event in Google Analytics.
  • A button has been clicked.
  • This button is a Call-To-Action.

Now, let’s imagine I have a second call-to-action further on my website.

I would like to know how it performs compared to the first one.

Snippet:

This is how labels can prove to be useful.

Another example

You can leave or get straight to my article’s ending if everything is already clear for you .

I’ll be using Promises this time (requires a bit more knowledge of Javascript).

Let’s say you want to know how long it has taken for a client to download a file.

We’ll assume that the download function is an asynchronous request that returns a Promise.

Snippet:

Thanks for reading

I hope this tutorial will let you improve your tracking experience using Google Analytics. It’s been very useful for me, and online tutorials seemed to be much harder for just a single line of Javascript.

Check out my latest article :

Javascript : Convert HTML + CSS to PDF. Print HTML in seconds

Feel free to reach out at david.mellul@outlook.fr.

“Cappuccino in a white mug with white foam art on a wooden table” by wu yi on Unsplash
David

Fullstack Developer, Trainer & Entrepreneur.

Learning stuff, sharing knowledge and building on top of great ideas are my top priorities.

6 thoughts on “Track custom events on your website using Google Analytics

  1. Hey there! I know this is kind of off topic but I was wondering if you knew where
    I could locate a captcha plugin for my comment form?

    I’m using the same blog platform as yours and I’m having problems finding one?
    Thanks a lot!

  2. It’s really a great and useful piece of info. I am happy that you simply shared this useful info with us.

    Please stay us up to date like this. Thanks for sharing.

Leave a Reply

Your email address will not be published.

Share
Share