How to set up Google Analytics Goal for ajax form submissions

Question

I have a contact form that is submitted via ajax and upon a successful submission, a thank you/success message is displayed.

Additionally, I've set up a goal (Goal Completion URL) in my Google Analytics account for visits to a thank you page.

This page does not exist.

Any thoughts/suggestions on how I can set up tracking successful form submissions via this method?

Answer 1

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

Answer 2

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.

Answer 3

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 (ie 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.