Tracking Squarespace Form Submissions Using Google Tag Manager

form-submissions.jpg

Looking for help to track your form submissions in Squarespace? You've come to the right place!

Like you I was also in a similar position and I spent lots of time looking for resources on the web to help track my form submissions, but I was unsuccessful.

After a lot of research, and LOTS of trial and errors I found a solution to this commonly topic thread.

In this post I'm going to show you step-by-step how to track Squarespace form submissions using Google Tag Manager.

Let's get started!

1) Getting Started with your Google Tag Manager Account

If you have already created your Google Tag Manager account (GTM) that's great! If not, it's a really simple process.

Change the "Account Name" and "Container Name" to something meaningful to you.

So we all know what an "Account Name" is, but what is a Container?

Think of a Container as space in a briefcase and everything you put in that briefcase relates to your website.

Now if you had another website you wanted to set up GTM for, then you would create another briefcase and put your website's belongings within.

Pro tip: Using the URL as the Container Name will help manage your Containers more efficiently, especially if you manage multiple websites.

Make sure Web is selected under "Where to Use Container" and hit create.

You will then be presented with a popup titled "Install Google Tag Manager" that has a few lines of code in it. Copy this code as we'll need it for later.

You can also access the code any time by clicking the blue highlighted (GTM-XXXXXX) text next to your website URL.

2) Setting Up Variables

We also need to setup any Variables that we may need to use in GTM. We'll be using one of their built in ones, so lets get that set up.

  • From the GTM control panel click on "Variables" from the left menu, this will bring up the Variables popup.
  • Tick all check boxes under "Clicks" and "Forms" as shown below.

With that complete it's now time to move on to the next step.

3) Installing Google Tag Manager in Squarespace

We are now going to need the code that we copied earlier. This code is used to associate your website with this GTM Container.

Click the blue link (GTM-XXXXXX) next to your website URL to retrieve it.

You will see the instructions to "Copy the code below and paste it onto every page of your website. Place it immediately after the opening <body> tag."

Now you may be asking:

"How do I place the code immediately after the opening <body> tag? On every page of my website?"

Fortunately Squarespace makes this really easy. Here's how:

  • Highlight the code from the popup
  • Copy the code
  • Login into your Squarespace account

Once you have logged into your Squarespace control panel go to:

Settings > Advanced > Code Injection

On the Code Injection page under the header section go ahead and paste the code you copied from the popup.

Note: I placed this code after any other code I had in my header.

4) Create a TAG in Google Tag Manager

Switch back to your GTM control panel as it's time to create our first Tag.

So what exactly is a Tag? 

Think back to my briefcase analogy, a Container holds all the belongings to a website. A tag is one of those belongings, and each tag can do something different.

We want a tag to track form submissions.

  • From the main GTM menu select "Container"
  • Next click "Tags" from the menu of the left

This will take you to the Tag page where you will see all your Tags (none right now) and a red button to create a new one.

  • Click "New" and let's create our Tag

I have listed out in Bold what you will be asked to enter and for each I have explained what they are and given the details I used.

Choose Product: Google Analytics
We want to track the form submissions in Google Analytics so select that.

Choose a Tag Type: Universal Analytics
When we create our property in Google Analytics we nearly always use Universal Analytics. It's the default setting so you won't need to change anything here.

Configure Tag: Tracking ID
This is your Google Analytics property ID. Normally looks like UA-XXXXXXXX-X. Copy it from Google Analytics and paste it here.

Track Type: Event
We want to track the form submission as an event in Google Analytics.

Event Tracking Parameters

  • Category: "Submit"
  • Action: "Click"

You can use whatever names you would like for these, these are what I used.

Don't click Create Tag jut yet as we need to create a Trigger. To confirm you have everything set up correctly, this is what you should have so far.

5) Setting the Trigger - UPDATED SEP. 14, 16

'Fire On' is where we set our Trigger. A Trigger is an action that causes an Event to occur. Here's another analogy example.

A gun (Container) is filled with ammunition (Tags). Pulling that weapon's trigger is the 'Trigger' for the gun to fire.

Lets add a Trigger to our Tag.

Select Click and the Create Trigger popup will appear.

  • For the Configure Trigger option select "All Elements" as the Targets.
  • Then select "Some Clicks" under Fire On as we only want to target the buttons of our forms.

You will now see three text boxes.

  • First box select "Form Classes"
  • Second box select "Equals"

