ROI: Tracking form submissions in Google Analytics

The most important role of any stats software like Google Analytics is tracking the return on investment of your web site.  One way to do this is through Analytics' "goals".  By setting custom goals for your site within Analytics, you can track how many times your web site fulfills its primary purpose of converting viewers into contacts or paying customers.

For ecommerce sites, setting goals is pretty simple: just attach a goal to a checkout page.  You can even attach the dollar amount to the goals.  But what about other types of sites?

If your site's primary function is to generate interest in your product/service and entice the user to interact with you, you can do that a number of ways.  I'll focus on two: contact forms, and blog comments.  They are very similar from a programming standpoint, and so we can treat them in the same manner.  Both show that there are potential users interested in what you have to say, and they both involve submitting a form.

There are a couple ways to track form submissions in Analytics.

Redirect Page

Within your CMS, you ought to be able to set your forms to redirect to a "thank you" page on submission.  If so, then you're already there.  Just create a slightly different thank you page for each form that you have (e.g. www.example.com/comment-thank-you or www.example.com/contact-thank-you).

Virtual Pageview

But "thank you" redirect pages have their pitfalls.  They interrupt the flow of interaction: I'd much rather that the user be directed back to the blog article after posting a comment.  Additionally, the redirect pages often find their way into search engines, which is a bit confusing.

One alternative to the redirect page is to send Google Analytics a virtual pageview.  In essence, you're telling Google that we're loading a page that doesn't actually exist.  (Technically, that page might exist, but the point is that we're not really loading it in the browser.)  For the sake of argument, I'm going to call my page www.example.com/comment-submitted.

Hijacking the Form Submission

My first inclination was to hijack the form submission within jQuery and send the Analytics information just before the submission:

$(document).ready(function() {

    $('#comment-form').submit(function() {
        if (typeof(_gaq) == 'object') {
            _gaq.push(['_trackPageview', '/comment-submitted']);
        }
    });

});

Unforutnately, this method is unreliable for several reasons:

1. If the user forgets to fill in a required field, or if he previews his post, you might get spurious page views.
2. If the form has multiple submit buttons, you might have to change the jQuery above in order to send the correct action through to the CMS.
3. Without creating a delay between the Analytics push and the form submission, it's possible that the push won't be received.  Frankly, I don't like counting on JavaScript delays when dealing with important data submissions.

Looking for Form Submission Confirmation

I would really rather push to Google only after I'm sure that the form has been submitted successfully.  So I looked into the HTML output after I submitted a comment.  Drupal inserts the following status message after a comment submission:

<div class="messages status">
Your comment has been queued for moderation by site administrators and will be published after approval.
</div>

So I just need to check for that message via jQuery:

$(document).ready(function() {

  if ($('.status').text().indexOf('Your comment has been queued') >= 0) {
    if (typeof(_gaq) == 'object') {
      _gaq.push(['_trackPageview', '/comment-submitted']);
    }
  }

});

This checks for the presences of the text "Your comment has been queued" within a div with a class of "status".  This is a bit tenuous: if the text within the status changes after an update to Drupal, you'll need to adjust the JavaScript accordingly.  But with that caveat, it seems very reliable.

Note that we're checking to see if _gaq is an object before attempting to send the virtual pageview through to Google Analytics.  In most of my Drupal installs, I track only anonymous users (not logged in).  This keeps my stats from bloating when my site editors are viewing the site.  So the typeof statement ensures that Analytics is actually loaded on the page before attempting to send the pageview.

Setting Up Goals

Setting up goals in Analytics is pretty easy... once you find it.  When viewing your site dashboard:

1. Click on "Analytics Settings" in the upper lefthand corner of the page.
2. On the following page, select "Edit" for the appropriate profile.
3. Under the Goals tab, click "Add Goal".

Because Google changes things so often, the next steps might change fairly often.  In general, you want to set up a "URL Destination" goal.  Where they allow you to type the URL, type it in the form /comment-submitted, leaving off the http://www.example.com.

That's all there is to it.  There is a caveat here to keep in mind.  As of this writing, there is no way to delete a goal.  So if you decide to stop tracking a particular goal, you can either edit it into a new goal or just turn if off.  But the goal itself (and the data, I believe) linger.  They just don't show up in your reports.