Google Tag Manager: How to add to Squarespace template

Google Tag Manager: What is it?

On October 1st, Google announced Google Tag Manager, a free tool for managing marketing and tracking tags on your site. Tags are snippets of code that usually placed in the <head> of a page which enable 3rd-party tracking, analysis, and reporting. Google Analytics is an obvious tag, but remarketing, conversion tracking, affiliates, A/B Testing, heatmap tracking, exit intent and advanced customer insight services utilise tags as well. 

Google Tag Manager: Why is it useful?

Historically managing the addition, editing and removal of these tags has been a task for website developers. But now with the introduction of Google Tag Manager (GTM) this can be done simply via the GTM admin interface by your marketing team or a site manager.

Google Tag Manager: Squarespace integration difficulties.

To get started utilising the power of GTM, the first step, once you've signed up, is to insert the GTM code directly after the opening <body> tag on all pages within your Squarespace site or blog.

Uh oh! Directly after the opening body tag?? But Squarespace will only let us inject code into the <head> or the <footer>, neither of which are directly after the opening <body> tag. So what can I do?

Read on to find the solution.

Google Tag Manager: How to add to Squarespace template

Before you begin you need to get a unique GTM code from the Tag Manager site, you should have this when you're signed up: it looks something like: GTM-KPT4S2, but yours will be unique to your site.

To add the GTM code to your Squarespace site or Blog, follow the steps below:

  1. Login to Squarespace and from the home menu navigate to Settings > Advanced > Code Injection.
  2. Simply copy and paste the code below into the 'Header' on the 'Code Injection' page. Remember to change the 'XXXXXX' in the 'GTM-XXXXXX' to your GTM code though! 
<!-- 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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

All we are doing here is simply removing the <noscript> portion of the code because it contains an iframe which cannot be inserted into the head. However the code above will only trigger if the visitor has JavaScript enabled.

If a visitor has JavaScript disabled we need to add the <noscript> element of the code. This can be inserted directly into the footer. 

Simply copy and paste the code below into the 'Footer' on the 'Code Injection' page. Remember to change the 'XXXXXX' again!

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

N.B. Once you integrate this with your Squarespace site, you will need to remove the Google Analytics (GA) code you have setup currently. Then add the GA code as a tag inside Google Tag Manager.

And thats it, you're good to go, you can start adding your tags into GTM. Visit Google Tag Manager help for more information on adding tags.


Yo! Web
327 Mary Vale Road
Bournville
Birmingham
West Midlands
B30 1PL
United Kingdom

Hours
Monday — Friday
9am — 5:30pm

Legals

Check out The Daily Yo! for Small Business News