jquery - 如何在 Squarespace 表单提交中跟踪 UTM 数据

Question

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

例如:

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

会成为:

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

我试过修改这个previous solution但我真的不明白它是如何工作的:

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

如果你好奇我为什么这样做，Squarespace forms仅接受以“SQF_”开头的 URL 参数，而 Google Analytics 仅接受“utm_”参数。进行此更改后，我们可以在有人使用表单与我们联系时传递我们的链接属性。

Answer 1

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

但是，有一些替代方案。

选项 1

无需更改 URL 中的查询参数，而是将 URL 中的值直接插入隐藏的 Squarespace 表单字段。为此，请确保 Squarespace 中的隐藏字段以与 UTM 参数精确对应的方式命名，唯一的区别是表单字段名称以“SQF_”开头并且都是大写的。然后，在 site-wide footer code injection 下， 添加:

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

因为您使用的是 UTM 查询参数，所以我假设您的网站使用的是 Google Analytics(“GA”)。如果是这种情况，通过 GA“事件”跟踪表单提交可能会更容易和更清晰。因为 GA 已经知道有关用户的“默认 channel 分组”(和其他数据)，所以在提交表单时触发自定义事件将允许您在 GA 中查看与用户相关的提交和信息。为此，请在表单 block 的“提交后 HTML”字段中添加一个脚本(在“高级”选项卡下):

如果 using Google Tag Manager ， 进入:

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

否则，if using analytics.js进入:

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

请注意，在上面的示例中，您可以对“类别”、“操作”和“标签”使用任何您想要的内容。我分别使用了“联系方式”、“提交表格”和“联系页面正文”，但使用适合您的方式。

提交表单后，您将能够在 GA 中的“行为”>“事件”>“热门事件”下看到该事件。然后，您可以添加“完整推荐人”的“次要维度”以查看按推荐来源分割的事件。



选项 3

而不是上面的，只需将以下内容添加到表单 block 的“提交后 HTML”字段中:

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

然后，在您的网站中，创建新的“已提交表单”页面，根据需要进行设计和设置，并附上感谢信息并将其放入“未链接”部分。您可能还想将此页面的页面设置设置为 hide the page from search engines和您的站点地图(在页面设置中的“SEO”下)。

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

请注意，选项 2 和 3 可能会受益于 setting up a "Goal" in GA通过转到 GA 中的“管理员”，然后是“目标”，然后是“新目标”。

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