Tag: Google Analytics

Track Squarespace form submissions with Google Tag Manager

I use Squarespace to build fast and beautiful marketing sites to attract customers to any product or service. Usually, these marketing sites include a contact form which you can use to track leads.

Squarespace offers poor documentation on how to track these form submissions with Google Tag Manager. I’ll explain how to do it assuming you already have an account with Squarespace, Google Adwords, Google Analytics and Google Tag Manager.

First, copy your Google Tag Manager code into Squarespace:

  1. Login into your Squarespace account.
  2. Click on “Settings”.
  3. Click on “Advanced”.
  4. Click on “Code Injection”.
  5. Copy your Google Tag Manager code in the header section.

code_injection

Now, let’s copy the following the code in the footer section.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
  
var formSubmitted = false;

$(document).ready(function(){
    $('input.button').click(function() {
        window.setInterval(checkFormSubmission, 100);
    });
});

function checkFormSubmission(){
  if(($(".form-submission-text").is(':visible')) && (formSubmitted == false)){
    dataLayer.push({'event': 'formSubmission'});
    formSubmitted = true;
  }
}  
  
</script>

This code checks if the form is submitted without any errors and fires an event called formSubmission. We need to create a trigger in Google Tag Manager that fires when the formSubmission event is fired. That’s how we’ll track when a form is submitted.

  1. Go to the Triggers menu on your Google Tag Manager account.
  2. Click on “New”
  3. Write a name for this trigger. It could be “Web Contact Form Submission”.
  4. Select the “Custom Event” event.
  5. On the event name field write “formSubmission”.
  6. Click on “Create Trigger”.

web_contact_form_submission_trigger

Track contact form submissions on Google Analytics

  1. Go to the Tags menu on your Google Tag Manager account.
  2. Click on New.
  3. Write a name for this tag.
  4. Select product “Google Analytics”.
  5. Choose tag type “Universal Analytics”.
  6. Write you Tracking ID on the given text field (this is id is given by Google Analytics). Select “Event” in the Track type list and then click on Continue.
  7. On the Fire On step click on “More” and select the trigger you just created from the list and click Save.
  8. Click on”Create Tag.

web_contact_form_submission_tag

That’s it. Preview your tag to see check that everything is working and publish your changes. You can now check for this form submission event in your Google Analytics account.

Track contact form submissions on Google Adwords

  1. Go to the Tags menu on your Google Tag Manager account.
  2. Click on New.
  3. Write a name for this tag.
  4. Select product “Google Adwords”.
  5. Select “Adwords Conversion Tracking”.
  6. Fill at least the Conversion ID and name fields (if you have not created any conversions, follow this link and learn how to do it https://support.bigcommerce.com/articles/Public/How-do-I-add-Google-Adwords-Conversion-Tracking) and then click on Continue.
  7. Write you Tracking ID on the given text field (this is id is given by Google Analytics). Select “Event” in the Track type list and then click on “Continue”.
  8. On the Fire On step click on “More” and select the trigger you just created from the list and click Save.
  9. Click on “Create Tag”.

adwords_conversion_tracking

That’s it. Preview your tags to check that everything is working and publish your changes. Feel free to ask any questions in the comments section.

Special thanks to:
http://www.silvabokis.com/squarespace-tips/tracking-squarespace-form-submissions-in-google-analytics-using-jquery