Google analytics track event on form submit

Hello, I read a couple of threads about this topic and followed them

http://www.chronoengine.com/forums/posts/f2/t98211.html?page=1
http://www.chronoengine.com/faqs/70-cfv5/5230-validation-customization-in-cfv5.html

So I put

data-gvalidate_success='ga_track' 

on the form tag attachment and

function ga_track(event, form){
ga('send', 'event', {
    eventCategory: 'mycategory',
    eventAction: 'submit',
    eventLabel:  'mylabel'
  });
} 

in a load javascript block.

This is working on some browser (IE11 and Chrome) but not on Firefox. Reading google documentation I think the problem is the execution of the javascript get interrupted when moving away from the page. They suggest two workarounds for this, one is the the use of the beacon api:

function ga_track(event, form){
ga('send', 'event', {
    eventCategory: 'mycategory',
    eventAction: 'submit',
    eventLabel:  'mylabel'
    transport: 'beacon'
  });
} 

this is the most straightforward and is my current solution but support for this api is not ubiquitous so they suggest another method described here.

This solution should work in any situation but I don't know how to adapt it to be used with the data-gvalidate_success method. Any suggestions?

Thanks
Angelo

Hi Angelo,

I've not seen this before but I think it should work in the same way. Here is the Google code with the first line replaced to become the ga_track function (give it a different name of you prefer):

function ga_track(event,form) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

Note: this is the simple version, in use you should extend it to include the timeout code.

Bob