如何在GTM中动态追踪表单提交后的字段值？

不需要为每个静态索引单独创建Data Layer变量，GTM完全支持动态处理表单字段值，下面是几种实用方案：

方案1：自定义JavaScript变量遍历所有表单字段 #

创建一个自定义JavaScript变量，通过遍历表单元素自动收集所有字段的键值对，无需依赖固定索引：

function() {
  var form = gtm.element;
  if (!form || form.tagName !== 'FORM') return {};
  
  var fieldValues = {};
  var fields = form.querySelectorAll('input, select, textarea');
  
  for (var i = 0; i < fields.length; i++) {
    var field = fields[i];
    // 优先用字段name作为键（更直观，不受位置变化影响）
    if (field.name) {
      fieldValues[field.name] = field.value;
    } else {
      // 无name属性时用索引标识
      fieldValues['field_' + i] = field.value;
    }
  }
  
  return fieldValues;
}

使用方式：在表单提交触发器触发的标签中，直接通过{{自定义JS变量名}}.字段name（比如{{表单字段集合}}.email）获取对应值，或者将整个对象传递给分析工具（如GA4事件参数）。

方案2：修改表单提交的Data Layer推送逻辑 #

如果你能控制网站代码，可以在表单提交前主动收集所有字段值，一次性推送到Data Layer：

document.querySelector('your-form-selector').addEventListener('submit', function(e) {
  var formData = new FormData(e.target);
  var fieldValues = Object.fromEntries(formData);
  
  dataLayer.push({
    'event': 'formSubmission',
    'formFieldValues': fieldValues
  });
});

之后在GTM中创建一个Data Layer变量，变量名设为formFieldValues，就能直接获取所有字段的动态键值对。

方案3：按字段属性精准获取（替代静态索引） #

如果只需要特定字段的值，可通过字段的name、id等属性直接定位，避免依赖索引：
创建自定义JavaScript变量：

function() {
  var form = gtm.element;
  return form ? form.querySelector('input[name="username"]').value : '';
}

这种方式比静态索引更可靠，即使表单字段位置调整，只要属性不变就能正常取值。

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