如何向GTM的DOM Ready触发器添加事件参数以读取DOM属性

问题根因 #

点击触发器会默认关联当前被点击的元素作为目标元素，你之前配置的读取data-ga-confirmation的变量大概率是绑定点击元素的自动事件变量，而domReady触发器没有对应的绑定元素，因此无法读取到对应属性值。

解决步骤 #

• 第一步：在GTM后台新建自定义JavaScript变量，命名为JS - data-ga-confirmation，变量代码填写如下内容：

function() {
  // 请将下方的选择器替换为你目标div的精准定位规则，比如类选择器.confirm-box、id选择器#order-confirm等
  const targetEle = document.querySelector('替换为你的目标div选择器');
  if (targetEle?.dataset) {
    // 直接返回布尔值，和你需要的事件参数类型匹配
    return targetEle.dataset.gaConfirmation === 'true';
  }
  // 未找到元素时返回默认值，可根据自身需求调整
  return false;
}

• 第二步：修改你对应事件代码的布尔参数，取值源从之前的点击属性变量替换为刚创建的JS - data-ga-confirmation变量
• 第三步：如果存在目标元素渲染滞后的情况，可将原domReady触发器替换为Window Loaded触发器，保证触发时元素已经完成渲染
• 第四步：进入GTM预览模式验证，确认domReady（或Window Loaded）事件触发时，自定义变量返回值和页面元素实际data-ga-confirmation属性一致，验证通过后发布容器即可

特殊场景适配 #

如果你的目标div是异步渲染的（比如接口请求完成后才插入到DOM中），domReady/Window Loaded触发器都会先于元素渲染完成触发，此时需要将触发器替换为元素可见性触发器，监听目标div渲染完成后再触发事件代码，即可保证属性值正确读取。

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