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.
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.
