Mixpanel Click Event Tracking Example

Mixpanel is a great tool for tracking user behavior on your website or app. Today we’ll learn how to capture custom click events!

I use Mixpanel to capture custom click events on most of my sites. For example, you might want to track when users click specific CTA buttons, which you can then tie back to your conversion tracking.

Note – this tutorial assumes you’ve created a Mixpanel account and added their tracking script.

Mixpanel Click Event Tracking

This is a small snippet of jQuery that allows you to track user clicks globally by using a CSS class and data-attribute.

The jQuery

First, add this somewhere in your global scripts.

// Track any click with .mp-click-track CSS class
$('.mp-click-track').on('click', function () {
	// create variable from data-event-name attribute
	eventName = $(this).data("event-name");
	// record Mixpanel event
	mixpanel.track(eventName); 
});

The HTML

Then, add the mp-click-track class and data-event-name attribute to the element(s) you want to track. For example:

<a href="/" class="mp-click-track" data-event-name="Homepage click">View Homepage</a>

That’s it – simple and effective click event tracking for Mixpanel.