GTM触发器配置求助：基于图片显示或指定文本触发触发器

嘿，我来帮你搞定这个DOM监听的问题！根据你贴的页面代码，咱们可以通过两种常见方式实现你要的触发器效果，分场景给你拆解：

如果页面加载完成后就直接显示成功/失败状态，那我们可以在页面就绪后直接检查目标元素是否存在：

// 等页面DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 检查失败图片
  const failedImg = document.querySelector('img.result__img[src="/images/fb/failed.png"]');
  
  // 自定义函数检查错误文本是否存在（原生JS不支持:contains选择器，所以自己写个判断）
  function hasErrorText() {
    const paragraphs = document.querySelectorAll('p');
    for (const p of paragraphs) {
      if (p.textContent.trim() === "Sorry! Something isn't quite right.") {
        return true;
      }
    }
    return false;
  }

  // 检查成功图片（假设成功图是success.png，你可以换成实际的路径）
  const successImg = document.querySelector('img.result__img[src="/images/fb/success.png"]');

  // 判断触发对应逻辑
  if (failedImg || hasErrorText()) {
    console.log("触发失败处理触发器！");
    // 这里写你要执行的失败逻辑，比如发送统计弹窗、跳转等
  } else if (successImg) {
    console.log("触发成功处理触发器！");
    // 这里写成功后的逻辑
  }
});

如果页面是通过AJAX请求、异步操作后才动态更新成功/失败状态的，直接检查可能会错过时机。这时候用MutationObserver监听DOM变化是更可靠的方案：

// 先拿到结果页面的容器节点
const resultContainer = document.querySelector('.page.page--result');

// 定义要监听的DOM变化类型：子元素增删、属性变化（比如img的src）
const observerConfig = { childList: true, attributes: true, subtree: true };

// 自定义文本检查函数
function hasErrorText() {
  const paragraphs = document.querySelectorAll('p');
  for (const p of paragraphs) {
    if (p.textContent.trim() === "Sorry! Something isn't quite right.") {
      return true;
    }
  }
  return false;
}

// DOM变化时的回调逻辑
const domChangeCallback = function(mutations) {
  // 每次DOM变化都检查当前状态
  const failedImg = document.querySelector('img.result__img[src="/images/fb/failed.png"]');
  const successImg = document.querySelector('img.result__img[src="/images/fb/success.png"]');

  if (failedImg || hasErrorText()) {
    console.log("触发失败触发器！");
    // 执行你的失败逻辑
    // 触发后可以停止监听，避免重复触发
    observer.disconnect();
  } else if (successImg) {
    console.log("触发成功触发器！");
    // 执行你的成功逻辑
    observer.disconnect();
  }
};

// 创建观察者实例并开始监听
const observer = new MutationObserver(domChangeCallback);
if (resultContainer) {
  observer.observe(resultContainer, observerConfig);
}

额外小提示 #

如果成功/失败的图片有专属的类名（比如失败图用result__img--failed，成功图用result__img--success），那用类名判断会比src路径更稳定，比如把querySelector改成img.result__img--failed，这样即使图片路径变了，只要类名不变，逻辑依然有效。

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