How to Track GA4 Ecommerce Events on Squarespace

This is a step-by-step guide to implementing Google Analytics 4 ecommerce tracking on Squarespace websites using Google Tag Manager. It’s based on Google’s official developer documentation.

Squarespace's native GA4 integration solely tracks purchases— which isn’t very helpful if you want to analyze the entire ecommerce journey.

If ecommerce analytics is a priority for your business, I suggest utilizing Google Tag Manager to track the entire purchase flow instead of using the native Squarespace + GA4 integration.

This way, you'll have the ability to:

• Discover which products users view the most

• See which products customers add and remove the most from their cart

• Analyze what pages people visit on your website before and after entering the purchase flow

• View how many people leave your checkout flow before purchasing

Note: While my JavaScript code specifically uses the CSS classes and HTML elements from Squarespace, you can tailor this code to work on your website by updating the code to match the CSS and HTML of your website.

Here's what real Squarespace ecommerce owners are saying after successfully implementing GA4 tracking with the help of this guide:

If you follow the directions in this blog, you will be able to analyze your ecommerce data in Google Analytics 4:

Highlights

• How to Track the View Item List Event with GTM for Google Analytics 4 

• How to Track the View Item Event with GTM for Google Analytics 4 

• How to Track Select Item Event with GTM for Google Analytics 4 

• How to Track the Add to Cart Event with GTM for Google Analytics 4 

• How to Track the Remove from Cart Event with GTM for Google Analytics 4 

• How to Track the View Cart Event with GTM for Google Analytics 4 

• How to Track the Begin Checkout Event with GTM for Google Analytics 4 

• How to Track the Purchase Event with GTM for Google Analytics 4 

Why I created a custom solution

Technically, Squarespace offers a native GA4 integration in the Developer Tools Panel > External API Keys setting, but there are a few reasons why I wouldn’t recommend it:

Limited visibility

The integration is simple: copy and paste your measurement ID and Squarespace will handle the rest—but how do we know exactly what’s being sent to our sacred GA4 properties? We don’t—not definitely anyway—because Squarespace’s documentation doesn’t offer a lot of details.

There’s also no documented reason from Squarespace (that I’ve seen) explaining why they can’t push the product data that exists in JSON objects inside of each page’s HTML into the data layer to make data collection easier for its paying customers.

They purposefully obfuscate the data we need on the order confirmation page in a JSON object and delete the JSON a few seconds after the page fully loads making it nearly impossible to scrape the JSON and use it ourselves.

I have a problem with a service people pay for purposely making it harder to get access to their data.

Limited data collection

Based on Squarespace’s documentation, Squarespace only sends data when an item is purchased, which isn’t helpful if you’re trying to analyze the entire purchase journey. Squarespace indicates that it will send this information to GA4 with the purchase event:

• Customer's city, region, and country

• Product name

• SKU

• Order ID

• Store name

• Purchase total (including shipping)

Inability to customize the data before it’s sent to GA4

If you decide to use the built-in integration, you don’t have the ability to add additional data or customize the data before its sent to GA4. I prefer having control to change or reformat the data before its sent.

How to Set Up GA4 Ecommerce Events Using Google Tag Manager

In this section, I’ll guide you through setting up new tags, triggers, and variables to send your Squarespace ecommerce events to GA4.

Ecommerce events we’ll go through in this blog post (click the links to skip to that section):

• How to set up the GA4 ecommerce event tag

• view_item_list: When a user views a list of products or offerings

• view_item: When a user views a product

• select_item: When a user selects a product from a list of items or offerings                                                                     

• add_to_cart: When a user adds products to their shopping cart

• view_cart: When a user views their shopping cart

• remove_from_cart: When a user removes items from their shopping cart (my solution will work when the user clicks on the decrement button to remove one product and when the user clicks on the “x” button to completely remove all products)

• begin_checkout: When a user begins checkout (clicks on checkout button)

• purchase: When a user makes a purchase

All of these ecommerce events will be implemented using GTM’s custom HTML tag type:

