javascript - 调试 Mixpanel track_forms

Question

有没有人有调试 Mixpanel track_forms 的经验？

首先，Firebug Chrome 控制台(当在 Mixpanel 配置中启用调试时)显示任何 track_forms 事件的空属性对象。每个其他 Mixpanel 事件都有一个填充的属性对象，包括引荐来源网址、浏览器数据等。不清楚是否是控制台计时问题，数据是否实际记录，或者数据是否确实从这些事件中丢失。

其次，我有一个 jquery 提交的表单(在单击复选框时提交)，这是一个我试图记录到混合面板的事件。无论我使用 track 还是 track_forms，事件似乎都没有记录。如果我添加一个延迟表单提交的断点，该事件似乎会记录下来。所以这似乎是一个竞争条件，Mixpanel 计时器不工作。

/* 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);

有没有人解决过这个问题？这是客户端表单提交的一个非常基本的用例。

Answer 1

在 mixpanel 文档中不是很明显，但是 mixpanel.track_forms() 应该在页面加载时执行。我怀疑在幕后，mixpanel API 检查 DOM 元素寻找“提交”类型的子元素，然后 Hook “点击”监听器以拦截表单提交，以便在实际提交表单之前可以尝试 mixpanel 跟踪.

我也希望在表单字段更改时自动提交表单，而不是让用户单击单独的按钮。我们仍然需要“提交”输入按钮，但可以将其样式设置为隐藏。

以下对我有用:

    $('#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>

还有一个陷阱:确保输入元素没有设置为“提交”的 ID 或名称，因为这会覆盖 DOM 选择器。