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

问题描述

我已经看到了很多有关更改参数值的最简单方法的问题，但关于如何更改参数本身却一无所知.

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.

例如:

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

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

将成为:

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

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>

如果您对我为什么这样做感到好奇，请 Squarespace表单仅接受以"SQF_"开头的URL参数，而Google Analytics(分析)仅接受"utm_"参数.进行此更改后，当有人使用表单与我们联系时，我们便可以通过我们的链接归因.

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.

推荐答案

要考虑的一件事是，在页面加载后通过JavaScript更改查询参数可能不会对表单字段产生影响.该页面将已经加载，并且Squarespace自己的代码将已经运行.

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.

但是，有几种选择.

选项1

不要更改URL中的查询参数，而是将URL中的值直接插入到隐藏的Squarespace表单字段中.为此，请确保Squarespace中的隐藏字段以与UTM参数完全对应的方式命名，唯一的区别是表单字段名称以"SQF_"开头且全部为大写.然后，在站点范围内的页脚代码注入，然后添加:

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>

选项2:

Option 2:

由于您使用的是UTM查询参数，因此我假设您的网站使用的是Google Analytics(分析)("GA").如果是这样，通过GA事件"跟踪表单提交可能会更容易，更干净.由于GA已经知道有关用户的默认渠道分组"(和其他数据)，因此在提交表单时触发自定义事件将使您能够查看GA中与用户有关的提交和信息.为此，请在表单块的提交后HTML"字段中(在高级"标签下)添加一个脚本:

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):

如果使用Google跟踪代码管理器，请输入:

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

否则，如果使用analytics.js， 输入:

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.

提交表单后，您可以在GA的行为">事件">热门事件"下查看事件.然后，您可以添加完整引荐来源网址"的次要维度，以查看按引荐来源细分的事件.

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.

选项3

代替上面的内容，只需将以下内容添加到表单块的提交HTML后"字段中即可:

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>

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

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

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

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.

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

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

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

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屋！