使用set()内置方法更新GTM DataLayer失败，寻求解决方案

问题排查与修复步骤 #

• 容器ID不一致导致无效操作
  你的代码中判断条件用的是window.google_tag_manager["GTM-XXXXX"]，但更新时用的是window.google_tag_manager["GTM-XXXXXX"]（ID长度不一致），这会导致你更新的是另一个不存在的GTM容器的dataLayer，自然不会生效。先把两处的容器ID统一成正确的GTM-XXXXX（或GTM-XXXXXX，以实际容器ID为准）。

• set方法无法触发GTM重新评估
  即使容器ID正确，dataLayer.set()只是修改了DataLayer内部的变量值，但不会触发GTM的标签、触发器重新读取数据。GTM只有在检测到新的dataLayer.push()操作（尤其是带有event属性的推送）时，才会重新处理DataLayer中的数据。

修正后的代码示例 #

// 统一容器ID
const gtmContainerId = "GTM-XXXXX"; // 替换为你的实际GTM容器ID

if (window.google_tag_manager[gtmContainerId]?.dataLayer.get('ecommerce') !== undefined) {
  console.log('update');
  // 推送带event的对象，触发GTM重新读取数据
  window.dataLayer.push({
    event: 'ecommerce_updated', // 自定义事件名，需在GTM中配置对应触发器
    ecommerce: {
      productId: `${this.product.id}`, 
      productName: `${this.product.productName}`
    }
  });
} else {
  console.log('create');
  window.dataLayer.push({ 
    ecommerce: {
      productId: `${this.product.id}`, 
      productName: `${this.product.productName}`
    }
  });
}

补充说明 #

如果你一定要用set方法更新值，之后必须再推送一个空的事件触发GTM，比如：

window.google_tag_manager[gtmContainerId].dataLayer.set('ecommerce', {
  productId: `${this.product.id}`, 
  productName: `${this.product.productName}`
});
// 触发GTM重新读取
window.dataLayer.push({ event: 'data_updated' });

但更推荐直接用带event的push操作，这是GTM设计中预期的数据更新方式。

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