ga tracking on form validation message using jquery class change listener

Question

i have a form that generate a validation message on ok submission. A js script add a class 'wpcf7-mail-sent-ok' to display the proper message and rendering.

 <div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;">Votre message a bien été envoyé. Merci.</div>

I would like to listen to this js class change to associate a ga tracking to it

     $('.wpcf7-response-output).(????APPEARENCE OF CLASS .wpcf7-mail-sent-ok'???)(function() {
  _gaq.push(['_trackEvent', 'formulaire', 'devis_voyage', 'wpcf7-mail-sent-ok']);
    });

Since there is (to my knowledge) no style change event it would be easier to listen form the form submit. Or the write the style event yourself like in this (older) post : http://stackoverflow.com/questions/2157963/is-it-possible-to-listen-to-a-style-change-event/8158569#8158569 (since it seems you need look for the inline display propery rather than the classname) — Eike Pierstorff, Oct 16 '13 at 13:06
@EikePierstorff listening for the form submit is generally avoided in analytics because the real goal is to track **successful** form submits (user passed all validation checks). — CrayonViolent, Oct 16 '13 at 13:10
Whatever - the validation response status then or ajax status, anything that's already there. — Eike Pierstorff, Oct 16 '13 at 13:21
@EikePierstorff well it's not just "whatever". There's a big difference between someone clicking the submit button and failing vs. passing validation. Only 1 of them means conversion or sale - I'm sure you can sort out for yourself which one that is. — CrayonViolent, Oct 17 '13 at 13:34

CrayonViolent · Accepted Answer · 2013-10-16T13:14:38.797

You say you already have js that acts on that div, adding the class. Why can't you just make your GA call within the js code that does that? That would be the best place to do it.

Because the alternative would basically be to keep looking for a change in the attribute. If the div already exists, there is a jQuery .watch() plugin that would help.

If the div itself doesn't exist, then you're basically going to have to write some code to look for it and wrap it in a window.setInterval or window.setTimeout to keep looking for it until its found. It would look something like this (untested):

function trackSubmit () {
  if ( $('.wpcf7-response-output').length>0 ) {
    _gaq.push(['_trackEvent', 'formulaire', 'devis_voyage', 'wpcf7-mail-sent-ok']);    
  } else {
    window.setTimeout('trackSubmit',100);
  }
}
// make the initial call to get the ball rolling. This should happen on page load, sometime after jQuery is loaded
trackSubmit();

Both .watch() and the trackSubmit() solutions will affect your page's performance though, so I advise you to try and move the GA call to the js that's already being executed.

ga tracking on form validation message using jquery class change listener

1 Answers1