是否可以在gatsby-node.js中设置Google Analytics跟踪ID？

有三种可行的实现方式，可根据你的项目情况选择：

方案1：使用异步gatsby-config直接配置（最推荐） #

Gatsby 2.14及以上版本支持gatsby-config.js导出异步函数，你可以直接在配置文件中请求CMS获取跟踪ID，再返回完整配置，不需要额外修改gatsby-node.js逻辑。
代码示例：

// gatsby-config.js
module.exports = async () => {
  // 替换为你的CMS接口请求逻辑
  const cmsRes = await fetch("CMS接口地址")
  const cmsData = await cmsRes.json()
  const gaTrackingId = cmsData.googleAnalyticsTrackingId

  return {
    // 原有站点配置
    siteMetadata: {
      title: "你的站点名称",
      // ...其他配置
    },
    plugins: [
      // ...其他原有插件
      {
        resolve: `gatsby-plugin-google-analytics`,
        options: {
          trackingId: gaTrackingId,
          anonymize: true,
          // 其他插件支持的配置项
        },
      },
    ],
  }
}

优势：完全复用官方插件的所有能力，配置逻辑集中，不需要额外的自定义代码。 #

方案2：在gatsby-node中修改插件配置 #

如果你的项目已经固定了gatsby-config.js的结构，不想调整为异步导出，可以在gatsby-node.js的onPreInit钩子中请求数据后，调用setPluginOptions修改插件配置：
代码示例：

// gatsby-node.js
exports.onPreInit = async ({ actions }) => {
  const { setPluginOptions } = actions
  // 替换为你的CMS接口请求逻辑
  const cmsRes = await fetch("CMS接口地址")
  const cmsData = await cmsRes.json()
  const gaTrackingId = cmsData.googleAnalyticsTrackingId

  // 覆盖gatsby-plugin-google-analytics的配置
  setPluginOptions({
    name: `gatsby-plugin-google-analytics`,
    options: {
      trackingId: gaTrackingId,
      anonymize: true,
      // 其他插件支持的配置项
    },
  })
}

注意：需要保证gatsby-config.js中已经预先配置了gatsby-plugin-google-analytics插件，才能通过这个方法修改它的配置。 #

方案3：自定义注入GA代码 #

如果不想依赖官方插件，可以直接在gatsby-node.js中请求ID后手动注入GA脚本到页面中：
代码示例：

// gatsby-node.js
let gaTrackingId = ""

// 构建前请求CMS获取ID
exports.onPreBootstrap = async () => {
  const cmsRes = await fetch("CMS接口地址")
  const cmsData = await cmsRes.json()
  gaTrackingId = cmsData.googleAnalyticsTrackingId
}

// 渲染HTML时注入GA脚本
exports.onRenderBody = ({ setHeadComponents }) => {
  if (!gaTrackingId) return

  setHeadComponents([
    <script
      async
      src={`https://www.googletagmanager.com/gtag/js?id=${gaTrackingId}`}
      key="ga-external-script"
    />,
    <script
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${gaTrackingId}');
        `
      }}
      key="ga-inline-script"
    />
  ])
}

注意：以上三种方案的跟踪ID都是构建时注入的，如果CMS中的跟踪ID更新，需要重新触发站点构建才能生效。

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