如何在GTM中捕获动态ID表单字段的手机号变量？

AI 小北

2026-7-4

解决GTM中动态ID手机号输入框的变量配置问题

问题说明

你需要在Google Tag Manager（GTM）中把表单内的手机号设为变量，但输入框ID是动态生成的（如示例中的id-lpvcy9p3），且未将手机号数据推送至数据层；尝试用正则匹配DOM ID提取值时，始终返回空值。输入框代码如下：

<input name="phone" type="tel" id="id-lpvcy9p3" class="my-input" required="" value="1111111111" data-gtm-form-interact-field-id="0">

可行解决方案

方案1：通过`name`属性定位（最可靠）

输入框的name属性固定为phone，直接用这个定位完全避开动态ID问题：

在GTM中创建DOM元素变量
选择「选择方法」为CSS选择器
输入选择器：input[name="phone"]
选择「要提取的属性」为value

方案2：通过`class`+`type`属性定位

如果name属性也存在变动可能，结合固定的class和输入类型定位：

创建DOM元素变量，选择器用input.my-input[type="tel"]（避免匹配其他同class的输入框）
提取属性选择value

方案3：自定义JavaScript变量（兜底方案）

若以上方法不适用，可通过自定义JS获取值：

function() {
  const phoneInputs = document.querySelectorAll('input[type="tel"]');
  for (let i = 0; i < phoneInputs.length; i++) {
    if (phoneInputs[i].name === 'phone') {
      return phoneInputs[i].value;
    }
  }
  return ''; // 未找到时返回空值
}