Google Analytics Event tracking with _trackEvent when a form is submitted

Question

I am trying to track an event when a user clicks the submit button on my signup form.

I have the following code in my page:

Google Analytics - immediately before my closing </head> tag:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-XX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Form Event Tracking:

<input onclick="_gaq.push(['_trackEvent', 'Forms', 'Submit', 'mylist', , false]);" name="submit" id="af-submit-image-873297158" type="image" class="image img-responsive" style="background: none;" alt="Submit Form" src="img/orange_free_instant_access_button.png" tabindex="503">

Every time I load the page up and click the form, the event is logged in the realtime events section of Analytics. This seems to work fine, however from a total of over a hundred known signups to the list in the past 24 hours, only a handful are logged. (12 overall, most of which were my own test submissions).

I can only assume that the event is not being sent to Google, but as far as I can see the code looks fine, and I can also see the event being sent via the console using the GA debugging plugin.

I've tried triggering the event via a jQuery call, I've tried various events such as onmousedown & the actual form submit event, but nothing. ( I even rolled back from analytics.js to ga.js, creating a brand new profile, as I thought it may have been a 'beta' issue.)

I did suspect that the event wasn't being fired in time before the page changed location, but when I test myself, its fired every single time. I've tried Chrome, FF & IE10.

On my quest to fix this I've attached an onload event to the body of the page, and I can see that the events are being recorded for that, even from live visitors. The problem seems to be centered around the form event.

Answer 1

Ok looks like its time to answer my own question for the benefit of others:

I did some digging and it was being caused by the page changing location before the event was tracked properly. Thanks to a post by Joel Peterson I came up with this piece of code:

jQuery(document).ready(function($){
    $('form').submit(function(event){
        //if analytics object exists
        if(window._gat){
            event.preventDefault();
            optinForm = this;
            _gaq.push(['_set','hitCallback', function(){
                                                optinForm.submit();
                                             }]);
            _gaq.push(['_trackEvent', 'Forms', 'Submit', 'hbsanewtraffic']);
        }
        //if no analytics object, service as normal
    });
});

It uses a callback function to ensure that the event is sent first, and then submits my form.

Answer 2

Replace _gaq.push(['_trackEvent', 'Forms', 'Submit', 'mylist', , false]);

with below.

ga('send', 'event', 'category', 'action');

Example :

ga('send', 'event', 'Forms', 'Submit');

Place as value for the onClick attr.