使用Google Tag Manager与JS插入表单隐藏域部分场景失效如何解决

除选择器外可调整的修改点 #

• 调整脚本触发时机
  第二个表单大概率是动态加载（如AJAX渲染、多页表单切页后加载、用户交互后才渲染）的，原有GTM触发如果设置为DOM Ready/Window Loaded阶段执行，此时目标表单还未插入页面DOM，getElementById会返回空导致追加失败。可以把触发逻辑改为监听DOM变动，或添加轮询检测目标表单是否存在，确认存在后再执行插入逻辑，对应优化后的示例代码如下：

  // 轮询检测目标表单是否存在，最多重试20次避免死循环
  let retryCount = 0
  function insertHiddenField() {
    const targetForm = document.getElementById("调整后的第二个表单对应ID")
    if(targetForm && retryCount < 20) {
      const input = document.createElement("input")
      input.type = "hidden"
      input.name = "GAIDinserttest"
      input.value = "{{extract GAID-GA Client ID}}"
      targetForm.appendChild(input)
      return
    }
    retryCount++
    setTimeout(insertHiddenField, 300)
  }
  insertHiddenField()
  

  如果你用的是表单ID前缀gform对应的WordPress Gravity Forms插件的多页表单，可以绑定官方提供的gform_page_loaded事件，每次表单页加载完成后自动插入字段，避免切页后插入的字段被清空。
• 调整字段插入位置
  部分表单提交时只会序列化指定容器内的输入项，你可以把插入目标从表单分页容器改为<form>根标签的直接子节点，避免字段被提交逻辑忽略。
• 适配iframe场景
  如果第二个表单是嵌套在iframe中加载的，父页面直接调用document.getElementById无法拿到iframe内的元素，需要先获取iframe的内容文档再查找目标表单，示例逻辑如下：

  const formIframe = document.getElementById("表单所在iframe的ID")
  formIframe.onload = function() {
    const iframeDoc = formIframe.contentDocument || formIframe.contentWindow.document
    const targetForm = iframeDoc.getElementById("调整后的第二个表单对应ID")
    // 后续插入字段逻辑同上
  }
  

• 绑定提交前触发逻辑
  如果表单提交前会重置DOM内容，可以把插入逻辑绑定到表单的submit事件上，确保提交时字段已经存在于表单中，数据可以正常提交。

内容的提问来源于stack exchange，提问作者user3191724