Javascript 与谷歌无关的表单跟踪代码是如何工作的？

我在一家营销机构工作，正在构建一个定制的营销仪表盘。作为我们核心产品的一部分，我需要创建一个自定义的web表单跟踪脚本，我可以将它嵌入到客户的网页上，以跟踪他们提交的表单。这与Google Analytics提供的内容类似，但我需要自己编写。在搜索谷歌时，我只得到与GTM或谷歌分析相关的结果，这显然不能解释代码的实际工作原理

到目前为止，我已经能够在页面加载时通过在数组中提供表单的名称与表单建立连接，该数组使用立即调用的函数传递给跟踪脚本。在脚本中，我附加到该表单的“onsubmit”事件，并将值发送到自定义API端点函数，但该函数会覆盖可能已经存在的submit事件。如果我们试图跟踪表单提交的客户已经有其他需要提交的内容，则不会发生这种情况。换句话说，跟踪代码根本不能是侵入性的，应该连接到现有表单。我知道有一个更好的方法，我可以在前进中使用一些指导

<script type="text/javascript">     
      var _mxtr_ = _mxtr_ || [];
      _mxtr_.push(['endpoint', 'uuid_for_instance']);
      _mxtr_.push(['form', 'test-form']);
</script>

<script type="text/javascript" src="mxtr_ts.js">
((mxtr) => {
window.onload = () => {
document.forms[mxtr[1][1]].onsubmit = (ev) => {
  //preventDefault is causing the problems but without it, the form doesn't submit
  ev.preventDefault();
  let url = 'custom api endpoint';
  let sendData = {};
  let formData = [...document.forms[mxtr[1][1]]];

  console.log('FORM DATA', formData);

  for (const i of formData) {
    //Below will grab form data preferrably by name if not, then ID which could be randomly generated
    sendData[i.name ? i.name : i.id] = i.value
  }

  function getCookie(cname) {
    let name = cname + '=';
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');

    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return 'NA';
  }

  let m_id = getCookie('mtc_id');

  axios.post(url + mxtr[0][1], sendData)
    .then((res, err) => {
      console.log('RESULT', res, 'ERROR', err);
      if (!err) {
        document.getElementById('form-response').innerText = 'Success';
        mxtr = null;
        // document.forms[mxtr[1][1]].submit();
      } else {
        document.getElementById('form-response').innerText = 'Error';
        mxtr = null;
      }
    });
   }
  };
})(_mxtr_);

</script>

---

我希望将表单数据发送到端点，以便能够相应地处理它。也许我需要更好地了解当前跟踪代码的工作方式，这样我才能想出一种更好的方法，而不会影响当前表单的提交。非常感谢您提供的任何帮助。

这些javascript函数的问题在于它们是唯一的，通过设置一个，您可以替换以前的函数。window.onload可能会遇到同样的问题

一种解决方案是保存以前的处理程序并自己调用它们，如下所示：

提交功能也可以这样做

window.onload=函数{ console.log'onload one set by user'； }; functionmyFramework{ var负载=window.onload； window.onload=函数{ log'onload two set by'+myFramework； i装载{ 负载 } };

---

}“在扬克诺诺河的最佳框架”；认真地为什么在没有解释的情况下否决投票？！为什么？也许他们发现不够具体。。如今，世界经济变得艰难；很多人避免发表评论以防止OP的报复，或者只是因为他们厌倦了重复同样的事情。。不要为一张特定的选票感到太不安，生活很短暂哇，谢谢你。我真的很感激。我明白了，我需要对某某进行描述，并认为我是，但你可能是对的。再次感谢。那么当IIF调用“加载”时，不会触发两次吗？我很感激你的回复，顺便说一句，没有，因为你用你自己的回复取代了它。这个代码片段演示了：如果你不调用它，那么第一个用户onload根本不会被触发。明白了！我要试一试。非常感谢你的帮助！我可能会回来：我不得不说，你的建议肯定让我走上了正确的轨道，所以谢谢你。然而，我很好奇表单验证会如何影响这一点。在进行任何表单验证之前是否会调用我的脚本？例如，假设有人没有填写必填字段，是否会在验证发生之前调用我的提交处理程序？如果可以，请随时告诉我，我非常感谢您的帮助。@ZacHerman这取决于您在何处对用户函数进行手动调用。你可以在之前、之后或两者都做。请注意，您应该将处理程序接收到的事件对象和参数传输给用户函数，因为它是通过引用传递的，所以您应该能够读取用户函数对其进行的转换，就像使用preventDefault阻止它一样