Installing Google Tag Manager on Squarespace | Blue Frog Docs

Installing Google Tag Manager on Squarespace

Complete guide to setting up GTM on Squarespace, including version differences between 7.0 and 7.1, code injection methods, and container configuration.

Installing Google Tag Manager on Squarespace

Google Tag Manager (GTM) provides a powerful way to manage all your tracking tags from a single interface. This guide covers GTM installation on Squarespace, including version-specific considerations for Squarespace 7.0 and 7.1.

Why Use GTM on Squarespace?

Advantages

  • Centralized tag management - Manage all tracking codes from one place
  • No code updates required - Add/modify tags without touching Squarespace Code Injection
  • Advanced tracking - Easier implementation of complex event tracking
  • Testing & debugging - Preview mode and debug tools built-in
  • Version control - Track changes and rollback if needed
  • Team collaboration - Multiple users can manage tags

When to Use GTM

  • You have multiple tracking tools (GA4, Meta Pixel, LinkedIn, etc.)
  • You need advanced event tracking (scroll depth, clicks, form tracking)
  • You want to avoid repeated Code Injection updates
  • You have a team managing analytics

When NOT to Use GTM

  • You only need basic GA4 tracking (use native integration instead)
  • Your site is very simple with minimal tracking needs
  • You're concerned about performance (GTM adds slight overhead)

Prerequisites

  • Google Tag Manager Account - Create one at tagmanager.google.com
  • GTM Container - Create a Web container for your Squarespace site
  • Squarespace Admin Access - Ability to edit Code Injection
  • Your GTM Container ID - Format: GTM-XXXXXX

Step 1: Create GTM Container

If you don't have a GTM container yet:

  1. Go to Google Tag Manager
  2. Click Create Account
  3. Fill in:
    • Account Name: Your company/website name
    • Country: Your country
    • Container Name: Your website URL
    • Target Platform: Web
  4. Click Create
  5. Accept the Terms of Service
  6. Copy your GTM Container ID (GTM-XXXXXX)

Step 2: Install GTM on Squarespace

Installation Code

After creating your container, GTM provides two code snippets. You need both:

Snippet 1 (Head):

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Snippet 2 (Body):

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Add to Squarespace

  1. Log in to your Squarespace website
  2. Navigate to Settings > Advanced > Code Injection
  3. Header Section:
    • Paste Snippet 1 (the <script> code)
  4. Footer Section:
    • Paste Snippet 2 (the <noscript> code)
  5. Click Save

Important: Replace GTM-XXXXXX with your actual container ID in both snippets.

Step 3: Verify Installation

Method 1: GTM Preview Mode

  1. In GTM, click Preview in the top right
  2. Enter your Squarespace website URL
  3. Click Connect
  4. A new tab opens with your site in debug mode
  5. Verify the GTM debugger appears at the bottom
  6. Check that "Container Loaded" event fires

Method 2: Tag Assistant

  1. Install Google Tag Assistant Chrome extension
  2. Visit your Squarespace site
  3. Click the Tag Assistant icon
  4. Verify GTM container is detected

Method 3: Browser Console

  1. Open your Squarespace site
  2. Open browser DevTools (F12)
  3. Go to Console tab
  4. Type: google_tag_manager
  5. You should see an object with your container ID

Squarespace 7.0 vs 7.1 Considerations

Squarespace 7.0

GTM works reliably on Squarespace 7.0 with standard implementation.

Considerations:

  • Page loads are traditional (not Ajax-heavy)
  • DOM structure is consistent per template
  • Data Layer can access template-specific variables
  • Some templates may have unique navigation behaviors

Testing Checklist:

  • Homepage
  • Blog index and individual posts
  • Product pages (if Commerce)
  • Gallery/portfolio pages
  • Contact forms

Squarespace 7.1 (Fluid Engine)

Squarespace 7.1 uses more dynamic content loading, which can affect GTM triggers.

Key Differences:

  • Ajax Navigation: Some page transitions don't trigger full reloads
  • Dynamic Content: Sections and blocks load dynamically
  • History Changes: URL changes without page reloads

Solution: History Change Trigger

In GTM, create a History Change trigger for tracking Ajax page changes:

  1. Go to Triggers > New
  2. Trigger Type: History Change
  3. This trigger fires on: All History Changes
  4. Save and use this trigger for page view tags

Additional Configuration:

For better page view tracking on 7.1, modify your GA4 Configuration Tag:

  1. Go to your GA4 Configuration Tag
  2. Add Fields to Set:
    • Field Name: page_location
    • Value: \{\{Page URL\}\}
  3. Add Fields to Set:
    • Field Name: page_path
    • Value: \{\{Page Path\}\}

Data Layer Setup

The GTM data layer allows you to pass information from Squarespace to your tags.

Basic Data Layer (All Versions)

Add to Header Code Injection (BEFORE the GTM snippet):

