How To Track Squarespace Form Submissions

Are you using Squarespace Forms on your website and looking to enhance your understanding of user interactions? Tracking form submissions effectively not only helps in optimizing the user experience but also provides valuable insights into your audience’s engagement with your website. Squarespace Forms are widely used for their ease of use and integration within the Squarespace ecosystem, making them an ideal choice for businesses of all sizes.

In this article, we’ll dive into the specifics of setting up form submission tracking using Google Tag Manager (GTM) with a focus on leveraging Squarespace Forms’ capabilities. Whether you’re new to GTM or looking to refine your existing tracking setups, we’ll guide you through the process of capturing valuable data from your forms to inform your marketing strategies and improve overall site performance.

Note: This guide is part of our conversion tracking series using Google Tag Manager. For a beginner guide to form tracking, do view our main article – How to track form submissions.

Overview of Form Submission Tracking Methods

While Squarespace Forms simplify the creation and management of contact forms, tracking these form submissions to analyze performance involves a few more steps. To fully grasp the impact of your forms, you must be able to capture data on how users interact with them. Here we explore several methods to track form submissions, each suited to different needs and technical environments:

• Page View Tracking: This method involves tracking visits to a specific “Thank You” or confirmation page that users are redirected to after submitting a form. It’s a straightforward approach if your form is set to redirect upon submission.
• Submit Button Click Tracking: By monitoring clicks on the submit button, this method records each attempt to submit the form, regardless of whether the submission is successful or not.
• CSS Selector for Success Message: This method uses CSS selectors to detect and track the display of a success message on the form page, indicating a successful submission without redirection.
• Custom DataLayer Event Tracking: The most robust method, this involves pushing custom events from Squarespace Forms into the DataLayer when a form is submitted, allowing for precise tracking of successful submissions and additional data.

Each of these methods has its own set of advantages and can be implemented using Google Tag Manager to enhance your data collection capabilities. While we will focus primarily on the Custom DataLayer Event for its accuracy and depth of data, these other methods are covered in our main article – How to track form submissions. For this comprehensive guide, we will delve into these methods with a special emphasis on integrating Squarespace Forms’ events for a seamless and efficient tracking setup.

Setting Up DataLayer Event Tracking in GTM for Squarespace Forms

Tracking form submissions effectively in Google Tag Manager (GTM) involves setting up a system to capture specific events and push them into the DataLayer. For Squarespace Forms, this means utilizing its built-in post-submit functionality to trigger a custom event in the DataLayer when a form is submitted successfully. By capturing these events, you can enrich your analytics with detailed interaction data, improving your ability to analyze and optimize user behavior.

Implementing a Custom HTML Tag in Squarespace:

To ensure that form submission events from Squarespace Forms are tracked, you’ll need to add a custom HTML code snippet to the post-submit action of the form. This custom script will push relevant data into the DataLayer, which can then be captured by your GTM setup.

Here’s how to set up the tracking:

1. Open Squarespace Dashboard:
   Navigate to your Squarespace dashboard and select the website that contains the form you wish to track.
2. Locate the Form:
   • Click on ‘Pages’ in the main dashboard.
   • Navigate to the page containing the form you’d like to track.
   • Click on ‘Edit’ at the top of the page to enter the page editor.
3. Edit the Form:
   • Select the form you want to track by clicking on the form itself.
   • Click the pencil icon that appears to open the form’s settings.

1. Add DataLayer Push Code:
   • In the form settings pop-up, navigate to the “Post-Submit” tab. This section allows you to specify actions that occur after the form is successfully submitted.
   • Scroll to the section labeled “HTML” and enter the following JavaScript code:

<script>

window.dataLayer = window.dataLayer || [];

dataLayer.push({

‘event’: ‘SSFormSubmission’,

‘ssFormID’: ‘Contact Form’ //update Contact Form with a unique ID for your form

});

</script>

1. This code snippet pushes an event named SSFormSubmission to the DataLayer whenever the form is submitted. Replace ‘Contact Form’ with a unique identifier for your form to help differentiate between multiple forms on your site.
2. Save and Exit:
   After adding the code, save your changes and exit the form editor.

