How To Add Google Analytics To Squarespace & Setup Event Tracking Using GTM

How To Add Google Analytics To Squarespace & Setup Event Tracking With GTM

Jump To:

One of the first things you should do after creating your Squarespace site is to install Google Analytics so you can measure how many people have visited your website and how they are engaging with your business. In this article, we will walk you through how to add Google Analytics to Squarespace sites using two different methods. As a bonus, we’ll also show you how we recommend tracking Google Analytics events too.

2 Ways To Install Google Analytics To Squarespace

  1. Directly in Squarespace
  2. Using Google Tag Manager (Recommended)

Before going any further, make sure that you’ve signed up for a Google Analytics account and created your Google Analytics property. If you are trying to add Google Analytics 4 to Squarespace, we recommend that you skip the first section and jump right to the installing GTM instructions. 

Get Universal Analytics Code

Step one for adding Google Analytics to Squarespace using either method is to get your Universal Analytics code (UA code) from your Google Analytics account.

  1. Log into Google Analytics.
  2. Navigate to the Admin settings by clicking the gear icon in the lower left
  3. Choose your Universal Analytics property
    • If you recently created your Google Analytics account, you may have only created a Google Analytics 4 (GA4) property so you may need to go back and create a Universal Analytics (UA) property.
    • You can tell the difference between GA4 and UA properties because GA4 properties will only have 2 columns in the Admin settings whereas UA properties will have 3. This is because GA4 properties use data streams instead of View-level settings.
  4. Under Property Settings (2nd column), click Tracking Info > Tracking code.
  5. Copy your UA code

Now that you have your UA code, decide if installing Google Analytics directly in Squarespace or installing GA via GTM is right for you. If you are unsure which one is best for you, feel free to reach out to our Google Analytics experts today.

Add Google Analytics to Squarespace Directly

The simplest way to add Google Analytics to Squarespace is to add it directly into the Squarespace settings. However, you’ll then be required to send events directly from your Squarespace site as well.

To get started, once you have a Google Analytics account, you’ll next need to sign in to Squarespace to add your Google Analytics property to Squarespace.  

Pro Tip: You can install Universal Analytics or Google Analytics 4 directly on your Squarespace sites. However, you may find it easier to use the Google Tag Manager (GTM) method below to do this, especially if you’re installing both UA & GA4.

Connect Universal Analytics to Squarespace

  1. Sign in to your Squarespace dashboard.
  2. In the menu on the left-hand side, click Settings > Advanced > External API Keys
  1. Once there, paste your Google Analytics UA Tracking ID or GA4 Measurement ID in the “Google Analytics Account Number” field, then click Save. You can add both UA and GA4 by adding their tracking IDs, separated by a comma (i.e. UA-123456789-1,G-XXXXXXXXXX).
You can only add your UA property ID or GA4 Measurement ID here. It will not accept your GTM ID

That’s it. You’ve now added Google Analytics directly to your Squarespace site. You’ll now begin collecting basic Google Analytics information for whichever property you entered.

Now that you’ve added your Google Analytics code, you can collect additional information when certain actions, such as a form submission, occur on your website. Jump down to our GA event tracking on Squarespace section below for more information on tracking your Squarespace website events.

Add Google Analytics To Squarespace Via GTM

Using GTM to add Google Analytics to Squarespace is our recommended method. In our opinion, it is by far the best way to install both Universal Analytics and Google Analytics 4 on Squarespace and it also allows you to easily track events, which we’ll get to later.

Follow the steps below to add both versions of Google Analytics to Squarespace using Google Tag Manager.

Create GTM container

If you have not already done so, navigate to tagmanager.google.com and create a new Google Tag Manager container and copy your GTM code.

Add GTM to Squarespace

  1. Log in to your Squarespace dashboard
  2. Navigate to Settings > Advanced > Code Injection
  3. Copy the GTM script code (first snippet) and paste it into the Header section
  4. Optionally, also copy the GTM noscript (second snippet) and paste it into the Footer section.
  1. Click Save.

After clicking Save, your Google Tag Manager container tag will be added to your Squarespace site and you can continue to add any tags (such as either version of Google Analytics or the Facebook Pixel) to your website using GTM’s convenient UI.

