如何在gatsby-plugin-google-tagmanager插件中配置多个GTM标签

首先纠正你的认知误区：gatsby-config.js 本身是Node.js环境执行的普通JavaScript文件，完全支持条件判断、变量计算等逻辑，只是它的逻辑仅在构建阶段执行，无法处理用户访问站点时的运行时动态判断场景。

根据你的实际部署场景，可选择对应解决方案： #

场景1：每次构建对应一个品牌站点（独立部署） #

也就是你当前使用process.env传参的方案本身就可以满足需求，仅需在构建时传入当前品牌对应的GTM ID环境变量即可，gatsby-config.js配置示例如下：

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-google-tagmanager",
      options: {
        // 构建阶段从环境变量读取对应品牌的GTM ID
        id: process.env.GTM_ID,
        includeInDevelopment: false,
        defaultDataLayer: { platform: "gatsby" },
        enableWebVitalsTracking: true,
      },
    },
  ]
}

构建时指定对应环境变量即可生成对应品牌的站点包：

# 构建品牌A的站点包
GTM_ID=GTM-XXXXXXX npm run build
# 构建品牌B的站点包
GTM_ID=GTM-YYYYYYY npm run build

场景2：单构建包支持多品牌，运行时按路由切换GTM #

如果所有品牌共用同一个构建产物，部署后用户访问不同路由对应不同品牌，这种场景下构建阶段无法提前确定GTM ID，原插件不支持运行时动态切换，推荐通过gatsby-ssr.js手动注入脚本实现：

步骤1：移除原有gatsby-plugin-google-tagmanager配置 #

步骤2：在gatsby-ssr.js中初始化GTM基础逻辑 #

// gatsby-ssr.js
exports.onRenderBody = ({ setHeadComponents, setPreBodyComponents }) => {
  // 初始化dataLayer，优先级最高
  setHeadComponents([
    <script
      key="gtm-datalayer-init"
      dangerouslySetInnerHTML={{
        __html: `window.dataLayer = window.dataLayer || [];`,
      }}
    />,
  ]);

  // 插入GTM noscript降级方案，放在body起始位置
  setPreBodyComponents([
    <noscript key="gtm-noscript">
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=DEFAULT_GTM_ID"
        height="0"
        width="0"
        style={{ display: 'none', visibility: 'hidden' }}
      />
    </noscript>
  ])
}

步骤3：路由切换时动态加载对应品牌的GTM脚本 #

在路由监听逻辑（如gatsby-browser.js的onRouteUpdate钩子，或品牌标识判断的组件逻辑）中，判断当前路由对应的品牌，加载对应GTM：

// 路由更新时执行的逻辑
const initGTMByBrand = (brand) => {
  const GTM_ID_MAP = {
    brandA: 'GTM-XXXXXXX',
    brandB: 'GTM-YYYYYYY'
  }
  const currentGTMId = GTM_ID_MAP[brand]
  // 避免重复初始化
  if (!currentGTMId || window.gtmInitialized === currentGTMId) return

  // 加载对应GTM脚本
  const script = document.createElement('script')
  script.async = true
  script.src = `https://www.googletagmanager.com/gtm.js?id=${currentGTMId}`
  document.head.appendChild(script)
  window.gtmInitialized = currentGTMId

  // 推送GTM初始化事件
  window.dataLayer.push({ event: 'gtm.js', 'gtm.start': new Date().getTime() })
}

补充备选方案：如果两个品牌的追踪逻辑差异不大，也可以仅使用同一个GTM ID，在GTM后台配置触发规则时根据页面路径前缀/品牌标识区分不同品牌的追踪逻辑，不需要修改代码层面的GTM注入逻辑，维护成本更低。

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