Question

I need to track an event in google analytics when someone fills out a form and clicks submit. The resulting page that comes up is a standard dashboard-type page, so in order to track the event on that page I’d have to pass in the event in the url and then read the url and output the google analytics event tracking javascript code based on it. This is a frequently bookmarked page though and page that is reloaded, clicked back to, etc. So I’d really rather not pass tracking events in the URL and screw up the analytics.

Instead, I’d much rather do something like the following jQuery code on the page with the form:

$('#form_id').submit(function() {
  _gaq.push('_trackEvent', 'my category', 'my action');
});

The problem I fear with the above is that I’m going to miss some events being tracked because immediately after calling that javascript the browser is going to submit the form and go to another webpage. If the utm.gif tracking image isn’t loaded in time, I miss the event :(.

Is my fear justified? How do I ensure I don’t miss events being tracked?

Answer 1

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.