Debugging Mixpanel track_forms

Question

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.

Answer 1

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.