使用Parsley提交的自定义事件

Question

I'm trying to add a custom event to a form for Google Analytics tracking. The form is using Parsley to validate. I'm confused on where to add the snippet:

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

into the javascript:

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

Does anyone know a good way to handle this, or do I need to provide more information?

Answer 1

Take a look Parsley Events Demo

I haven't worked with parsley before, but it looks like you can do something like this:

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

So when the form is submitted, you're subscribing to the parsley:form:validate event, and passing-in the formInstance to actual check to see if the form is valid. If the form is valid, then you're pushing your dataLayer event to GTM, and then submitting the form. Nice thing about this is that it will only send the event if the form is valid - which I believe is what you're after.