girl working on laptop

Adding Event Tracking to Squarespace Forms

If you’re trying to track events on a Squarespace site, you are probably visiting this page as you’ve realized that it’s not the easiest thing to do.  Particularly for Forms and items in the header/footer, like telephone calls or email clicks.

We certainly had a few problems, but fortunately we had luck in finding this great blog by Daniel J Murphy on ‘A Startup Marketer‘.

What the blog suggests is that you insert (code inject) the following code into any page that has a form.  To inject code, you click on the gear icon by your page, then hit the Advanced menu item.

page header code injection squarespace example

<script type=”text/javascript” src=”//”></script> <script type=”text/javascript”> var eventposted=0; $(document).ready(function(){ $(‘input.button’).click(function() { window.setInterval(foo, 100); }); }); function foo(){ if(($(“.form-submission-text”).is(‘:visible’)) && (eventposted==0)){ _gaq.push([‘_trackEvent’, ‘EventNameHere’, ‘Submission’]); eventposted=1; } } </script>

From here you want to change the EventNameHere to whatever you wish.  Basically this will be your category in Google analytics, and Submission will be your action.  You could probably further add a label by adding an additional field at the end.  For example ‘EventNameHere’, ‘Submission’, ‘Label’.  I haven’t tested this out, but I suspect it’s possible.

Google Tag Manager and Squarespace

Another potential way to track events in Squarespace is through Google Tag Manager.

We attempted that here, but had problems.  Tag manager requires you to enter in code in the header, which is possible with code injection.  They also require you to put code in the body of the text.  We tried putting it in the body using an html or code widget.  Unfortunately while we could see this when we viewed the page source, when we used the Google Tag Manager Chrome extension, it reported the body text as missing.  If you know of a workaround, please feel free to comment below.  There is additional Squarespace/Tag Manger help here as well if you wish to further read up on it.

Event Tracking and Squarespace

For on-page event tracking in the body you can use our code generator here.  You will have to use the Squarespace ‘code widget’.  And you will have to use the code for Classic Analytics as Squarespace uses classic analytics.  Using the code widget, you’ll have to know some basic html such as paragraphs, divs, and anchors.  Below is an example of what it might look for.

<h3><a  onClick=”_gaq.push([‘_trackEvent’, ‘Phone’, ‘Click’, ‘Hamilton Ontario Phone Number’, 0, true]);” href=”tel:905-555-1237></a>905-555-1237</h3>

It takes a bit of extra work, and it may not work for you, so try out a small sample, and test in Google Analytics Real Time first before you try to do a whole page of event tracking.

Event Tracking Conclusions and Followup

As we work with Squarespace we’ll update our findings on this page for event tracking.  Hopefully we’ve provided you with enough information to get you tracking certain items on your own pages.

Related Post

Leave a comment

Your email address will not be published. Required fields are marked *