How to set up Google Analytics goal tracking of a contact form with no separate thank you page?

Question

How do I set Google Analytics up to track visitors to my website who have submitted a contact form, that doesn't have a separate thank-you url?

Ive seen the code posted around blogs and GA help forums but so far have yet to come across how would I actually set the goal up in order to insert the snippet of code.

Code found on forums and such:

onsubmit="pageTracker._trackPageview('/Goa1-Button'); pageTracker._trackEvent('Goals','CLick-Button');"

Specifically, I would like to know things such as:

• What goal type would I use?
• If i named the campaign Contact form completions, where would it go and fit in to the code above?
• Is the code above right and will it help me?

Any other advice, any one ever had to do this before?

Answer 1

So it looks like from the URL you posted in a comment on yahelc's answer, that you have a form that submits and gives back a response via AJAX.

Also, your on-page GA code is the async version, but the code you have in your question is the traditional, so you need to use the async syntax.

On your page, if the visitor does not fill something out, the area in question gets highlighted in red (sidenote: I see no "you need to fill this out" or "this is the correct format" messages if I do not fill out the form correctly..you should look into adding that...).

The main thing you need to make sure is that you only pop the 'success' code if the visitor successfully fills out the form. So you don't really want to attach the GA code to the onsubmit because this can produce false positives..it will trigger whenever the visitor clicks the submit button, regardless of whether or not they successfully filled out the form.

So it looks like the javascript that handles form validation is in your /custom.js, and you have on line 163 of custom.js viewsource the following:

success: function(response){

                           jQuery(".ajax_form").before("<div class='ajaxresponse' style='display: none;'></div>");

                           jQuery(".ajaxresponse").html(response).slideDown(400);

                           jQuery(".ajax_form #send").fadeIn(400);

                           jQuery(".ajax_form input, .ajax_form textarea, .ajax_form radio, .ajax_form select").val("");

                               }

                            });

This looks to be where the "thank you" message is displayed, after the form has been validated and submitted, so you should put your GA "success" code somewhere in this function.

The code you will want to insert should look something like this (based on the code in your question):

_gaq.push(['_trackEvent', 'Goals', 'CLick-Button']);
_gaq.push(['_trackPageview','/Goa1-Button']);

NOTE: For the event tracking, this will set the event category to "Goals" and the event action to "CLick-Button". There are other optional arguments you can pass to the _trackEvent for further granularity. Refer to GA's event tracker guide for more details.

As for the goal tracking, as yahelc mentioned, this is setup within the interface. The code above will send a virtual page view with a page name of "/Goa1-Button" and you will use this value in setting up your goal. There are a lot of ways you can set it up the goal. You can make it exactly match that value or start with that value if you anticipate URL params being added to it later, etc...(but also note, you cannot currently create goals based on events...which is lame, but I hear GA is working on making that happen eventually).

edit: Apparently you actually can set goals based on events, if you use the "New Version", as mentioned by yahelc in his answer comments. Nice!