Keep reading if you’d like to add form submission events to Google Analytics from your Squarespace site.

Add Google Analytics Events to Squarespace

Now that you know how to add Google Analytics to Squarespace, you can enhance the data you collect by adding Google Analytics Events to Squarespace as well. While this section is a little more advanced than the previous sections, taking the time to set up your GA events now will help you collect information that allows you to make better business decisions right from the start.

Just like installing Google Analytics on your website, you can add Google Analytics events to your Squarespace site directly or using GTM.

Add Google Analytics Events Directly in Squarespace

If you aren’t using Google Tag Manager on your Squarespace website, you can add events directly to your Squarespace website by adding code to your Squarespace forms. The specific code is different whether you’re using analytics.js or gtag.js and whether you’re using Universal Analytics or Google Analytics 4.

  1. Find the form on your website that you’d like to track (newsletter sign up, contact us, etc.). 
    • From within the Squarespace dashboard, click on Pages
    • Select the page with the form
    • Click on “Edit” on the top
  2. Select the form you’d like to track and click the edit pencil
  3. In the pop-up, click on Post-Submit. This allows you to edit the action after the form is successfully submitted.
  1. In the section labeled “HTML”, add the following javascript code depending on which version of Google Analytics tracking script you’re using.

Universal Analytics Events

In Universal Analytics, Events are made up of an Event Category, an Event Action, and an Event Label.