In the third box we need to add the class of our form. But first we need to find it.

  • Open your Squarespace website and go to the page your form is on, e.g contact page.
  • Find the button of your form, right click on it and select "Inspect". This will open the console where you will be able to grab the class of the button.
  • Highlight the class by double clicking and then copy it as you we'll be pasting it shortly.

Go back to Create Trigger in GTM and paste what you just copied into the third text box. Your Create Trigger popup should now look something like this.

Go ahead and click the "Create Trigger" button.

Name the Trigger "Form Submission Trigger" and click Save.

Next, click "Create Tag" and name the Tag something meaningful. I named ours "Form Submission". Click Save.

6) Testing

All done. Now all we need to do is make sure that it works!

You should still be on the Tags page of GTM. In the top right you should see a red button titled "Publish" and if you click on the arrow you will be shown a dropdown with options.

Select Preview and Debug, wait for the page to reload and you will then see an orange box saying "Now Previewing Version 1".

Open your website in a new tab of your browser and visit the page that has your form.

You will now see the GTM console open at the bottom of the browser. This is a live debugging tool so you can see if your Tag is working correctly.

You will see under Tags a summary of Tags both 'Fired' and 'Not Fired' on the page.

Go ahead and click your form button and you will now see your Tag has been listed under the 'Tags Fired On This Page' summary. Congrats, it's working!

7) Real Time Events in Google Analytics

Let's now view our data in Google Analytics.

  • Log in to Google Analytics
  • Select Reporting from the main menu

Using the left menu

  • Select "Real Time"
  • Next select "Events"

You will now see any events that have occurred recently on your website and you will see your form submission have been tracked as an Event as show below.

This works in real time so go ahead and click your form button again and you will soon see a vertical blue line appear indicating the event has been tracked.

8) Publish and Go Live

Now we know it works it's time to come out of Preview mode and Publish the Tag to make it live.

Go back to GTM. Where you selected Preview and Debug change the option to "Publish".

You will see a popup similar to the image below. This shows a summary of what changes are about to go live. Go ahead and click "Publish Now".

Once you start receiving form submissions the data will be collected and you will now be able to see them under Behavior and Events in Google Analytics.

You are now all setup and ready to track those form submissions!

I hope this post provided you with some actionable advice to solving the issue of tracking your form submissions in Squarespace using Google Tag Manager.

I would love to hear what you have managed to track using Google Tag Manager and Google Analytics. Are there other Analytics based problems you are having with Squarespace? Let me know in the comments section below!

 

UPDATED SEP. 14, 16

Hi guys! Firstly thank you for all your comments we really appreciate them. Secondly I apologize for this update taking a while; have been swamped, but without further delay lets jump in!

So the problem is that when a form is submitted it fires the same tag of all forms, which doesn't really provide accurate data when tracking events. It works fine for those who have one form, but is no help with multiple forms.

First go into the tag and make sure that under 'Advanced Settings' that 'Tag firing options' is set to 'Once per event'.

Now jump into the Trigger as we need to adjust some settings. Ensure the 'Trigger type' is set to 'Form Submission' and that the option 'This trigger fires on' is set to 'Some Forms'.

Now ensure your settings are the same as shown below, but change the URL to the page where your contact form is on.

The problem with Squarespace is that it doesn't provide a unique 'Form ID' that we can use with the GTM Variables, so we have to make do with Classes.

Squarespace assigns a unique Class to Form Blocks called 'submitting'. If we use this unique identifier along with the Page URL we can isolate each contact form on separate pages. Give it a try!

But what about Squarespace Newsletter Blocks?

I knew you would ask that. As you are probably aware the Newsletter Block in Squarespace is a form.

Squarespace kindly provides a unique Class for Newsletter Blocks called 'newsletter-form submitting' and we can easily use this to track Newsletter signups as shown below.

If you wanted to track which pages the Newsletter signups were coming from then you would add the second variable to the trigger, Page URL, as we did for contact forms.

As mentioned before Squarespace doesn't give us that unique 'Form ID' like WordPress or traditional HTML markup gives, but hopefully this is something they will change in the near future especially with the growth of GTM!

We still love you Squarespace!


Written by

Dale Powell, Web Developer

Web Developer at Atomic Marketing. Passionate about coding and enjoy writing about Squarespace, Analytics and SEO. Feel free to connect with me!