如何在GTM中获取点击元素兄弟元素的innerText值

核心实现逻辑 #

目标元素.restoration-image外层嵌套了一层包裹容器，和存放文本的.title元素不是直接兄弟节点，且页面存在多组重复结构、部分节点类名带动态随机后缀，不能直接写死固定类名或节点层级，要通过「查找最近公共父容器→在容器内匹配目标文本节点」的逻辑实现，容错率更高。

具体配置步骤 #

• 启用GTM内置变量
  进入GTM容器的「变量」页面，在内置变量栏勾选启用Click Element，否则无法获取到实际点击的DOM节点。
• 配置点击触发器
  新建「所有元素」类型的点击触发器，触发条件设置为：Click Element 匹配CSS选择器 .restoration-image，确保只有点击目标图片时才触发对应上报或逻辑。
• 新建自定义JavaScript变量抓取值
  新建「自定义JavaScript」类型的变量，填入以下代码：

function() {
  const clickEl = {{Click Element}};
  if (!clickEl) return "";
  // 向上查找最近的公共父容器，避开带随机UUID的动态类名
  const parentContainer = clickEl.closest(".repair-item-n > div") 
    || clickEl.parentElement?.parentElement?.parentElement;
  if (!parentContainer) return "";
  const titleNode = parentContainer.querySelector(".title");
  return titleNode ? titleNode.innerText.trim() : "";
}

注意事项 #

• 不要依赖示例里带随机串的类名（比如repair-slide--54894d33-6c88-488f-95d7-3ec9b6a3ade4），这类类名是前端构建时自动生成的，页面发版、重新渲染后就会变化，会导致配置直接失效。
• 代码里加了层级兜底和空值判断，哪怕后续前端微调DOM层级，也不会抛出脚本报错影响页面运行。
• 取值时加了trim()处理，自动过滤文本前后的多余空格、换行符，避免返回值带无效空白字符。

验证方式 #

开启GTM预览模式，点击页面上不同分组下的.restoration-image元素，在预览调试面板的「变量」栏查看新建的自定义变量返回值：点击Bags对应图片返回Bags、点击Shoes对应图片返回Shoes即为配置生效。

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