Google Tag Manager：如何仅在父标签无指定类时提取子元素文本

给定HTML结构 #

<li class="ais-RefinementList-item ais-RefinementList-item--selected">
 <div><label class="ais-RefinementList-label">
  <input type="checkbox" class="ais-RefinementList-checkbox" checked="" value="Software">
  <span class="ais-RefinementList-labelText">Software</span>
  <span class="ais-RefinementList-count">264</span></label></div></li>

核心需求 #

• 仅当<li>标签无ais-RefinementList-item--selected类时，提取ais-RefinementList-labelText的文本内容
• 若<li>包含该选中类，不执行任何提取操作

现有可运行函数 #

（点击count元素时也能正确提取labelText）

function () { return {{Click Element}}.parentNode.lastChild.previousSibling.innerText }

优化后的函数 #

function () {
  // 从点击元素向上定位到最近的li父节点
  const listItem = {{Click Element}}.closest('.ais-RefinementList-item');
  // 检查li是否未处于选中状态
  if (!listItem.classList.contains('ais-RefinementList-item--selected')) {
    // 直接定位labelText元素并返回文本，层级查找更可靠
    return listItem.querySelector('.ais-RefinementList-labelText').innerText;
  }
  // 选中状态下返回空值，不执行提取
  return '';
}

优化说明 #

1. 用closest()替代多层parentNode链式查找，避免DOM结构变动导致的逻辑失效，适配点击label、count、checkbox等任意子元素的场景
2. 直接通过<li>的选中类判断状态，比检查input的checked属性更稳定，解决了多筛选器勾选时统计失效的问题
3. 明确分支逻辑：未选中时返回目标文本，选中时返回空值，避免不必要的执行动作

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