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?

Solution 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!

Solution 2

Goals are configured from within the Google Analytics interface, and do not apply retroactively.

You should check out How do I set up goals and funnels?

You can specify a specific page, event or amount of time on site as your goal.

As far as how to configure the code that will track submission of your form, that requires more information (i.e. code samples) to help you with. But, most importantly: Is it an AJAX form, or a regular form that just posts to the same URL? Are you using async or traditional Google Analytics syntax?

EDIT:

Based on the form you just posted, it looks like its an AJAX POST that returns an HTML body.

So, all you need to do is add your "goal" code into that markup, something like:

<script>
_gaq.push(["_trackPageview", "/contact-us"]); //for a URL goal
_gaq.push(["_trackEvent", "Contact Us", "Submit"]); //for an event goal.
</script>

Comments

[RSM]

its an html form processed with PHP and javascript with the thankyou message on the same page.

[RSM]

also, url for the contact form is www.completeoffice.co.uk/contact.php

[jdonley]

@yahelc: GA does not currently allow you to setup goals based on event; you can do based on URL, time on site, or pages/visit. Kinda boggles my mind that they don't let you do this, but I hear rumors that they eventually will throw it into the mix.

[Yahel]

@CrayonViolent You can set Event Goals in Version 5 of GA, which is available to everyone (and has been for a few months now). You should see a "New Version" link in red at the top of your Google Analytics. This will be the default within a few months. d.pr/N1iF

[jdonley]

@yahelc: I've poked around the new version a little but I guess I missed that. Nice!

[RSM]

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(""); _gaq.push(['_trackEvent', 'Goals', 'CLick-Button']); } });

[jdonley]

I don't think it really matters where in that function you put it; that should work, yes.

[RSM]

this didnt work. i put it in the code, completed my submit form, waited 24hrs and didnt show up

[jdonley]

@Ryan: I went to your page and when I click submit, I see TWO requests to GA happening: one from submit onclick (which I advised against), and one from where you put it in that function. First off, you need to remove one of those because it's double counting now, and I suggest you remove the onclick one because as mentioned, that produces false positives. 2nd, as I said, I see the requests being made, so the code works, so you need to clarify what doesn't "work" on your end, as it would now be something within the interface. Maybe you didn't setup the goal right or looking at wrong report

[Baumr]

@CrayonViolent, how did you look to see if requests were being made?

[jdonley]

@Baumr There are a lot of different tools and addons (and even built in functionality in some browsers) for seeing requests made on the page. I personally use the Firebug addon for FireFox, though Chrome's built-in developer tools is also pretty nice.

[Baumr]

@CrayonViolent, thanks! That's what I was suspecting — wanted to clarify as to why I'm seeing only one request on that person's site. I was thinking that either they took your advice (and removed one, albeit the less preferred one in this case), or you're using some advanced NSA software :D