Tracking form submission conversion is among the challenging KPIs for most digital marketers. I’d like to discuss a few methods around form submission conversion tracking using Google Analytics.

Some times it’s not easy to create thank-you pages for all web forms. Due to technological complications, it’s not easy to integrate a thank-you page on some web forms to be able to track conversions and set our conversion goals based on page views on specific AJAX thank-you pages or Thank you prompts loading in layers. Custom web forms, Contact Form 7 plugin for WordPress and RSForms components for Joomla are among the forms that sometimes are not easy to track forms individually depending on the version and type of use.

 

 

What if you have 5-10 forms? You need to create 10 different thank-you pages then track each forms’ performance individually. Even so, then overall campaign conversion will be hard to determine. This is valid if you are not using multistage forms.

 

Here are two ways to do multiple form conversion tracking;

  1. Having one thank you page for all forms and track individual submissions through Google Analytics event tracking (Which is the purpose of this post)
  2. Create multiple Thank-You pages for each form and set conversion goals individually for each page.

First method is more precise, due to effective tracking of individual landing pages or multiple call to actions within the context of a page.

With Google Analytics’ event tracking using ga.js, you can easily track the following and have them inside your Analytics dashboard for a quick view;

  • Any Flash-driven element, like a Flash website, or a Flash Movie player
  • Embedded AJAX page elements
  • Page gadgets
  • File downloads
  • Load times for data
  • Form submissions

and a combination of creative ideas in between. First you need to make sure your website is properly tracked using Google Analytics. Be aware that there are two codes to track your website activity with Google Analytics, one is Analytics.js and the other is ga.js. This post is provides insight into using ga.js which is the recent Google Analytics code. You can easily update yours. Here is a link to make sure you are using the right approach;

 

Event Tracking

Tracking site activity with Google Analytics

If the name of your page tracker object is _gaq (Which is the case most of the time), and you want to track the form submission as an event. In order to do this, you will need to run the following JavaScript code when the submission event occurs, basically put in the on_submit event of your form submit button:

Click here for more info on Google developers support network.

_gaq.push(['_trackEvent', 'Contact Form', 'Submit']);

Here is the syntax to track an event,
_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

say when a link is clicked;

<a href="#" on-Click="_gaq.push(['_trackEvent', 'Videos',
'Play', 'Baby\'s First Birthday']);">Play</a>

for in depth information on event tracking please visit Event tracking – Web tracking ga.js

Here is the good part. Say you want to track form submissions. Here is a sample java scripts code snippet you need to insert in the page that holds the form code.

<script type=”text/j-avascript”>
function trackSubmissions(form, category, name, value) {
try {
_gaq.push([‘_trackEvent’, category, name, value]);
} catch(err){}
setTimeout(function() {
form.submit();
}, 100);
}
</script>

after inserting the code into the page, you can call this function on all forms within the page and inside the “onsubmit” event handler. Here is a sample code;

<form on-submit=”trackSubmissions(this, ‘category’, ‘name’, ‘value’); return false;”>
</form>
For more details regarding the code same, please visit Stackoverflow

In order to track your events, you need to know which elements within the syntax are required, and which elements are optional. Here is a list;
_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

  • category (required)
    The name you supply for the group of objects you want to track.
  • action (required)
    A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
  • label (optional)
    An optional string to provide additional dimensions to the event data.
  • value (optional)
    An integer that you can use to provide numerical data about the user event.
  • non-interaction (optional)
    A boolean that when set to true, indicates that the event hit will not be used in bounce-rate calculation.

For wordpress specific projects using contact form 7 take a look at the On_Sent_Ok action hook method.