How to Implement the GA4 Ecommerce Event Tag

GA4 Ecommerce Event Tag Configuration:

Tag Type: Google Analytics: GA4 Event

Event Name: {{Event}} - this will push the same event name that's in the data layer to your GA4 property

Event Parameters: {{DLV - item_variant_size}}, {{DLV - item_variant_color}}

Ecommerce: Check the "Send Ecommerce data" option

Data source: Data Layer

💡Not sure how to set up GA4 event parameters in Google Tag Manager? Scroll down to this section for instructions.

Trigger Type: Custom Event name: view_promotion|select_promotion|view_item_list|select_item|view_item|add_to_cart|view_cart|begin_checkout|remove_from_cart|purchase

Check "Use regex matching"

💡These are the event names for each ecommerce event. I've also included the promotion events which I won't cover in this guide.

How to set up the GA4 event parameters in GTM

Create user-defined data layer variables (DLV) for any custom data layer variable you intend to utilize in a GTM tag. Think of them as extra information you can add to each event. This lets you analyze your data in more specific ways.

These variables should correspond to any data you want to include in a GTM tag but aren’t part of the standard ecommerce event payload.

You will need to create DLVs for each custom data layer variable that you would like to use in a GTM tag (that isn’t a part of the expected ecommerce event payload).

For example, item_variant is a default data layer variable that the GA4 tag is expecting so we don’t need to create a DLV for it. On the other hand, GA4 isn’t expecting item_variant_size, so we need to create a new DLV for it to be passed to GA4.

GA4 Ecommerce Data Layer Variable Configuration:

Variable Type: Data Layer Variable

Data Layer Variable Name: {{variable}}

This is the name of the data layer variable we want GTM to read from. You’ll want it to match the exact JS variable name that is pushed to your data layer. In other words, when you look at your data layer, the variable name is in place of the bolded var in this example: dataLayer.push({'var': 'value'});

If you are using the same data layer variable names as me, here are the variable names you will want to create variables for in GTM:

• item_variant_size

• item_variant_color

Data Layer Version: Version 2 (I just leave it on the default setting)

Name and save each variable.

💡Note: For each DLV, you will need to create a custom dimension for it in the GA4 UI.

How to set up GA4 Ecommerce Custom Dimensions

• Go to your GA4 property and click on Admin

• Under Property Settings, navigate to Data display, and click on Custom definitions

• Click on create custom dimension

• Dimension name: I tend to keep it the same as the DLV name, so I just copy and paste that here

• Scope: Item (this is because we have pushed the DLVs into the items array in our data layer)

• Event parameter: paste the DLV name here

view_item_list: When a user views a list of products or offerings

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

View Item List Event Trigger Configuration:

Trigger Type: Page View - Window Loaded

This trigger fires on: Page Path equals /store

💡I chose the Window Loaded trigger type to ensure the HTML elements were fully loaded on the page before firing the tag. This is is especially critical for tags where we attach event listeners to elements that might be rendered after the initial page load.

view_item: When a user views a product

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

View Item Event Trigger Configuration:

Trigger Type: Custom Event name: ssRawProductDetailPush

OR

Element Visibility > Selection Method > CSS Selector > Element Selector: .sqs-product-quick-view-content

💡My Squarespace template has two ways a user can view an item: by clicking the quick view button and seeing the quick view popup or by viewing the full product page.

When the full product page is viewed, Squarespace automatically pushes a custom event to the data layer: ssRawProductDetailPush.

When the quick view pops up, there’s a CSS selector associated with it, .sqs-product-quick-view-content, that I use as my trigger.

select_item: When a user selects a product from a list of items or offerings        

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

Select Item Event Trigger Configuration:

Trigger Type: Page View - Window Loaded

This trigger fires on: Page Path equals /store

💡My custom code attaches a click event listener to every product block on the /store page. Since I’m using an event listener, I need to use the window loaded trigger to ensure the HTML elements were fully loaded on the page before firing the tag. This is is especially critical for tags where we attach event listeners to elements that might be rendered after the initial page load.

