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.
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.