Squarespace Commerce: E-commerce Engagement and Conversion Tracking

One of the tools for creating global websites is Squarespace. In this article, following the section titled What is Squarespace?, I will discuss the solutions available for tracking user activities and conversion events after a website has been set up.

Although Squarespace provides separate sections for all configuration settings (both for the website and e-commerce settings), the Settings section shares commonality between both.

Integrations

To be clear from the outset, Squarespace’s integration options for tracking codes and analytics tools are quite limited.

Google Analytics 4 (GA4)

To track website user interactions, the Google Analytics 4 integration can be accessed through the Settings > Developer Tools > External API Keys section in the configuration area¹.

Data flow is established upon entering your Measurement ID. However, the events sent are quite limited. While page data is generally transmitted consistently, Checkout steps are not included in this flow. On the payment confirmation page (/commerce/orders...), page view events can be tracked alongside the purchase event.

If your site is running version 7.0 and your template uses Ajax loading, Google Analytics may not be able to capture page view data for other pages. In this case, only the data from the first page visited by a user is sent to GA4. As long as the user does not refresh the page while navigating your site, Analytics will continue to treat it as a single page view.

Google Ads

Squarespace recommends using Google Analytics 4 for Google Ads conversions. However, since no e-commerce events other than purchase are being sent, custom events can be created using the page_view parameters if needed. Naturally, these events will not contain product details.

On the other hand, code can be added to the Header, Footer, Lock Page, Order Confirmation Page, and Order Status Page sections via Code Injection in the Developer Tools section. For more information, refer to the Google Tag Manager (GTM) section.

Google Tag Manager (GTM)

The Google Tag Manager (GTM) installation code can be added to your website via Code Injection in the Developer Tools section, specifically to the Header, Footer, Lock Page, Order Confirmation Page, and Order Status Page sections, enabling it to function across all relevant pages. However, the limitations specified for GA4 and Ads headers will still apply.

Squarespace provides dynamic variables only for the Order Confirmation Page and Order Status Page sections. These variables and their respective values can be listed as follows:

• {orderId}: The order number of the confirmed order
• {orderSubtotal}: The subtotal of the confirmed order
• {orderSubtotalCents}: The subtotal of the confirmed order in cents
• {orderGrandTotal}: The grand total of the confirmed order
• {orderGrandTotalCents}: The grand total of the confirmed order in cents
• {customerEmailAddress}: The customer’s email address as entered in the “Billing Information” section

For example, the following code snippet can be examined.

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'order_confirmation', // or 'order_status',
  order_id: "{orderId}",
  subtotal: {orderSubtotal},
  subtotal_cents: {orderSubtotalCents},
  grandtotal: {orderGrandTotal},
  grandtotal_cents: {orderGrandTotalCents},
  customer_email: "{customerEmailAddress}"
});
</script>

However, as can be seen, only a limited number of variables are available. Therefore, it is not feasible to include additional product data, such as dynamic re-targeting tags. Additionally, since the Google Tag Manager integration is not directly defined, Squarespace does not provide any dataLayer content.

For including event and parameter details from Google Tag Manager into the data flow process, page-specific JSON content can utilize attributes such as data-current-context and data-item-id.

Facebook Meta Pixel

Marketing module enables the Facebook Meta Pixel ID to be added to a website. This integration primarily provides data flow for page view events, as well as for ViewContent, Search, AddToCart, Lead, CompleteRegistration, InitiateCheckout, AddPaymentInfo, and purchase events on the payment confirmation page².

In Summary

Squarespace can be described as a website builder with relatively limited integration features. Moreover, differences in the panel version may complicate certain processes. However, relevant data can still be collected and made available through attributes used within code injection and theme structures.

Footnotes

1. Using Google Analytics with Squarespace ↩
2. Using Meta Pixel with Squarespace ↩