Google Tag Manager变量：基于字段标签提取价格

完全可以通过自定义JavaScript变量实现，核心思路是摆脱对动态类名的依赖，通过固定的文本内容定位目标元素。以下是可直接在GTM中使用的代码：

function() {
  // 遍历页面中所有span元素（可根据实际结构缩小范围，比如改成'li span'）
  const labelElements = document.querySelectorAll('span');
  
  for (let el of labelElements) {
    // 匹配包含目标文本的标签，兼容末尾的冒号和空格
    const labelText = el.textContent.trim();
    if (labelText.startsWith('Estimated Total Cost')) {
      // 获取紧邻的下一个span兄弟元素（即数值所在容器）
      const valueElement = el.nextElementSibling;
      
      if (valueElement && valueElement.tagName === 'SPAN') {
        // 返回清理后的数值文本
        return valueElement.textContent.trim();
      }
    }
  }
  
  // 未找到时返回空字符串（可根据需求改成null）
  return '';
}

代码说明 #

1. 不依赖动态类名：放弃使用易变的类选择器，改用文本内容定位标签，避免类名更新导致逻辑失效
2. 灵活的文本匹配：使用startsWith而非精确匹配，兼容文本末尾可能的冒号、空格差异；如果文本格式完全固定，也可以改成labelText === 'Estimated Total Cost:'提升精准度
3. 结构关联定位数值：利用HTML结构中数值span是标签span下一个兄弟节点的特性，通过nextElementSibling直接获取目标元素
4. 容错处理：加入判断确保找到的兄弟元素确实是span，避免返回无效内容

优化建议 #

如果页面结构清晰（比如所有目标项都在某个ul下），可以将document.querySelectorAll('span')改成更具体的选择器（比如document.querySelectorAll('ul li span')），减少遍历元素数量，提升执行效率。

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