如何在Google Tag Manager中获取FormSubmit事件对应表单的data属性值

无需强制编写自定义Javascript，GTM内置功能即可满足基础需求，以下是两种可选方案：

方案1：使用内置自动事件变量（无代码方案） #

操作步骤如下：

• 首先进入GTM容器后台的「变量」面板，在「内置变量」中勾选所有Form相关变量，确保表单提交事件可以正常识别表单元素
• 点击「用户定义变量」区域的「新建」按钮，变量类型选择「自动事件变量」
• 自动事件变量的配置项：
  • 变量类型下拉选择「数据属性」
  • 「属性名称」填写要提取的data属性后缀，比如提取data-length就填length，提取data-height就填height
  • 勾选「尝试获取最接近的元素的属性值」，CSS选择器输入form，避免触发事件的元素是表单内部按钮时取不到属性
• 保存变量，可按规则命名比如Form - Data Length、Form - Data Height
• 找到你已配置的Form Submit触发规则，确保触发条件已经限定到你的目标表单（比如可添加条件Form ID等于form-12避免误触发）
• 在对应的事件标签（比如GA4事件标签）的参数配置中，新增自定义参数，参数名自行定义，值选择刚才创建的对应data属性变量即可
• 进入预览模式测试，确认表单提交时参数已携带正确的属性值

方案2：自定义JS变量（适合复杂需求场景） #

如果需要同时提取多个data属性、或者需要对属性值做二次加工，可以用自定义JS实现：

• 先确认内置变量中的「Form Element」已经启用
• 新建用户定义变量，类型选择「自定义JavaScript」，输入以下代码：

function() {
  const targetForm = {{Form Element}};
  if (!targetForm) return {};
  return {
    form_length: targetForm.dataset.length,
    form_height: targetForm.dataset.height
  }
}

• 保存变量后，即可在事件参数中直接引用该变量，或者单独提取变量内的属性值使用

说明 #

• 不需要必须编写Javascript代码，基础的单data属性提取需求用GTM内置的自动事件变量完全可以实现
• 如果你的表单存在动态加载、嵌套结构等特殊情况，优先用自定义JS变量的方案兼容性更好

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