How to track UTM data in Squarespace form submissions

Question

I\'ve seen a lot of questions about the easiest way to change the value of a parameter, but nothing about how to change the parameter itself.

For example:

exampl

Answer 1

The code you provided gets the link(href) of the anchor that has mylink class. With the link you replace the first occurrence of 'utm_' with 'sqf_'. Then you replace the link(href) of the anchor with the new link.

To achieve change all occurrences of 'utm_' I used a regular expression /utm_/g.

I added a snippet to clarify:

$(document).ready(function(){
    // Gets current href of element with class mylink
    var url = $('.mylink').attr('href')
    // Replace all occurences of utm_ with sqf_
    url = url.replace(/utm_/g, 'sqf_')
    // Replaces the old href with the new one on the anchor
    $('.mylink').attr('href', url)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="example.com/?utm_campaign=1&utm_source=2" class="mylink">Link</a>

Answer 2

One thing to consider is that changing the query parameters via JavaScript after the page has loaded may not have an effect on the form fields; the page will have already loaded and Squarespace's own code will have already run.

There are a few alternatives, however.

Option 1

Instead of altering the query parameters in the URL, insert the values from the URL into the hidden Squarespace form fields directly. To do this, ensure that your hidden fields in Squarespace are named in a way that precisely corresponds to the UTM parameters, with the only difference being that the form field names start with "SQF_" and are all uppercase. Then, under site-wide footer code injection, add:

<script>
window.Squarespace.onInitialize(Y, function() {
  /**
   * Get the URL parameters
   * source: https://css-tricks.com/snippets/javascript/get-url-variables/
   * @param  {String} url The URL
   * @return {Object}     The URL parameters
   */
  var getParams = function (url) {
    var params = {};
    var parser = document.createElement('a');
    parser.href = url;
    var query = parser.search.substring(1);
    var vars = query.split('&');
    for (var i=0; i<vars.length; i++) {
      var pair = vars[i].split('=');
      params[pair[0]] = decodeURIComponent(pair[1]);
    }
    return params;
  };

  /**
   * Get UTM parameters from the current URL, insert them into correspondingly-named Squarespace form hidden fields.
   */
  var params = getParams(window.location.href);
  var param;
  var paramMatch;
  var paramBase;
  var formFields;
  var i;
  for (param in params) {
    paramMatch = param.match(/^utm_(.*)/i);
    if (!paramMatch) {
        continue;
    }
    paramBase = paramMatch[1];
    formFields = document.getElementsByName("SQF_" + paramBase.toUpperCase());
    i = formFields.length;
    while (i--) {
      if (formFields[i]) {
        formFields[i].value = params[param]; 
      }
    }
  }
});
</script>

Option 2:

Because you are using UTM query parameters, I'm going to assume that your site is using Google Analytics ("GA"). If that is the case, it may be easier and cleaner to track form submissions via GA "events". Because GA will already know the "default channel grouping" (and other data) about the user, firing a custom event when the form is submitted will allow you to view submissions and information related to the user within GA. To do that, add a script in the "Post-Submit HTML" field of the form block (under the "Advanced" tab):

If using Google Tag Manager, enter:

<script>gtag("event", "Submit Form", {event_category:"Contact", event_label:"Contact Page Body"})</script>

Otherwise, if using analytics.js enter:

<script>ga("send", "event", "Contact", "Submit Form", "Contact Page Body");</script>

Note that in the above examples, you can use whatever you want for "category", "action" and "label". I've used "Contact", "Submit Form" and "Contact Page Body" respectively, but use whatever suits you.

When a form is submitted, you'll be able to see the event in GA under "Behavior" > "Events" > "Top Events". You can then add a "Secondary dimension of "Full Referrer" to see events subdivided by the referring source.

Option 3

Instead of the above, simply add the following to the "Post-Submit HTML" field of the form block:

<script>window.location.replace("/form-submitted");</script>

Then, within your website, create the new "Form Submitted" page, design and set it up as desired with a thank-you message and put it in your "Not Linked" section. You may also want to set the page settings for this page to hide the page from search engines and your sitemap (under "SEO" in page settings).

Assuming that only users who submit the form will arrive to the /form-submitted page (the code above creates a redirect on form-submission), you can then view information (such as referrer and channel) via GA. This isn't my favorite method (which is why I listed it last) since it's another point of failure and causes a delay for users.

Note that Options 2 and 3 may benefit from setting up a "Goal" in GA by going to "Admin" within GA, then "Goals", then "New Goal".

Also note that Options 2 and 3 rely on GA to load. Some script and ad-blockers will block GA, so data from users who use those blockers may not show up in GA. Option 1 does not rely on GA.