Tracking Squarespace form submissions in Google Analytics using JQuery

This article tells you how to easily track Squarespace form submissions in Google Analytics by adding a few lines of Javascript/JQuery to relevant pages.

In recent months I've migrated the Silvabokis site, and a couple of my clients' websites over to Squarespace because it offers a low cost, highly functional site building framework that is relatively straightforward to implement and administer.  

As with all off-the-peg solutions, Squarespace has its limitations - there are some features that I want that it doesn't currently support.

One missing feature that is absolutely vital to me is the ability to track conversion events, particularly form submissions, in Google Analytics. The way forms are currently implemented on Squarespace you can track a user arriving on a form page, but you can't tell whether or not they complete the form.  

The solution - use Javascript/JQuery to send information to Google Analytics when the hidden DIV that contains the 'Form Confirmation Message' becomes visible.

Note that you already need to have a Google Analytics account set up to track user activity on your Squarespace website.

 

NB. Code samples may be reused subject to certain conditions.

Variation 1 - Pseudo Page View

First, I'll show you the code, then explain what it does. 

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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(['_trackPageview', '/vpv/contactSubmitted/']);
eventposted=1;
}
}

</script>

The first line of the script makes it possible to run JQuery code on your page by referencing the JQuery library hosted on Google's servers. ​

The meat of the script sets a variable called eventposted and gives it a value of zero. This variable is used to test whether Google Analytics has already been informed of the form submission to prevent multiple tracking events being sent.  ​

The script then 'listens' to see whether the form-submission-text DIV has become visible. If it is visible, the form must have been submitted so the eventposted variable is set to 1 and an event is sent to Google Analytics using the following code:

 _gaq.push(['_trackPageview', '/vpv/contactSubmitted/']);

This forces a pseudo page view of '/vpv/contactSubmitted/' to be tracked inside the Analytics account. ​

I use /vpv/ as a prefix to each pseudo ​page URI so that I can filter out the virtual page views in Google Analytics reports if I have multiple tracked forms. 

Variation 2 - Event tracking

A simple variation is to track the form submission as an Event rather than a pseudo page view. ​

To achieve this, all you need to do is replace  ​

 _gaq.push(['_trackPageview', '/vpv/contactSubmitted/']);

​with

_gaq.push(['_trackEvent', 'YourForm', 'Submission']);

replacing 'YourForm' with whatever text you want to use to describe your form. ​

Implementing the code

The code should be pasted into the Page Header Code Injection box of each page that contains a contact form. ​

pageheader.png

And that's it.. ..simple

UPDATE: 13th Feb 2015 - This script works with both embedded and lightbox forms.

The script in this article was written before the Squarespace lighbox forms option was introduced. Comments in the Squarespace Answers forum led me to believe that perhaps the script wasn't compatible with lightbox forms.

I just tested it. It works with lightbox forms exactly as it should - a virtual pageview is tracked in Google Analytics.

This leads me to suspect that either people are installing the script incorrectly or that some Squarespace templates have a different naming convention for the form submit button and/or the confirmation message.

If you would like me to help you to resolve problems with form tracking, get in touch via the (tracked) lightbox form below.


Colin Irwin

I’m Colin Irwin, a freelance Squarespace Designer & Developer based in London, UK, with clients in the USA and around the world.

I’m a recognised Squarespace expert. I design and build Squarespace sites for everyone from charities and start ups to major established brands.

https://www.silvabokis.com
Previous
Previous

Squarespace Image Galleries not showing up in Google Images? - Here's a fix