Google Tag Manager与React/Next.js脚本重复注入问题求助

核心原因 #

Next.js是单页应用（SPA），客户端路由切换不会刷新整个页面，GTM的「历史变更」触发器会在每次路由切换时触发，但GTM的「每页一次」触发规则只对完整页面刷新生效，所以直接注入脚本会重复执行。

实用解决方案 #

1. 给脚本加唯一ID，注入前先判断是否存在 #

这是最直接的方法，在自定义HTML标签里加入存在校验逻辑，确保脚本只被插入一次：

// 替换成你的脚本唯一标识ID和实际地址
const scriptId = 'my-custom-widget-script';
if (!document.getElementById(scriptId)) {
  const script = document.createElement('script');
  script.id = scriptId;
  script.src = 'https://example.com/your-script.js';
  script.async = true;
  document.body.appendChild(script);
  
  // 如果是内联脚本，直接写逻辑并标记全局变量
  // window.myCustomScriptLoaded = true;
}

如果是内联脚本，也可以通过检查全局变量来判断是否已执行：

if (!window.myCustomFeatureInited) {
  // 内联脚本逻辑代码
  console.log('执行自定义逻辑');
  window.myCustomFeatureInited = true;
}

2. 用GTM数据层存储加载状态 #

通过GTM的数据层标记脚本是否已加载，避免重复触发：

1. 在GTM后台创建用户自定义变量：
   • 类型选「数据层变量」
   • 数据层变量名称设为customScriptLoaded
   • 默认值设为false
2. 在自定义HTML标签里加入判断逻辑：

if (!window.dataLayer.get('customScriptLoaded')) {
  // 注入脚本或执行自定义逻辑
  const script = document.createElement('script');
  script.src = 'https://example.com/your-script.js';
  document.body.appendChild(script);
  
  // 更新数据层状态
  window.dataLayer.push({customScriptLoaded: true});
}

数据层状态会在客户端路由切换时保留，只有页面刷新才会重置，适合全局只加载一次的脚本。

3. 优化GTM触发器条件 #

如果你的脚本只需要在特定路由加载，可以给「历史变更」触发器添加路径匹配条件：

• 进入GTM触发器设置，选择「历史变更」类型
• 添加触发条件：「页面路径」匹配你的目标路由（比如/checkout或包含/product）
• 结合上面的脚本存在判断，双重保险避免重复

注意事项 #

• 不要依赖GTM的「每页一次」触发规则，SPA的客户端路由切换不被GTM判定为新页面
• 如果脚本需要在路由切换时更新内容（而非重复加载），可以拆分逻辑：加载脚本只做一次，路由变更时只执行内容更新的函数

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