add_to_cart: When a user adds products to their shopping cart

I needed to create two separate tags for the add_to_cart event: one for when someone clicks on the adds to cart button on the store pages, and another one when someone clicks on the increment button on the cart page.

Click Add to Cart on Store Page

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

Add to Cart Event Trigger Configuration:

Trigger Type: Click - All Elements

This trigger fires on: Click Text contains ADD TO CART

💡You can change the click text if you’re website uses different text.

Click Increment Button on Cart Page

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

Add to Cart Event Trigger Configuration:

Trigger Type: Page View - Window Loaded

This trigger fires on: Page Path contains /cart

💡I chose the Window Loaded trigger type to ensure the HTML elements were fully loaded on the page before firing the tag. This is is especially critical for tags where we attach event listeners to elements that might be rendered after the initial page load.

view_cart: When a user views their shopping cart

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

View Cart Event Trigger Configuration:

Trigger Type: Page View - Window Loaded

This trigger fires on: Page Path contains /cart 

💡I chose the Window Loaded trigger type to ensure the HTML elements were fully loaded on the page before firing the tag. This is is especially critical for tags where we attach event listeners to elements that might be rendered after the initial page load.

remove_from_cart: When a user removes items from their shopping cart

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

Remove from Cart Event Trigger Configuration:

Trigger Type: Page View - Window Loaded

This trigger fires on: Page Path contains /cart

💡I chose the Window Loaded trigger type to ensure the HTML elements were fully loaded on the page before firing the tag. This is is especially critical for tags where we attach event listeners to elements that might be rendered after the initial page load.

begin_checkout: When a user begins checkout

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

Begin Checkout Event Trigger Configuration:

Trigger Type: Click - All Elements

This trigger fires on: Click Classes contains cart-checkout-button

How to Track Purchase Event with GTM for Google Analytics 4

Paste the following code in a custom HTML Tag in Google Tag Manager to push the product data into the data layer:

💡This code takes advantage of the JSON Squarespace creates out of the box for us.

(There’s actually JSON on every ecommerce page, but we can’t use it because its static on page load and doesn’t change if the user changes anything about the product or cart after the initial page load.)

Purchase Event Trigger Configuration:

Trigger Type: Page View

This trigger fires on: Page Path contains /commerce/orders/

Test and Publish Your GTM Tags

Before publishing your new GA4 ecommerce tags, its important to test that your ecommerce event tag is sending accurate data to GA4.

You can use Google Tag Manager's preview mode to accomplish this. Preview mode enables real-time testing, allowing you to simulate user interactions and verify your tag is firing. Learn how to use Google Tag Manager’s preview mode here.

While you’re in preview mode, view your test data by using the Debug View in Google Analytics 4. The Debug View is similar to the Real Time Reports in Universal Analytics as it shows a real-time diagnostic interface to inspect data as it flows into GA4, except that it only shows data from users who are using the preview mode version of GTM.

This feature provides immediate visibility into incoming data, allowing you to quickly spot tracking issues or discrepancies without waiting the 24 -48 hours it takes GA4 to populate data into reports.

Once you’re confident that the data is accurately flowing into your GA4 ecommerce reports, hit publish to make your tags live.

How to Implement GA4 Ecommerce on Squarespace

If you’ve made it this far, you have hopefully been able to implement Google Analytics ecommerce analytics tracking through Google Tag Manager to see your website’s ecommerce in Google Analytics.

I hope you found this tutorial helpful and use these same principles to track all of the important conversion points on your website so that you can capture your business’s KPI in Google Analytics 4.

Squarespace doesn’t make it easy to track your ecommerce data in GA4, but I’m hoping this guide helps you properly set it up in Google Tag Manager. If you did find this helpful, please let me know in the comments so I know to continue creating this type of content. Have questions about the code? Let me know that too!

Ready to unlock the full potential of your Squarespace store? Book a consult to ensure accurate and actionable e-commerce data in GA4.

Thanks for reading!