How to track user events or metrics

You can use a referral service like bit.ly to track links. Just make a redirect link, replace the original link on your site and the counter increases with every link visit.

What is a Tracking Link & How to Create Them | Bitly

Tracking clicks

There are many services to track clicks: Segment, MixPanel, Amplitude can all do it with some JavaScript that records events on any user event. Each one works a little differently so here we will look at the most popular one: Google Analytics.

How to setup Google Analytics

Now you can follow the more technical Google documentation or any of the in-depth guides below to configure event capturing, which is the technical term for recording clicks.

Google Analytics 4 tags

Guides

These more interactive guides might help you setup Google Tag Manager with click analytics.

Google Tag Manager Click Tracking: All You Need to Know (2022 edition)

https://www.youtube.com/watch?v=308HzDVlhAw

Other libraries (using data property)

A typical way for libraries to track events is to mark the elements to track with a specific property like data-hook. So the actual element gets rendered like:

<div data-hook="banner">Hello World</div>

To accomplish this today, you can write an override and apply it to the element:

https://gist.github.com/koenbok/2993bffb0e81bae416f7fbe9b7094274

Now, if you publish you’ll see the element contain the extra property:

This works well, but the downside is that you’ll have to write a unique override function for every data-hook value (until we add props to overrides in the interface).