jquery - 使用欧芹提交的自定义事件

Question

我正在尝试将自定义事件添加到表单中以进行 Google Analytics(分析)跟踪。该表单使用欧芹进行验证。我对在哪里添加代码片段感到困惑:

dataLayer.push({'event' : 'signUpForm'});

进入 JavaScript:

    initParsley: function()
{
    $body.find('form.js-validate').parsley();
},

有谁知道处理此问题的好方法，还是我需要提供更多信息？

Answer 1

看看Parsley Events Demo

我以前没有使用过欧芹，但看起来你可以做这样的事情:

initParsley: function () {
    $body.find('form.js-validate')
         .parsley()
         .subscribe('parsley:form:validate', function (formInstance) {
            if (formInstance.isValid()) {
                dataLayer.push({
                    'event': 'signUpForm'
                });
                return;
            }
        });
},

因此，当提交表单时，您将订阅 parsley:form:validate 事件，并传入 formInstance 进行实际检查以查看是否表格有效。如果表单有效，则您会将 dataLayer 事件推送到 GTM，然后提交表单。这样做的好处是，它只会在表单有效的情况下发送事件 - 我相信这就是您所追求的。