How do I log a MixPanel event when a user clicks a link?

Question

I'm trying to log an event in MixPanel when users click a certain type of link. I'm using JQuery to do it unobtrusively and as far as I understand I need to add a callback function to take the user to URL after the event has been logged.

This is the code I'm using:

<script type="text/javascript">
    $("#more-posts").click(function() {
        event.preventDefault();
            mpq.track("More Posts", function(){
                window.location = $(this).attr("href");
            });
    });
</script> 

Unfortunately this neither takes the user to the page nor logs the event, but I see no errors in the Javascript console in Chrome.

Any ideas what the problem may be?

Update: Also tried this code based on suggestions in the comments:

<script type="text/javascript">
    function go_to_link(link) {
        window.location = link;
    } 
    $("#more-posts").on("click", function(event) {
            event.preventDefault();
            mpq.track("More Posts");
            setTimeout("go_to_link($("#more-posts").attr("href"))", 2000);
    });

</script> 

It now redirects to the correct link, but still doesn't log an event.

Solution 1

Mixpanel has recently added a method mixpanel.track_links that does the job.

Solution 2

The third argument of the mpq.track function is a callback. This code gets executed once the tracking has completed, and would be a reliable way to send the user to the other page.

$("#more-posts").on("click", function(event) {
        event.preventDefault();
        mpq.track("More Posts", null, function() {
            go_to_link($("#more-posts").attr("href"))
        });
});

Solution 3

I believe this is a candidate for MixPanel support: [email protected]. The bug does not lie with your jQuery code. Here's a working jsFiddle that demonstrates the basic functionality.

As I mentioned, I've seen similar issues with a _kmq.push with Kissmetrics. Their JS simply might not have time to register the event. If you try a longer timeout, it might work, but this is bad UX.

Update here if/when you reach out to MixPanel.

Solution 4

Instead of using setTimeout, consider using the callback param of mpq.track.

Alternatively, track the page load at the location that the link would have gone to.

View more solutions

Comments

[cutwithflourish]

Thanks Josh, I've sent an email to MixPanel support - hopefully they can shed some light on this.

[Julien Grenier]

Then there is a chance that the callback is never call and your website would be broken.

[Thomas Hunter II]

That is correct, the callback might not get executed. A way around that would be to use some promise and deferred code, if the callback never runs (might happen <1% of the time) you could fallback to running the timed method.