How to set up Google Analytics Goal for ajax form submissions
This answer possibly needs to be updated for more recent versions of GA. I did the following to set up goals when the page is submitted via ajax.
$.ajax({
type: "POST",
url: "/some/page/that/does/not/have/ga/on/it.php",
data: { formData:formData },
success: function() {
// Some success message to user.
// Create a virtual page view that you can track in GA.
ga('send', {
'hitType' : 'pageview',
'page' : '/contact-us-success' // Virtual page (aka, does not actually exist) that you can now track in GA Goals as a destination page.
});
}
});
Then in GA -> Admin -> Goals -> New Goal
(1) Goal setup - Custom
(2) Goal description -> choose 'Destination'.
(3) Goal details -> Destination Equals to /contact-us-success
Hope this helps someone else.
You can use virtual pageviews. For each step of the process, add a call to
_gaq.push(['_trackPageview', '/ajax-contactForm/PAGE-or-STEP-NAME.html']);
This will register as a pageview and can be used as a step in the goal.
See virtual pageviews in the GA docs.
Or, to set it up as an event goal as Eduardo suggested, see The New Google Analytics: Events Goals
Here's an updated answer for 2019. Linking up your Analytics account to Google Tag Manager lets you track submissions on AJAX forms in Google Analytics by either tracking all form submissions or by setting an event listener to an element's visibility (i.e. your form's confirmation/thank you message). It requires use of the newer Global Site Tag (gtag.js) and Google Tag Manager.
This tutorial does an outstanding job of explaining the process and walks through setting up a Google Analytics Goal on a form submitted via AJAX or where tracking a redirect/changed URL isn't an option.