Tracking an individual Squarespace Form Submissions Using Google Tag Manager

Do you want to track a specific Squarespace Form submission in Google Tag Manager to fire a specific Tag within GTM?

You may have found that in the process of setting up GTM the only variable you are able to use is Click Classes with a value which looks something like button 'sqs-system-button sqs-editable-button'. If you have more than 1 form on a page this may cause issues, or you may wish to give a form submission a unique ID on which to set up your variable/trigger.

This article will give you an overview of how we achieved this.

Basic References

Before you get started you might want to check the following as background info:

  • Ensure you have Google Tag Manager set up on your Squarespace site. If you don’t know how to do this check out this article from Yo Web!

  • It will be useful to have a basic understanding of GTM Data Layer - we found this video really helpful from Measure School

PART A 

In Part A we'll cover setting up a tag which triggers on a click of a generic form submission button in Squarespace. In Part B we'll cover how to push custom variables into the Data Layer on which you can customise your triggers / events to being specific to that event. If you're not sure what this means watch the video under the basic references above and then come back and work through Part A.

Step (1) Set Up Built In Click Variables

  • Open GTM and navigate to Variables.

  • Under Built in Variables Press Configure.

  • Ensure that you have all of the Built In Variables under Click active. (Image 1)

 Image 1

Image 1

Step (2) Preview your Website and Understand GTM Preview

  • From your main workspace click preview (Image 2)

  • Go to a new browser window and go to your website, you should see the GTM in the bottom of the window. If you already have your webpage open hard reload your page (Ctrl F5 should work)

  • Navigate to the page with your form on it

  • Click on the Tag ‘Variables’ in the GTM window (Image 3)

  • Start to fill in your form

  • Under the Summary header on the left you will start to see gtm.click events accumulating

  • After you have submitted the form click on the last gtm.click event, you’ll see a Click Classes variable (Image 4)with a value of something like ‘button sqs-system-button sqs-editable-button’. Copy this value.

 Image 2

Image 2

 Image 3

Image 3

 Image 4

Image 4

 

Step (3) Step Up a Generic Contact Click Trigger

  • Navigate to Triggers > New

  • Label the Trigger - I’ve used RD - Click - Contact but you may have your own naming convention in mind.

  • Choose a trigger type of Click-All Elements

  • Select to fire on some clicks

  • Set the trigger to fire when Click Classes contains - paste in the value that you copied above. (Image 5)

  • You’ll see now that I also added an additional event to the trigger which is the URL of our contact page.

 Image 5

Image 5

Step (4) Set Up your Tag

  • Name - We used  GA - Event - Contact Form Submission (this can be whatever you want)

  • Tag Type = Universal Analytics

  • Category = Click (this can be whatever you want)

  • Action = Contact Form (set to what you want)

  • Click Enable Override settings and either paste in your Analytics Tracking ID or select gaProperty if you have set it up.

  • Scroll down to triggering and select the trigger you have just created. (Image 6 and 7)

  • Click Save

  • Now publish your Tag - on the top right click submit, then publish.

 Image 6

Image 6

 Image 7

Image 7

Step (5)  Test your tag

  • Navigate back to your contact page, refresh the page (Ctrl F5)

  • Fill in and submit your form

  • On GTM window select tags on the top

  • You should see that the tag was fired (Image 8). If this didn’t work click up and down the gtm.click under summary and see if you can find it. If not, check your steps here and make sure you get this working first before you move on.

 Image 8

Image 8

Part B - Pushing a custom Event into the Data Layer on a Squarespace

Now the problem we had here was that we wanted to absolutely reference an individual form submission. It’s ok to refine the trigger using the webpage by URL, but we felt it would be better to have a specific variable that can be referenced.

Step (6) - Pushing variable data into the Data Layer from a Squarespace form submission

  • Open your Squarespace form, press edit, navigate to advanced and insert the following code into into Post Submit HTML. (Image9)

<script>

console.log('THIS IS FIRING');

dataLayer.push({

   'event': 'formSubmission',

   'formType': 'contactUs',

   'formPosition': 'contactPage',

   'formID': 'contact001'  (this is the value that uniquely identifies your form submit)

   })

 </script>

  • The ‘event’ tag must always be in this form - but you can change formSubmission to a different string and set up whatever variables you want underneath.

  • Press Apply, Save the Page.

 Image 9

Image 9

 

Step (7) - Add User-Defined Variables to GTM

  • Open GTM and navigate to Variables.

  • Scroll down to User-Defined and Press New. (Image10)

  • Variable type = Data Layer Variable

  • Data Layer Variable Name = formID

  • Set Default Value = not set (Image 11)

  • Repeat this step and create 2 additional user-defined variables formPosition and formType

 Image 10

Image 10

 Image 11

Image 11

Step (8)

  • Publish all of the changes in Google Tag Manager using Submit>Publish and Create Version

  • Return to your website (Ctrl F5 to refresh) and resubmit the contact form

  • Under the Summary now when you submit the form you should see formSubmission under the Summary and the custom variables that we have just set up (Image 12)

 Image 12

Image 12

Step (9) - Amend your trigger and retest

  • Go back to the trigger that you set up in Step 2 within Google Tag Manager

  • Change the Trigger Type to Custom Event and enter formSubmission

  • Click Edit

  • Remove click classes = button sqs-system-button sqs-editable-button

  • Add the follow Event values to the trigger

  • formID contains contact001

  • formPosition contains contactPage

  • formType contains contactUs (Image 13)

  • Publish all of the changes in Google Tag Manager using Submit>Publish and Create Version

  • Return to your website (Ctrl F5 to refresh) and resubmit the contact form

  • The Custom Event Trigger should now fire (Image 14)

  • Go to Google Analytics

  • Real Time, Events

  • You should see events accumulating as you submit forms on your website.

 Image 13

Image 13

 Image 14

Image 14