<script>
  window.dataLayer = window.dataLayer || [];

  // Basic page info
  dataLayer.push({
    'pageType': getPageType(),
    'squarespaceVersion': getSquarespaceVersion(),
    'templateName': getTemplateName()
  });

  function getPageType() {
    if (window.location.pathname === '/') return 'homepage';
    if (window.location.pathname.includes('/blog/')) return 'blog';
    if (window.location.pathname.includes('/products/') ||
        document.querySelector('.sqs-commerce-product-detail')) return 'product';
    if (window.location.pathname.includes('/checkout')) return 'checkout';
    return 'page';
  }

  function getSquarespaceVersion() {
    return document.body.classList.contains('squarespace-7.1') ? '7.1' : '7.0';
  }

  function getTemplateName() {
    var bodyClasses = document.body.className;
    var match = bodyClasses.match(/template-([^\s]+)/);
    return match ? match[1] : 'unknown';
  }
</script>

See Squarespace Data Layer Guide for advanced implementations.

Common GTM Tags for Squarespace

1. Google Analytics 4

Tag Configuration:

  • Tag Type: Google Analytics: GA4 Configuration
  • Measurement ID: Your GA4 ID (G-XXXXXXXXXX)
  • Triggering: All Pages (or Page View + History Change for 7.1)

2. Meta Pixel

Tag Type: Custom HTML

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

Triggering: All Pages

3. Form Submission Tracking

Tag Type: Google Analytics: GA4 Event

  • Event Name: form_submit
  • Event Parameters:
    • form_id: \{\{Form ID\}\}
    • form_classes: \{\{Form Classes\}\}

Trigger Type: Form Submission

  • Wait for Tags: Enabled (2000ms)
  • Check Validation: Enabled (if available)

Performance Optimization

1. Load GTM Asynchronously

The standard GTM code already loads asynchronously (j.async=true). Keep this unchanged.

2. Minimize Tags

  • Only add necessary tags
  • Remove unused tags and triggers
  • Consolidate duplicate tracking

3. Use Trigger Conditions

Instead of firing tags on every page:

  • Use Page Path conditions
  • Use Page Type variables
  • Filter by CSS Selector presence

Example: Only fire product tag when product exists

Trigger: All Pages
Condition: Page Path contains /products/

4. Monitor Container Size

  • Keep custom HTML tags concise
  • Load external scripts from CDNs
  • Avoid large inline scripts in GTM

Testing Your GTM Setup

1. Preview Mode

  1. In GTM, click Preview
  2. Enter your Squarespace URL
  3. Navigate through your site
  4. Verify:
    • Tags fire correctly
    • Triggers activate as expected
    • Variables populate with correct data
    • No errors in Messages panel

2. Tag Assistant

Use Google Tag Assistant to verify:

  • GTM container loads
  • All tags fire on appropriate pages
  • No duplicate tags
  • No blocking issues

3. Real User Testing

After publishing:

  • Test on different devices (desktop, mobile, tablet)
  • Test on different browsers
  • Test with ad blockers (then in incognito without)
  • Verify in GA4 Realtime reports

Common Issues & Solutions

Issue: GTM Not Loading

Possible Causes:

  • Code not saved in Squarespace
  • Wrong container ID
  • Ad blocker active
  • JavaScript errors on page

Solutions:

  1. Verify code is in Code Injection (Settings > Advanced)
  2. Check container ID matches (GTM-XXXXXX)
  3. Test in incognito mode
  4. Check browser console for errors

Issue: Tags Not Firing

Possible Causes:

  • Triggers not configured correctly
  • Preview mode not active
  • Page conditions don't match
  • Tags blocked by ad blockers

Solutions:

  1. Use GTM Preview mode to debug
  2. Check trigger conditions
  3. Verify tag is enabled in GTM
  4. Test without ad blockers

Issue: Duplicate Events

Cause: Multiple tags firing the same event or both GTM and native integration active

Solution:

  • Review all tags in GTM
  • Disable native integrations if using GTM versions
  • Use built-in variables to prevent duplicate firing

Issue: Data Layer Not Available

Cause: Data Layer code added after GTM snippet

Solution:

  • Ensure data layer code is BEFORE GTM snippet in Header
  • Or initialize data layer at the top of GTM snippet

GTM Best Practices for Squarespace

  1. Always Use Preview Mode:

    • Test changes before publishing
    • Verify tags fire correctly
    • Check for errors

  2. Document Your Tags:

    • Use clear tag names (e.g., "GA4 - Product Page View")
    • Add notes describing tag purpose
    • Tag folders for organization

  3. Version Control:

    • Add version descriptions when publishing
    • Note what changed and why
    • Makes rollback easier

  4. Monitor Performance:

    • Regularly check site speed
    • Use GTM's container optimization features
    • Remove unused tags and triggers

  5. Security:

    • Limit GTM account access
    • Review tags before publishing
    • Watch for malicious tag injections

Migrating from Native Integration to GTM

If you're currently using Squarespace's native GA4 integration:

  1. Remove Native Integration:

    • Go to Settings > Analytics > Google Analytics
    • Click "Disconnect"

  2. Set Up GA4 in GTM:

    • Create GA4 Configuration tag
    • Add your Measurement ID
    • Configure triggers (All Pages + History Change for 7.1)

  3. Test Thoroughly:

    • Verify page views tracking
    • Check events still firing
    • Compare data for a few days to ensure accuracy

Next Steps

Now that GTM is installed:

Additional Resources

↑ Back to top
// SYS.FOOTER