//Use the code below if you're using analytics.js. Universal Analytics only.
<script>ga('send', 'event', 'Lead', 'Form Submission', 'Contact Form’);</script>
//Use the code below if you're using Global Site Tag (gtag.js) for Universal Analytics.
<script>gtag('event', 'Form Submission', {'event_category': 'Lead','event_label': 'Contact Form'});</script>

Pro Tip: To determine which version you need, you can inspect the source code of your Squarespace site by right-clicking, then selecting “Inspect” then searching (CTRL + F) for “analytics.js” (without quotes) or “gtag.js” (without quotes). If you don’t see either of those, you might be using gtm.js.

  1. Using the above code (either version) will send a Google Analytics event to your Universal Analytics property with the below information every time this form is successfully submitted. Feel free to change the code above to match your desired naming conventions making sure to keep the ‘apostrophes.’
    • Event Category: Lead
    • Event Action: Form Submission
    • Event Label: Contact Form
  2. Alternatively, if the form redirects to a thank you page after submission then you can track successful form submissions by creating a thank you page destination goal in Google Analytics. However, while this method may be easier, keep in mind that this is less ideal than the event tracking method above because people can visit a thank-you page more than once.

Google Analytics 4

Although events work differently in Google Analytics 4 than they did in Universal Analytics, the Global Site Tag (gtag.js) can still be used to add GA4 events to Squarespace.

//Use the code below if you're using Global Site Tag (gtag.js) for Google Analytics 4.
<script>gtag("event", "generate_lead", {form_name: "contact_form"});</script>
  1. Using the above code will send an event to your Google Analytics 4 property using the recommended event name generate_lead and one custom event parameter. Feel free to change the code above to match your desired naming conventions making sure to keep the “quotes.”
    • Event Name: generate_lead
    • Event Parameter Key: form_name
    • Event Parameter Value: contact_form

Pro Tip: If you are using this code on more than just your Contact Form (i.e. you’ve changed the Event Parameter Value), then don’t forget to register your form_name event parameter as a custom dimension. This will help you to determine which form was submitted when you’re reviewing your generate_lead events in GA4.

That’s it. Once you’ve added this code to your forms, you’ll be able to see Squarespace form submission events in your Google Analytics account. Be sure to add the above javascript to every form on your website making sure to edit it appropriately if you want to track more than one form. 

Add Google Analytics Events to Squarespace Using GTM

If you’re already using GTM to track other events (or would like to start), follow the steps below to track form submissions in Squarespace using GTM. Although this is a little more involved than the direct section above, using GTM lets you use a graphical user interface to create and send form submission events to both Universal Analytics and Google Analytics 4.

Add dataLayer Push To Squarespace Form

  1. Find the form on your website that you’d like to track (newsletter sign up, contact us, etc.). 
    • From within the Squarespace dashboard, click on Pages
    • Select the page with the form
    • Click on “Edit” on the top
  2. Select the form you’d like to track and click the edit pencil
  3. In the pop-up, click on Post-Submit. This allows you to edit the action after the form is successfully submitted.
  1. In the section labeled “HTML”, add 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. The above code will push an event called “SSFormSubmission” (without quotes) to the dataLayer which will be picked up by your Google Tag Manager container tag. Be sure to replace ‘Contact Form’ with an appropriate form ID/label.

Capture Form ID As A Data Layer Variable

  1. Next, you’ll need to log in to your Google Tag Manager account and navigate to Variables
  2. Scroll down and click New in the User-Defined Variables section
  3. Create a new Data Layer Variable
    • Give the variable a name like “DLV – ssFormID”
    • Enter “ssFormID” (without quotes) as the Variable Name. This field is case-sensitive.
    • Ensure that Version 2 is selected.
    • Click Save
This variable will allow you to create unique events in GTM for each of your forms using the unique ID you chose in step 4 above.

Create Custom Event Trigger

Now that you have your variable setup, you’ll need to create your event trigger in Google Tag Manager.

  1. Click Triggers within GTM
  2. Click ‘New’ to create a new trigger
    • Give the trigger a name such as “cEvent – Contact Form”
    • Choose the Custom Event trigger type
    • Optionally, you can create a unique trigger by selecting “Some Custom Events”  and then adding the previously created {{DLV – ssFormID}} variable with a condition. If you’ve been following this guide exactly, then you can choose “DLV – ssFormID equals Contact Form” as shown in the image below.
    • Click Save
Since there could be multiple SSFormSubmission events if you have multiple forms on your website, choosing “Some Custom Events”, then DLV – ssFormID equals Contact Form will limit this trigger from firing only when the ssFormID in your code is set to “Contact Form” (without quotes).

Create Universal Analytics Event Tag

Finally, we’ll need to create the actual event tags that will fire when triggered by our custom event.

  1. Click Tags in GTM.
  2. Create a new tag to send a submission event to Universal Analytics.
    • Give your tag a name like “GA Event – Contact Form”
    • Choose the “Google Analytics: Universal Analytics” tag type
    • Under Track Type, choose “Event” from the dropdown
    • Enter your Event Category, Action, and Label. We recommend using the {{DLV – ssFormID}} variable your recently created as the event label. See the screenshot below.
  1. Select your Google Analytics Settings variable
  2. Under Triggering, select the Custom Event you previously created.
  3. Click Save

Create Google Analytics 4 Event Tag

  1. Create a new tag to send a submission event to Google Analytics 4
    • Give your tag a name like “GA4 Event – Contact Form”
    • Choose the “Google Analytics: GA4 Event” as the tag type
    • Select your GA4 Configuration tag (or manually set your Measurement ID)
    • Enter “generate_lead” as the Event Name. This is one of the recommended GA4 events.
    • Optionally, add an event parameter so you can identify what action generated a lead
      • In the Parameter Name field, enter “formID”
      • In the Value field, click the brick icon and select your {{DLV – ssFormID}} variable
      • Under Triggering, choose your Custom Event
  1. Click Save
  2. Preview your GTM container and test to ensure both tags fire when a form is submitted successfully.
  3. Publish your container once you have confirmed your events are showing up in Google Analytics correctly.

Congratulations. You’ll now be able to see how many people successfully submit a Squarespace form in Google Analytics.

Conclusion

No matter which option you chose, once you add Google Analytics to Squarespace, you’ll have opened the door to nearly limitless tracking possibilities. Besides form event tracking, there are many other events you can track, such as click events, scroll events, or video engagement events. 

If you get stuck along the way or would like assistance developing a measurement strategy that’s unique to your business, we encourage you to contact the Intigress team with your tracking or digital marketing questions.

Leave a Reply

Your email address will not be published.

Stay Up-to-date

Find this helpful? Sign up for our newsletter to get this delivered right to your inbox. Plus, get digital marketing news, expert insights, updates, and more.