Using jQuery for Google Analytics event tracking of Form Submits

Question

Im currently playing around with Google Analytics event tracking and can see a few plugins floating around, but im trying to see if i can put something together that would be very generic and simple to use.

<script>
$("form").submit(function(){
    _gaq.push(['_trackEvent', $(this).attr('name'), 'Form Submission', 'The-form-name',, false]);
});
</script>

I figure if i have a few of these simple snippets of code lingering around on my page this way i can track when a form is submitted and by leveraging form names and form id's i can see when they are submitted.

I figure i can probably use this simple method to track link clicks etc but was just wondering whether anyone has done anything like this before and would have any suggestions as to whether this is a reliable method for tracking events with Google Analytics.

The reason why im looking at doing it like this is because I will have everything generated dynamically on the site and the majority of tags will have id's associated to them, so this way i wont need to add them directly into the html by using the onclick event handlers and stuff like that.

thanks for any advice

Answer 1

You can do it this way but you will have to delay the form submit in order to leave time for the trackEvent to proceed. Or else the form will be submitted right away, preventing the trackEvent from completing and being sent out. The same applies for tracking clicks.

This should work:

<script>
$("form").submit(function(e){
    e.preventDefault();//prevent the form from being submitted
    _gaq.push(['_trackEvent', $(this).attr('name'), 'Form Submission', 'The-form-name',, false]);
    $(this).off('submit');//prevent 'this' jquery submit event recursion
    setTimeout(function(){//delay the form submit
        e.currentTarget.submit();//submit form after the track event had time to complete
    }, 350);//350 ms
});
</script>

NB: While this guarantees that your form will be submitted, it does not guarantee that the submit event will be tracked 100% of the time. But the 200ms 350ms should be good enough to get over 90% properly tracked. (Edit: I bumped the delay with considerations for high latency cellular networks).

In this particular example of a form onsubmit on a low-latency connection. The most a full Google Ad tracker script can make is 4 requests, each in the 30-40 ms range (below the 350ms delay indicated). And technically, you only have to account for the latency of the first request being sent to reach Google, for the event to be saved in Google Analytics.

The only other way to insure 100% that the event got tracked, is to use the Hit Callback as described at: https://stackoverflow.com/a/12461558/1647538 However, the caveat of the Hit Callback is that it could prevent the form from being submitted, thus the Hit Callback method is not really advisable here.