How to Add Google Tag Manager to a Squarespace Site
Adding Google Tag Manager (GTM) to your Squarespace site can be confusing, especially if you're a designer more familiar with the ease of adding Google Analytics 4 (GA4) directly through Squarespace’s settings.
GTM works differently, so the steps to integrate it vary dramatically from GA4. But read on if you or your clients have advanced tracking needs and need central management of multiple tag assets.
Understanding the Difference: GA4 vs. GTM
Before diving into the integration process, let’s break down what makes GA4 and GTM different.
GA4 is the latest version of Google Analytics. It certainly has its detractors, but it’s still the industry standard, offering advanced tracking and insights.
GTM, on the other hand, is a tag management system that allows you to manage and deploy various marketing tags (including GA4) without returning to or needing access to the Squarespace code injection settings. This is a substantial time savings for anyone running media ads, paid search, or SEO who needs to review campaign analytics, build reports, or change vendors. Trust me, they will be grateful for the agility.
Adding GA4 to Squarespace
If you are unfamiliar with it, adding GA4 to your Squarespace site is crazy simple. Navigate to Settings > Developer Tools > External API Keys and enter the G number of your GA4 account. Next, hit that save button. That’s it.
Adding GTM to Squarespace
Integrating GTM involves more steps because it requires using the code block in the page’s content. GTM is a two-tag setup: the head tag and the body tag.
Head Tag:
This tag should be placed at the very top of the header injection box.
To add this, go to Website > Pages > Website Tools, Code Injection, and paste the GTM head tag code into the header section. Make it the first one at the top.
Body Tag:
The body tag must be placed immediately after the <body> tag opening. This one is tricky since nobody has direct access to the template code in Squarespace. Here are three methods to add this tag effectively:
Method 1: Code Block in Every Page's First Section
This method involves adding the body tag code in a code block placed in the first section of every page. While simple, it doesn’t scale well, especially for more significant sites with many pages.
Method 2: Blank Section Saved as a Template
Create a new blank section at the top of your page. I like to make it as short as possible, one grid block tall, zero gap, and full screen toggled off. The idea is to blend it with the header section. Add a code block with your GTM body tag code to this new section. Save this section to your saved sections list. Now, you can add this saved section to the top of every page. This method is faster to add across a site but no easier to update than Method 1 since placed sections from your saved list are customized at the page level, so changes don’t affect the saved version.
Method 3: Using Custom Code Injection
For a more centrally managed solution, consider a custom code injection method or a third-party plugin that allows better control over the injected tag.
We’re BIG fans of Section Loader Supreme* by the venerable Will Meyers. Add the code block containing the GTM body tag to a stand-alone page in the Not Linked page list. Then, create a blank section like in Method 2 above. Each time the tag needs to be changed, only the code block on the stand-alone page must be updated to cascade to every page on the site.
Method 4: All Code Injection
Recommended - This is the easiest method, but not everyone will approve. Place the header tag as instructed above. Then, instead of placing the body tag in the content area, paste it in the footer code injection box in the same Code Injection interface. It functions perfectly. However, the instruction is to place the body tag directly after “<body>” in the code. People in this world will view the source and say it’s not placed in the exact correct location. This is true. What is also true is that it works perfectly. Just know that if a third-party media company is involved, there is a decent chance you will find yourself in this conversation.
Why Use GTM?
Using GTM streamlines the management of multiple tags on a website. Instead of editing the site’s code for each new tag, they can be managed in Google through GTM’s interface. This saves time, reduces the risk of errors, and limits the number of people needing Admin permissions.
Best Practices and Tips
Regular Updates: Ensure your GTM container and tags are up to date to leverage the latest features and maintain site performance.
Testing: Always test your GTM implementation using the GTM preview mode before publishing changes.
Documentation: Record all tags and changes made for future reference and troubleshooting.
Google Tag Manager is a great way to manage multiple tracking tags on a Squarespace site. It's a powerful tool for your business or clients, especially if paid search, digital display, or paid social is part of the marketing mix.
* Will Meyers’ Section Loader Supreme is a fantastic plugin. It has an affordable business license that allows us to use it on many Squarespace websites for several reasons. Will is not a sponsor, and we’re not affiliates.
