Since you're reading this, you've likely experienced the pain of getting Google Tag Manager (GTM) to play nice with Squarespace. I think I found a way to ease that pain.

If you don't want to read another poorly written blog post today, just copy & paste this code and change the 'XXXXXX' in the 'GTM-XXXXXX' to your GTM code, and inject the code as your CMS suggests.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(
function()
{

jQuery('body').prepend('<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>' +

'<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=\'//www.googletagmanager.com/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);' +

'})(window,document,\'script\',\'dataLayer\',\'GTM-XXXXXX\');<\/script>');

}

);

</script>

"Just insert this auto-generated code directly below the body tag..."   Easy! Nope, not if you're using a CMS like Squarespace. NOTE: this is not just a Squarespace issue. Not at all. There are many reasons a developer may not have access to all the code. Other CMS's have the same roadblock. So, even of you are not using Squarespace, the method I used may work for you as well. In the end, we are just using some jquery to inject the GTM script directly below the body tag. Nothing uniquely 'Squarespacey' about that.

If you are new to GTM, get on board! Also, once you dial this in for your site, you will need to remove the Google Analytics (GA) code you have setup currently. Don't panic! You will be using GTM to fire GA on each page going forward. 

A few more things before I let the screenshots do the talking.  

  • The purpose of this is to show you how I injected the code. I do not cover setting up a GTM account. 
  • I barely know a thing about jquery. I just adapted what I read by someone much smarter that I. Original post here
  • I am brand new to GTM. 
  • I did not add the GTM data layer code. Why? I didn't know I should. I'm that new to GTM. Seems easy to add? Of course, I thought the same about adding GTM to SQSP in the 1st place. 
  • I didn't go into this thinking I'd get it to work (even for my own tests) or that I would share my experience. I'm working with the screenshots I took along the way for my own notes. I hope it helps. 
  • I like to qualify why my post may not be that helpful. 

OK here is what we are going for. A webpage in GTM 'preview mode' showing us the GTM tags are firing (only) after each rule is met.  In this case, I wanted the GA tag to fire on each page, but the other test tag to ONLY fire after the news link was clicked.

 

This took me many hours, not the 20 mins I hoped it would.

   Here is what you will see once you get set up with GTM

 How to do a code injection in Squarespace. After saving this, you should see the GTM script is now injected under the body tag. 

Inspecting the element in Chrome, you can see the script was injected successfully below the body tag. 

Here are the tags I created in GTM. Notice the tag names. You will see these in while in the GTM preview mode.

Here are the rules that must be met for the GA to be fired off.

These link rules just say 'Only fire this tag AFTER the news link is clicked' - GTM has many common rules predefined. I just selected rules from a drop down menu. Easy! I just named them. 

Testing tags confused me at first. Basically, you just select the preview mode you want. Then open your webpage in a new tab. The GTM preview will magically appear. You can turn this off in GTM as well. 

Here I am in GTM preview mode. Notice since only one predefined rule condition was met, only one tag fired. 

I still have plenty of work to do. I just wanted to share my progress so far, and maybe save someone a few hours.