In this article we’ll show you a basic method to track your form submission with emphasis into fields filled out, fields not filled and problematic fields all input into Google Analytics using event tracking. With this data you’ll be able to gather conclusions, fix errors and remove unneeded fields.
Setup Scripts
In our form pages, we will need to add the following 2 scripts in order to input information into Analytics
Script 1: Load Jquery
<script src="//code.jquery.com/jquery-1.7.2.js"></script>
* please note that jquery MUST load before 2nd script PLUS make sure that your page does not have other jquery or conflicting loads of scripts.
Script 2: Javascript Event Tracking for Form
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$(':input').blur(function () {
if($(this).val().length > 0) {
ga('send', 'event', 'contactf', 'completed', $(this).attr('name'));
}
else {
ga('send', 'event', 'contactf', 'skipped', $(this).attr('name'));
}
});
});
})(jQuery);
</script>
The above script reads your form and checks if length of each field in form is more than 0 characters. If field is empty, it sends an event tracking (using the latest universal analytics code) with the label “skipped” and the field name. If the field is not blank it will label the field in analytics event tracking as “completed”.
In addition, you will want to add the following to your form processing script
On script, if form was submitted correctly ->
<script>ga('send', 'event', 'contactf', 'completed', 'success');</script>
Else ->
<script>ga('send', 'event', 'contactf', 'completed', 'problemwithform');</script>
See our Video How-To
* special thanks to Lunametrics for initial data and help with their article
