Google Analytcs 計測タグをGatsbyで構築したサイトに埋め込む方法を記載します。
計測タグは既に取得できているものとします。

計測タグの取得方法は
【Gatsby】Google Analyticsを設定する方法
の記事がわかりやすいです。

プラグインのインストール

次のコマンドを実行してプラグインをインストールします。

$ npm i gatsby-plugin-google-gtag --legacy-peer-deps

このサイトでは gatsby-plugin-next-seo を使っているのですが、その場合

npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^2.0.0 || ^3.0.0 || ^4.0.0" from gatsby-plugin-next-seo@1.11.0
npm ERR! node_modules/gatsby-plugin-next-seo
npm ERR!   gatsby-plugin-next-seo@"^1.11.0" from the root project

のようなエラーになるため、 --legacy-peer-depsオプションをつけています。

プラグイン設定

gatsby-config.jsのplugin設定の冒頭に次の記述を追記します。

  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [process.env['GATSBY_TRACKING_ID']],
      },
    },
    :

trackingIdsは配列で設定する必要があることに注意してください。

AWS Amplify での環境変数設定

このサイトは AWS Amplify でホストされています。
AWS Amplify に環境変数 GATSBY_TRACKING_IDを設定します。
値には計測タグの値を指定します。

後はビルド＆デプロイで完了です。

確認

サイトにアクセスして、Google Analyticsの計測タグがソースに埋め込まれていることを確認します。