Track Your Form with Google Analytics

Written by Lance Padgett on November 8, 2013

Posted in Analytics

We’ve since launched a Google Analytics integration. Check out the Analytics integration.

Our built-in form analytics are pretty sweet, but if you’d like that extra level of insight, then we will walk you through adding Google Analytics tracking to your online form. So you know starting out, the only way you can add Google Analytics tracking to your Formstack form is if you (1) have your own website, (2) have access to make changes to your website, and (3) are somewhat familiar with HTML. Okay, good on all three? Let’s get started!

Create Your Website Page

The first thing you will need to do is create a new page on your website. This page can exist wherever you would like on your site. The reason you have to create a page on your site is because you cannot use the Google Analytics tracking code simply on the Formstack hosted version of your form. Google tracking is tied to the web property domain that is set up in your Analytics account. (This means you can only track pages from sites that you own, and the Formstack hosted link is technically on the Formstack.com domain.) Therefore, the form must exist on your website in order to take advantage of Google tracking.

There are several ways you could be performing this action right now. If you are advanced with building websites, then maybe you’re working on local files. If you’re using a Content Management System like WordPress, then you’ll need to know how to add a new page to your website or blog. If you are using a CMS, then be sure you have access to edit the HTML on the page. What we will do in the next step is actually put your Formstack web form on the page you’ve just created.

 

Build & Embed Your Form

Step 2 is to first build the form you need inside Formstack. After you’ve built your form, we are going to use either the Javascript form embed script or the full HTML embed code depending on your level of knowledge and customization needs. When you are finished building, hop over to the Publish tab in Formstack. On the left you will see the ‘Embed Form’ tab that houses the Javascript embed script and the ‘Advanced’ tab that houses the full HTML embed code. I’ll go over the differences below.

Javascript Embed Script: An embed script that embeds your form in the desired place, but also reflects any changes you make to your form after embedding. You will not have to update this type of embed since it checks the status of your form each time it loads.

Full Form HTML: An exact copy of your form html. Once you copy the full HTML, changes thereafter inside Formstack will not be reflected wherever you embed this code. You will have to re-embed the full code after you’ve made changes to your form.

 

Add Tracking Code

Next, you will want to hop into your Google Analytics account and go the the Admin section for the web property you wish to track. If you are not at all familiar with the Google Analytics platform, it is a free website tracking service provided by Google that gives you lots of actionable data and insight to your website traffic. If you’re reading this post, chances are you’ve used Analytics in the past, but if not, Google has a nice getting started guide.

Google Analytics Tracking Code

When in your account, find the tracking info tab for your web property. This is where your tracking code is found. Copy and paste this code from the box, and place it in the <head> section of your new webpage.

Google Analytics Code

An alternative method if finding the <head> of your web page is making you nervous, would be to copy and paste the analytics code into an embed field on your Formstack form. This will assure the code makes it on the page with either method of embedding.

embed analytics code

 

Make it Live

Now that you have your new website page with your Formstack form and your Google Analytics code on the page, you’re ready to push that page live on your site! Again, I cannot walk you through this step as it will be different depending on your method. It might be as simple as clicking a button to  publish the page in your CMS or having to deploy code if you develop your own site. Once your page is live, you can start collecting traffic data through Analytics!

 

Advantages/Disadvantages

To recap, you took advantage of Google Analytics tracking by making a dedicated web page on your site, built and embedded your Formstack form on that page along with the Analytics tracking code, and then published the page to your website.

Everything nice comes with a price. One disadvantage of using this method is having to re-embed the form (only if you used the full HTML embed) each time you need to make a change to your form. However, the advantages are many when it comes to having better tracking data on your form, but there are a few additional benefits as well. Using this method, you can place your form page exactly where you want it on your website and also have control of the URL where it is found. It looks much cleaner for your site visitors when they don’t have to leave your site to fill out your form. You will hopefully see a higher submission rate by doing this. One last advantage is that you don’t have to use a form theme if you use the full HTML embed code. You can place all of your CSS styling directly on the page or even write your own style sheet and call it in the code.

Hopefully you find this post helpful. Let us know in the comments below!

Start building »

 blog free trial cta