How can I set up Google Analytics with my forms?

Introduction

Google Analytics is a developer tool created by Google that allows you to learn about and manage the way people experience your site.  You can implement Google Analytics on any website to see how users browse your site, from what pages they arrive at your forms, how many times your forms are submitted, and so much more! In this article, you will learn how to set up Google Analytics, and further more, how to track form submissions.

Setting Up Google Analytics

If you are a new user to Google Analytics, you will want to make sure you follow these directions to create an account and set up your tracking code correctly. If you are already a Google Analytics user, you will want to make sure your tracking code is set up correctly on your site.

What's a tracking code?

A tracking code is a block of javascript that is put on each page of your website that you want Google Analytics to track, thereby gathering statistics of what pages people frequent most, what types of devices they are using, etc.  It will usually look something like the code below.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');  // Replace with your property ID.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Universal Analytics

What is Universal Analytics you might ask? Universal analytics is the new standard for Google Analytics. Just a little while ago, Google Analytics used what is now called Classic Google Analytics. Just recently, Universal Analytics has become the new standard, as it allows real-time statistics and more functionality, among other added benefits. So why is this important? Classic Google Analytics and Universal Analytics use slightly different code. Currently, it is best practice to use Universal Analytics. If you are unsure of which version you are using, you can refer to this article to help you. If you find that you are using Classic Google Analytics, you can follow the directions in the Upgrade Center to upgrade to Universal Analytics. Please note, all of our code examples for Google Analytics use the coding standards for Universal Analytics.

Using event tracking

You can use Google Analytics to track individual events that users make on your site, such as form submissions. The custom code example can be used as such to track form submissions on a form-by-form basis. You can then track the events under the Behavior > Events tab. In order to use event tracking with Formidable, you must submit the form with AJAX.

Setting Up Event Tracking

The custom code example can be used as such to track form submissions on a form-by-form basis. This script should be placed either after your form shortcode on a page, or in the form's "On Submit" message in your Form Settings.

<script>
jQuery(document).ready(function($){
  $(document).on( 'frmFormComplete', function( event, form, response ) {
    var formID = $(form).find('input[name="form_id"]').val();
    if ( formID == 5 ) { // change 5 to your form id
      ga('send', 'event', 'form name', 'sent'); // change 'form name' to the category set in Google
    }
  });
});
</script>

Viewing Your Events

Once a user submits a form that you are implementing event tracking on, you can view the events by going to the Google Analytics Dashboard, clicking Behavior > Events > Overview on the left menu. This will show you an overview of your events based on category, action and label.

Using Auto-Event Tracking with Google Tag Manager

With Google Analytics, it is possible to track events with Google Tag Manager. A brief description of auto-event tracking from a Google support article states the following:

With Auto-Event Tracking in Google Tag Manager, capturing these actions is easy. Rather than hardcoding each click action with Javascript (such as ga('send', 'event', 'category', 'action', 'label') in analytics.js), you can create event tags directly within the Google Tag Manager interface and fire them with triggers based on predefined variables or on custom variables that you can build within the Google Tag Manager UI.

Please note, if your form submits with AJAX, it will prevent event tracking with Google Tag Manager from working properly.

You can also find a tutorial from a user about how to track leads with Google Tag Manager form submit tracking.