Track event in google analytics upon clicking form submit

Use Google Analytics hitCallback

You can specify a custom callback function on the tracker object.

_gaq.push(['_set', 'hitCallback', function(){}]);

The callback is invoked after the "hit is sent successfully."

If you want to track a click on a submit button and send the form afterwards you can use the following code (uses jQuery) for your event:

var _this = this; // The form input element that was just clicked_gaq.push(['_set','hitCallback',function() {    $(_this).parents('form').first().submit(); // Submit underlying form}]);_gaq.push(['_trackEvent', 'My category', 'My action']);return !window._gat; // Ensure that the event is bubbled if GA is not loaded

Or as onclickone liner for your <input type="submit"> element:

onclick="var _this=this;_gaq.push(['_set','hitCallback',function(){$(_this).parents('form').first().submit();}]);_gaq.push(['_trackEvent','My category','My action']);return !window._gat;"

What it does it that it tracks the event My category/My action, uses jQuery to find the underlying form element of the submit button just pushed, and then submits the whole form.

See: Google Analytics - Sending Data to Google Analytics - Hit Callback (thanks supervacuo)

UPDATEIf you're using modern analytics.js code with ga() function defined, you can write this as following:

var _this = this;ga('send', 'event', 'My category', 'My action', {    'hitCallback': function() {        $(_this).parents('form').first().submit();    }});return !window.ga;

There are only 2 ways to ensure, 100%, that all form submissions (amongst users who have JS enabled and who don't block GA) is as follows:

• You can do an AJAX submit, and then not have to worry about the page changing, and thus have all the time in the world for GA to process AND your new page to load in place of the old one.
• You can force the form to open its action in a new window, thus leaving all background processes on the main page working, and preventing the race condition you're worried about.

The reason for this is that Google Analytics does not have a callback function, so you can't ever be certain you're capturing all of the submits, even if you put a 10 second lag.

Alternately, you can just pass a GET value to the submitted page and setup a check on that page for the value. If its set, you can send a trackEvent call.

For those who deal with google analytics universal and doing some trick with hitCallback (f.x. track event after validation but before submit of form) keep in mind that google-analytics.js potentially could be blocked, however ga function will be still defined, so submit will not happen.

ga('send', 'pageview', event, {  'hitCallback': function() {    _this.submit();  }})return !window.ga;

Can be fixed with validation that check if ga is loaded

ga('send', 'pageview', event, {  'hitCallback': function() {    _this.submit();   }})return !(ga.hasOwnProperty('loaded') && ga.loaded === true)