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.

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.

• javascript
• jquery
• mixpanel

• 1 Where does event comes from? It should be an argument of the click callback. – Robin Commented Dec 28, 2011 at 14:37
• I don't think so. It's there to prevent the default behaviour of the click event so that the following code has a chance to execute. If I make the change you suggest, clicking just takes a user to the URL without logging the event. It also gives an "uncaught reference error". – cutwithflourish Commented Dec 28, 2011 at 14:47
• What are the errors in chrome? – user1119646 Commented Dec 28, 2011 at 16:18
• What version of jQuery are you using? You should really use .on('click', function(event) {...}. – Josh Smith Commented Dec 28, 2011 at 16:34
• The problem might be a similar problem I've experienced with KissMetrics. Their JavaScript code simply doesn't have time to listen for the event. Try doing a setTimeout before the redirect and see if it logs the event correctly. If it does, then this is your issue, and you likely want to log the click event after they reach the new location. – Josh Smith Commented Dec 28, 2011 at 16:36

5 Answers 5

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

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"))
        });
});

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.

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.

The easiest way is to use the function callback in mixpanel.track which fires after the event is successfully logged.

Code would look like this.

mixpanel.track("Great Success!", {}, function(){
  window.location.href = "www.whatever.com";
});