如何在 Squarespace 表单提交中跟踪 UTM 数据 [英] How to track UTM data in Squarespace form submissions

问题描述

我看到很多关于更改参数值的最简单方法的问题，但没有关于如何更改参数本身.

例如:

example.com/?utm_campaign=1&utm_source=2

会变成:

example.com/?SQF_CAMPAIGN=1&SQF_SOURCE=2

我试过修改这个

选项 3

只需将以下内容添加到表单块的Post-Submit HTML"字段中即可:

然后，在您的网站中，创建新的已提交表单"页面，根据需要设计并设置感谢信息，并将其放入未链接"部分.您可能还想将此页面的页面设置设置为 对搜索引擎和站点地图隐藏页面(在页面设置的SEO"下).

假设只有提交表单的用户才会到达/form-submitted页面(上面的代码在表单提交上创建了一个重定向)，然后您可以通过GA查看信息(例如referrer和channel).这不是我最喜欢的方法(这就是我最后列出它的原因)，因为它是另一个失败点并导致用户延迟.

请注意，选项 2 和选项 3 可能会受益于设置目标"在 GA 中，依次转到 GA 中的管理"、目标"和新目标".

另请注意，选项 2 和 3 依赖 GA 来加载.某些脚本和广告拦截器会阻止 GA，因此来自使用这些拦截器的用户的数据可能不会显示在 GA 中.选项 1 不依赖于 GA.

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:

example.com/?utm_campaign=1&utm_source=2

would become:

example.com/?SQF_CAMPAIGN=1&SQF_SOURCE=2

I've tried modifying this previous solution but I don't really understand how it works:

<script>
var url = $('.mylink').attr('href')
url = url.replace('utm_', 'sqf_')
$('.mylink').attr('href', url)
</script>

If you're curious about why I'm doing this, Squarespace forms only accept URL parameters starting with "SQF_" while Google Analytics only accepts "utm_" parameters. Making this change lets us pass through our link attribution when someone contacts us using a form.

解决方案

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.

这篇关于如何在 Squarespace 表单提交中跟踪 UTM 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！