Updated: Use Google Analytics with your Formsite Forms

Formsite Google AnalyticsOur previous instructions on adding Google Analytics to your form are still applicable, but there are some special circumstances you may encounter that aren’t covered there. For the sake of efficiency the important parts of the instructions are repeated here, which makes this article the only source you need for adding Google Analytics to your Formsite form.

We will cover:

  • When, where & how to add Google Analytics and Google Tag Manager code
  • Using Analytics with embedded forms

Google Analytics or Google Tag Manager

The primary difference between Google Analytics and Google Tag Manager (GTM) is that GTM requires adding the code to your page, then all the event tracking is handled in the GTM account. Analytics, on the other hand, requires additional code on the page to customize the event tracking.

For GTM users, use the same instructions for when and where to add the code, then use your GTM account to track your desired events. From here, I’ll refer to only the Analytics code but GTM users should use their GTM code instead.

How to track number of submissions:
Answer: Add your code to your Success Page

  1. Log in to your Formsite account
  2. Click the Settings link on your form
  3. Click the Success Pages link
  4. If you do not have an existing Success Page, give your new success page a name. If you do have an existing Success Page, click to edit that page.
  5. Click the Message text box, then click the source code button (looks like <>)
  6. Paste your code including the <script> and </script> tags
  7. Click Save

(optional) How to also track number of form visitors, time on site, bounce rate, custom events, goals, etc.:
Answer: Add your code to your form, too

  1. Log in to your Formsite account
  2. Click the Edit link on your form
  3. Click the Header/Footer link
  4. Click the Header text/HTML box, then click the source code button (looks like <>)
  5. Paste your code including the <script> and </script> tags
  6. Click Save

Tracking Embedded Forms

Track submissions only:

Create your Success Page using the Redirect URL format then point it to a custom HTML page on your host site. You can then use your site’s Analytics code to track form submissions. No code needed on your form.

Track number of form visitors, time on site, bounce rate, custom events, goals, etc.

GTM users, simply add your code the same as with a non-embedded form. Analytics users, add the following code to the host page and your form:

Host page:
Add your embed code on the page as normal here:

<a name="form123456" id="formAnchor123456"></a>
<script type="text/javascript" src="https://fsX.formsite.com/include/form/embedManager.js?123456"></script>
<script type="text/javascript">
EmbedManager.embed({
 key: "https://fsX.formsite.com/res/showFormEmbed?EParam=B6fiTn%2BRcO55Jx0",
 width: "100%",
 showFormLogin: false,
 mobileResponsive: true
});

// Add your Analytics code below without the 'script' tags:

 (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','https://www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-XXXXX-Y', 'auto');
 // Remove this line: ga('send', 'pageview');
 // Add the code below and replace the bolded text with your values

ga(function(tracker) {
 var clientId = tracker.get('clientId');
 var frameWindow = document.getElementById('formAnchor123456').contentWindow;
 frameWindow.postMessage(clientId, 'https://fsX.formsite.com');
});
</script>

On your form:

  1. Log in to your Formsite account
  2. Click the Edit link on your form
  3. Click the Header/Footer link
  4. Click the Header text/HTML box, then click the source code button (looks like <>)
  5. Paste this code, customizing the text in bold:
<script type="text/javascript">
 window.addEventListener('message', function(event) {
 if (event.origin != 'https://fsX.formsite.com') return;

 ga('create', 'UA-XXXXX-Y', 'auto', {
 clientId: event.data
 });
});
</script>

Save and test. For more information: https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain#iframes

Leave a Reply

Your email address will not be published. Required fields are marked *