Details of Data Being Pushed to the DataLayer:

• Event: This is a custom event labeled “SSFormSubmission”, which you will use in GTM to trigger specific tags.
• ssFormID: The unique identifier of the form that was submitted, useful for differentiating between multiple forms on your site.

Utilizing DataLayer Event To Create The Trigger And Tag

After setting up the DataLayer to capture specific events from Squarespace Forms submissions, the next step is to make practical use of this data within Google Tag Manager. This involves verifying that the DataLayer is receiving the data correctly, creating a custom trigger based on the event, and configuring a tag to send this data to Google Analytics 4 (GA4).

Step 1: Verifying Data in the DataLayer

• Enter GTM Preview Mode: Navigate to your Google Tag Manager workspace and click the ‘Preview’ button to activate the preview mode. This mode allows you to see real-time changes and interactions on your site as you test different configurations.
• Submit a Test Form: Go to a page on your website where a Squarespace Form is active and submit the form as a user would. Make sure to fill out the fields required by your form setup.
• Check the DataLayer for Variables: Once the form is submitted, check the DataLayer tab within the GTM preview pane. You should see the new variables such as event and ssFormID populated with data from the form submission. This step confirms that the custom HTML code you set up is working correctly and pushing the desired data into the DataLayer.

Step 2: Creating a Custom Trigger

• Set Up a New Trigger: In GTM, go to the ‘Triggers’ section and click ‘New’. Choose ‘Custom Event’ as the trigger type. For the event name, enter “SSFormSubmission”, the same name used in your DataLayer push. This ensures that the trigger listens for exactly this event coming from the DataLayer.
• Configure and Save the Trigger: Name your trigger descriptively, such as ‘Squarespace Form Submission Trigger’, and save it. This trigger will now listen for the “SSFormSubmission” event and activate associated tags whenever this event occurs.

Step 3: Creating a Tag to Send Data to GA4

• Create a New GA4 Event Tag: In GTM, create a new tag and select ‘Google Analytics: GA4 Event’ as the tag type. Connect the tag to your GA4 property by specifying the GA4 Configuration Tag or directly entering your Measurement ID.
• Set Up Event Parameters: Configure the tag to send event data. Name the event (e.g., ‘Squarespace Form Submission’ – this is the name that will be passed onto GA4), and use the DataLayer variables to send additional data such as the form ID. You can set up event parameters to capture specific form details that are important for your analytics.
• Link the Tag to Your Custom Trigger: Assign the newly created ‘Squarespace Form Submission Trigger’ to this tag. This setup ensures that the tag fires every time the custom event is triggered in the DataLayer.
• Save and Test Your Tag: Save your new tag and use GTM’s preview mode to test it. Submit a form to see if the tag fires and the data appears in GA4’s real-time or DebugView reporting.
• Publish Your Changes: Once you’ve verified that everything is functioning as expected and the data appears correctly in Google Analytics, go ahead and publish your changes in GTM.

Advantages of Using This Method:

• Accuracy and Relevance: By tracking only forms that successfully complete, you ensure the data is relevant and reflects actual user conversions.
• Rich Data Capture: Pushing form ID and responses into the DataLayer allows for deeper analysis of form interactions, enabling more targeted and effective optimizations.

Conclusion

With the setup detailed in this guide, you can harness the power of Google Tag Manager and Google Analytics 4 to capture valuable data from Squarespace Forms submissions, enriching your understanding of how users engage with your forms.

At First Page Digital, we specialize in offering comprehensive digital marketing solutions, including advanced form tracking setups like the ones described here. As a leading digital marketing agency, we understand the importance of leveraging precise and actionable data to enhance campaign strategies and boost conversion rates. As such, all SEO services and PPC campaigns include free tracking setup for your website’s contact form.

If you’re looking to refine your digital marketing efforts or need assistance implementing sophisticated tracking solutions, we invite you to consult with our experts.