使用 GTM 跟踪 SquareSpace 中的表单提交

Question

我正在帮助一位朋友在 SquareSpace 上建立一个网站。我已设置 Google 跟踪代码管理器 (GTM) 来自动跟踪表单提交和链接点击（使用自动侦听器）。

但是，SquareSpace 中的表单无法与 GTM 中的表单监听器一起使用（显然是由于在代码中的 onSubmit 处理程序中使用了 return false，请参阅 https://productforums.google.com/forum/#!topic/标签管理器/Vlro87_GOVY)

我花了好几个小时试图找到另一种方法来完成这项工作（恐怕我在 JS 方面很菜鸟，但我正在尽力）。

我还尝试实现此答案中提到的代码：http://answers.squarespace.com/questions/7450/how-can-i-track-form-submissions-in-google-analytics在我的页脚中， GA 中没有出现任何事件。应该注意的是，我使用Universal Analytics，而不是旧的GA - 因此不使用SquareSpace中的GA字段，因为它只支持旧的Google Analytics。 GA 代码通过 Google 跟踪代码管理器 (GTM) 添加到我的网站。

有人知道解决方法吗？例如，我可以添加一些自定义 JS 代码来在提交表单后触发，从而通过我的 DataLayer 将数据发送到 GTM 吗？

请注意，在 SquareSpace 中，您无法更改表单本身的代码（这会使事情变得更容易），但您可以添加一些将在提交表单后加载的 html。

这是我迄今为止尝试过的：

1）将以下内容添加到我的页脚部分

<!-- Form Submit tracking -->
<script>
  Y.use('node', function() {
    Y.on('domready', function() {
      Y.all('.form-block').each(function(n) {
        var d = n.getData('block-json');
        d = Y.JSON.parse(d);
        n.one('form').on('submit',function() {
         _gaq.push(['_trackEvent', d.formName + ' Submission', 'Form Submission', 'Submit']);
        });
      });
    });
  });
</script>
<!-- Form Submit Tracking END -->

2）将其添加到页脚：

<!-- Form Submit tracking -->
<script>
  Y.use('node', function() {
    Y.on('domready', function() {
      Y.all('.form-block').each(function(n) {
        var d = n.getData('block-json');
        d = Y.JSON.parse(d);
        n.one('form').on('submit',function() {
           dataLayer.push({
             'label': 'Get The Bundle',
             'action': 'Submit',
             'event': 'SS Form Submit'
           });
        });
      });
    });
  });
</script>
<!-- Form Submit Tracking END -->

3) 提交表单后将此代码添加到自定义 HTML 字段：

  <script onload="loadGTM()">
    </script>
    <script type="text/javascript">
      function loadGTM() {
        dataLayer.push({
            'label': 'Get The Bundle',
            'action': 'Submit',
            'event': 'SS Form Submit'
          });
       }
    </script>

我真的希望有人能帮助我指明正确的方向。我确信肯定还有其他人尝试做类似的事情，也会从中受益。

谢谢！ :)

Answer 1

那很好。

现在在 GTM 中，通过触发器监听事件。然后创建一个GTM标签将触发器发布到GA。

Answer 2

这是一个非常古老的问题，但它最接近我遇到的问题。也许这会在将来帮助别人。

TL；博士：

如果您想在表单块提交后执行 GTM 事件（或任何 JS）的 dataLayer.push，则需要在提交后 html 中添加一个具有 onload 属性的元素。

这就是我最终得到的结果

<object onload="window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'submit_quote', });" 
   data="data:text/html, <div style='opacity: 0; font-size: 1px; color: #ffffff;'>the form has submitted</div>"
   style="width: 0px; height: 0px;" />

该对象的数据和样式属性并不重要，我这样做只是为了确保该对象能够加载。

这是一个愚蠢的解决办法，但它似乎确实有效。

另一种方法是将提交后的表单更改为重定向，这会将用户带到“感谢您的提交”页面，该页面将在页面加载时运行 JS 以进行数据层推送。

背景：

2023 年初的某个时候，表单块已更新为完全忽略脚本标签（这是围绕该问题的论坛帖子）。

这意味着如果您想在提交后 html 中执行 dataLayer.push —— 就像这样简单：

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({ 'event': 'submit_quote', });
</script>

Post-Submit 将忽略它。

它似乎不会忽略（目前🤞）是一个加载脚本，因此是上面的解决方案。