【问题标题】:How to track UTM data in Squarespace form submissions如何在 Squarespace 表单提交中跟踪 UTM 数据
【发布时间】:2019-11-17 03:57:35
【问题描述】:

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

例如:

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_”参数。进行此更改后,我们可以在有人使用表单联系我们时传递我们的链接属性。

【问题讨论】:

    标签: jquery google-analytics squarespace


    【解决方案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 已经知道有关用户的“默认渠道分组”(和其他数据),所以在提交表单时触发自定义事件将允许您在 GA 中查看与用户相关的提交和信息。为此,请在表单块的“提交后 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

    只需将以下内容添加到表单块的“提交后 HTML”字段中即可:

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

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

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

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

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

    【讨论】:

    • 哇,感谢您非常详细和彻底的回复。选项 1 代码非常适合传递参数,并且添加 GA 事件也为我们提供了两全其美的效果。非常感谢 Brandon,感谢您在这里付出的时间和精力。
    【解决方案2】:

    您提供的代码获取具有mylink 类的锚的链接(href)。 通过该链接,您将第一次出现的“utm_”替换为“sqf_”。 然后用新链接替换锚的链接(href)。

    为了改变所有出现的“utm_”,我使用了正则表达式/utm_/g

    我添加了一个sn-p来澄清:

    $(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>

    【讨论】:

      猜你喜欢
      • 2023-04-04
      • 1970-01-01
      • 2022-06-30
      • 2016-09-11
      • 2015-05-28
      • 1970-01-01
      • 1970-01-01
      • 2017-08-24
      • 1970-01-01
      相关资源
      最近更新 更多