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.
Where would I get the full Post-Submit HTML for option 3? I know that I need to paste more than that single line, but not sure where to find that in GA.
Hello Michael, If you have the Google Analytics setting enabled ( Settings >> Advanced >> External API Keys), then this single line will suffice. If you aren’t getting the event to fire, do write to me and I will help.
Hello, where are you finding the External API key setting?
Hello Brandon,
After you log in to the admin section of your website
Please go to Home >> Settings >> Advanced >> External API Keys to insert the Google Analytics UA number. Your URL would be https://yourdomain-squarespace/config/settings/advanced/external-api-keys
Please watch this video from Benjamin for more information: https://www.youtube.com/watch?v=c90bm3m0Q7Y&t=99s
The format for this number is UA-XXXXXXX where X is a valid digit from 0-9. Do let me know if you have other questions.
Hi Ateeq,
Thanks for the response. GA is setup and seeing general traffic, but I can’t get the event to fire. When I paste just the line, that text shows up in the thank you message on the page.
I’m also putting the code between tags. The event still doesn’t fire, but the line doesn’t show up in the thank you page.
Any ideas? Thanks,