以往的gatsby-plugin-google-analytics不适用Google Analytics 4 （GA4：可以看作是传统GA的加强版，启用了增强型衡量功能，不仅可以跟踪 Web，可以跟踪App）， 在Gatsby v3 中你需要用到插件gatsby-plugin-google-gtag， 当然如果你依旧需要用传统GA（非GA4），那当然可以用gatsby-plugin-google-analytics，请参看本文Part 1的gatsby-plugin-google-analytics配置，有关GA4请直接参考Part2。

Part 1 如何在Gatsby中使用传统Google Analytics（非GA4）

请确保插件配置在gatsby-config.js的头部， 不然GA的script不能很好地载入DOM。

module.exports = {
  siteMetadata: {
    /* your metadata */
  },
  plugins: [
    // Make sure this plugin is first in the array of plugins
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-111111111-1",
        // this option places the tracking script into the head of the DOM
        head: true,
        // other options
      },
    },
  ],
  // other plugins
};

然后到你的Google Analytics页面找到你的site的跟踪ID 把ID填写到你的设置script里面就OK啦。

Part 2 如何在Gatsby v3 中使用Google Analytics 4(GA4)

参考谷歌analytics官网，如果你使用的CMS 或者网站builder 是Google Site, Wix, WooCommerce 或者WordPress， 请参考Part 1的方法，这个方法依然适用。其他情形，你需要把手动加全局tag到CMS HTML里面。 因此，Gatsby 的情形，我们 可以利用前文提到的gatsby-plugin-google-gtag。 首先在你的Gatsby项目里安装google gtag这个插件。 yarn add gatsby-plugin-google-gtag or npm install ...

提醒一句，如果你已经安装了gatsby的google-analytics plugin（gatsby-plugin-google-analytics，建立项目的时候可能会默认勾选），你需要先把它卸载掉。（yarn remove gatsby-plugin-google-analys or npm remove ...）

安装完以后同样去gatsby-config.js设置.简单起见我只设置必须的选项。其他详细设置请参见官网。

module.exports = {
  siteMetadata: {
    /* your metadata */
  },
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
          "G-1111111111", // Google Analytics / GA
        ],
        pluginConfig: {
          head: true,
        },
      },
    },
  ],
  // other plugins
};

然后就是去google analytics获取你的衡量ID了。注意这里的衡量ID和传统GA的跟踪ID不一样。获取方式也不同。 （详细参看Google Analytics Admin page) 去GA系统设置好你的site的GA4以后，到管理页面的媒体资源tab下找到数据流选项，点开你的项目即可获得衡量ID。 这里注意设置一下增强衡量功能，点开图像右下角的设置按钮。 把红框部分取消勾选，不然会重复记录事件。 然后把你的衡量ID（G-XXXXXXXXXX）填到你的设置script里面就完事儿啦。

这个plugin只在production状态下发送event，所以要用gatsby build 然后用 gatsby serve 启动9000端口查看，才能发送event到GA。 过一会你去GA的系统看你的项目实时访问状态就能看到有用户访问啦。（国内访问的话就不好说了，有时可能有延时）

其他

想要检测用户点击了跳出本站的链接的时候用该插件的outboundlink-component进行设置