track-multiple-squarespace-forms-google-analytics-tag-manager.png

Squarespace has become one of the most popular website builders and content management systems for business owners small and large. We recommend it often to our clients for its ease of use in updating content, the speed at which you can get a great looking website up and running, and its cross compatibility with all popular browsers and devices right out of the gate. It's simple and it saves you time and money, so what's not to like, right?

One of the drawbacks of using a website builder versus custom configuring an open source CMS like Drupal or Wordpress is that you're bound to run into some technical limitations. Luckily we've spent enough time with Squarespace to find a workaround for pretty much everything, including one of our favourites - individually tracking lead generation forms on different pages of your website.

We all know that marketing today is all about tracking, tracking, tracking. Which pages perform better? Which acquisition channels drive the most conversions? You need to measure your results to optimize your tactics. That's where we ran into a slight problem when we were getting ready to launch Blutip's website. We had multiple pages with different contact forms on them, but Squarespace doesn't allow you to code in a unique Form ID field for each contact form. How would we be able to tell which lead forms are performing better than others?

Well, with a little fancy Google Tag Manager work, we were able to do just that! By launch we could see how many leads were sent from any individual form on the website, so we know which content pages are converting best and which acquisition channels (PPC, social, referral, organic search etc.) resonate with which pieces of content. Now that's smart marketing!

Here's how you can do the same with your Squarespace site!

(Note: Before you start, you'll need to have created a Google Analytics account and a Google Tag Manager account and linked them to your Squarespace site.)

Step 1: Update Built-In Variables in Tag Manager

First, in Google Tag Manager you need to make sure the built in variables for Clicks and Forms are enabled. To do this, click on Variables and check the appropriate boxes as shown below.

Step 2: Create a Trigger for Your Contact Form

Next, you need to create a trigger to identify the contact form that you want to track. A trigger sets the conditions that a tag will follow in determining whether or not a tag should fire.

Make sure you name your trigger something unique like YourPageName_Form (ie: Pricing_Form). This will make it easier to link your tags to the correct trigger in the next step. In the trigger settings, use the following details:

Trigger type: Form submission
This trigger fires on: Some Forms
Conditions:
- Click Classes equals submitting
- Page URL contains your_url_slug

Since you can't custom code a Form ID field into a Squarespace email form, we use a combination of the click class "submitting" (that Squarespace uses on all email contact form buttons) and the page URL that the form lives on to specify the form you want to track. (Note: Squarespace does not use the click class "submitting" on Newsletter block buttons - I'll cover tracking those in a future blog entry. UPDATE: Learn how to track newsletter subscribes on Squarespace)

Step 3: Create a Tag to House Your Trigger

Now that your trigger is setup, it's time to create the Tag which will house that trigger. I recommend naming the tag similar to the trigger it houses. Typically I name triggers "PageName_Form" and tags "PageName Form" for consistency.

In the tag configuration settings, use the following:

Tag type: Universal Analytics
Track type: Event
Category: whatever you want Google Analytics to receive as the category field
Action: whatever you want Google Analytics to receive as the action field
Label: whatever you want Google Analytics to receive as the label field - usually the name of the form
Non-interaction Hit: False
Enable overiding settings in this tag: checked
Tracking ID: Your Google Analytics tracking ID
Firing Triggers: link it to the trigger you created in Step 2

After you save the tag, you should be able to preview it using Tag Managers "Preview" function. When you submit the form on your website, the tag will fire and send the Event Category, Action and Label data to Google Analytics. After you test that the tag is working and that the Category, Action, and Label are appearing in your Analytics account (use Real Time Analytics to test in real time), you can create a conversion Goal that is triggered when the Category, Action, and Label data are sent to Google Analytics. To learn more about setting up conversion goals (in this specific case it is the Event type), click here. Make sure you repeat steps 2 and 3 for every page that contains a contact form and then setup a conversion goal for each one.

There you have it! Tracking made simple(r). If you'd like to receive future How To blog articles and tips, make sure you subscribe below!