Tracking Google Analytics Events in Squarespace

In the world of freelancers one does come up against massive walls of code that are really not made to work with one another. In setting up Google Analytics tracking on any site that is made in wordpress, Wix or Squarespace, one encounters all sorts of peculiarities.

I am going to talk of capturing events in Google Analytics from within the Squarespace environment.

First of all, the normal way to integrate Google Analytics in Squarespace is easy enough. Just do the following:

Config  — >  Settings  –> Advanced  –> External Services

and put the UA-XXXXXXX-Y number in there.

However, please note that this will conform to Google Analytics tracking that is several generations old.

Also, this is just page view tracking though. You won’t be tracking any events this way.

How does one add event tracking where a new page is not going to be called?

I am going to describe how you do this for a newsletter capture lightbox in Squarespace.

It turns out that there are three ways to do this although only one works for me. I am listing all three in case my environment is weird and the other ways might work for you.

1. Use Javascript shenanigans:

Essentially, what you want is to pass the event code to Google Analytics only when the submit button on the lightbox is clicked. For that you set up a listener to call a function which fires the event tracking code when called.

This did not work for me. Even though I tried several combinations but the variable value that should get assigned to 1, never happened.

2. Try and force Google Tag Manager(GTM) to do this for you:

GTM is not supported directly in Squarespace. You have to take your GTM header code below:

<!– Google Tag Manager –>

(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’);

<!– End Google Tag Manager –>

and put this on Config  — >  Settings  –> Advanced  –> Injection (Header)

Then take the code that should reside in the body tag

<!– Google Tag Manager (noscript) –>

<noscript>https://www.googletagmanager.com/ns.html?id=GTM-MN8VFPH</noscript>

<!– End Google Tag Manager (noscript) –>

and put it here  Config  — >  Settings  –> Advanced  –> Injection (Footer)

Now go to Google Tag Manager and build an event only tag that collects data when a trigger is fired upon a particular form class is seen.

3. Try to play within Squarespace:

This is a simple technique and did work for me. Go to the newsletter form and click on edit.

Click on Advanced and then scroll down to ” Post-Submit HTML”.

Now, this is a place where you put in the event call as follows:

   <script>

ga(‘send’, ‘event’, ‘newsletter’, ‘click’, ‘submit’);

</script>

Effectively, you are stating the Event Category [newsletter], Event Action [click] and Event Label [submit]. There are single quotes in the code above. When you copy and paste from here, they sometimes don’t get picked up that way so make sure to error-check that.

Go into the Google Analytics interface and add these values as a desirable goal and you are done. This method is quite simple but please be aware that this may not work like this if Google stops supporting this or Squarespace updates their codebase.

In any event, I hope this article is of some use. Do let me know if you have any further questions.