Does anyone have experience debugging Mixpanel track_forms?

First of all, the Firebug Chrome console (when debug is enabled in Mixpanel config) shows an empty properties object for any track_forms event. Every other Mixpanel event has a populated properties object, with referrer, browser data, etc. Unclear if it's a console timing issue and the data is actually logged or whether the data is in fact missing from these events.

Second, I have a jquery-submitted form (submitted upon checkbox click) that is an event I'm trying to log to mixpanel. Regardless of whether I use track or track_forms, the event does not appear to log. If I add a breakpoint that delays form submission, the event does appear to log. So it appears to be a race condition and the Mixpanel timer is not working.

/* doesn't work */
var d={};
$('.ch').bind('change',function(){  /*checkbox click submits form*/
    d['checked']=$(this).is(':checked'); 
    d['value']=$(this).val();
    mixpanel.track("my event",d);
    $('#myform').submit();
});

/* also doesn't work */
mixpanel.track_forms("#myform",'my event',d);

Has anyone solved this before? This is a very basic use case of client side form submission.

Does anyone have experience debugging Mixpanel track_forms?

First of all, the Firebug Chrome console (when debug is enabled in Mixpanel config) shows an empty properties object for any track_forms event. Every other Mixpanel event has a populated properties object, with referrer, browser data, etc. Unclear if it's a console timing issue and the data is actually logged or whether the data is in fact missing from these events.

Second, I have a jquery-submitted form (submitted upon checkbox click) that is an event I'm trying to log to mixpanel. Regardless of whether I use track or track_forms, the event does not appear to log. If I add a breakpoint that delays form submission, the event does appear to log. So it appears to be a race condition and the Mixpanel timer is not working.

/* doesn't work */
var d={};
$('.ch').bind('change',function(){  /*checkbox click submits form*/
    d['checked']=$(this).is(':checked'); 
    d['value']=$(this).val();
    mixpanel.track("my event",d);
    $('#myform').submit();
});

/* also doesn't work */
mixpanel.track_forms("#myform",'my event',d);

Has anyone solved this before? This is a very basic use case of client side form submission.

• javascript
• jquery
• forms
• mixpanel
• user-tracking

2 Answers 2

It's not immediately obvious in the mixpanel docs but the mixpanel.track_forms() should be executed on page load. I suspect behind the scenes the mixpanel API inspects the DOM element looking for a child of type 'submit', then hooks on a 'click' listener in order to intercept the form submission so that the mixpanel tracking can be attempted before actually submitting the form.

I too wanted to have the form auto-submit when a form field changed, rather than having the user click a separate button. We still need the 'submit' input button, but it can be styled as hidden.

The following works for me:

    $('#lang_form_footer_form_select').bind('change',function(){
      $('#lang_form_footer_submit_btn').click();
    });
    mixpanel.track_forms("#lang_form_footer", "Language form - Footer");


    <form id="lang_form_footer" action="/i18n/setlang/" method="post">
    {% csrf_token %}
    {% get_current_language as LANGUAGE_CODE %}
    <input name="next" type="hidden" value="{{ redirect_to }}" />
      <select id="lang_form_footer_form_select" name="language">
        {% get_language_info_list for LANGUAGES as languages %}
        {% for language in languages %}
          <option value="{{ language.code }}" {% if language.code == LANGUAGE_CODE %}selected="selected"{% endif %}>{{ language.name_local }}</option>
        {% endfor %}
      </select>
    <input id="lang_form_footer_submit_btn" type="submit" value="{% trans "Go" %}" style="display:none" />
    </form>

Also one gotcha: make sure the input element doesn't have an id or name set to "submit" as this overrides the DOM selector.

Calling track right before submitting the form won't work since the page change prevents the track from pleting. That's why track_forms exists; unfortunately, it doesn't work for forms submitted this way.

The easiest way to do this is to track the data on the page that submitting lands on.

The best way to do this is to track the data on the server where the form data is being processed.

By the way, the properties paramter to track(_forms) is optional, so you can just do mixpanel.track('my event');