こんにちわ、ちょっと株式会社 エンジニアのたっちーです。
この記事は、web制作をする上でほぼ導入が必須となる。Google Analytics を Gatsby.js に導入する際の忘備録になります。

この記事公開時点の環境情報は以下です。

• gatsby-plugin-google-gtag: 4.6.0
• gatsby: 4.4.0

Google Analyticsで測定IDを取得する

ホーム画面 > 設定 > データストリーム（プロパティ） > 測定ID の順でIDを取得してください。
取得したIDは後ほど、利用するので控えておいてください。

Gatsbyに gatsby-plugin-google-gtag を追加する

下記コマンドを利用してGatsbyにgatsby-plugin-google-gtagを追加します。

npm install gatsby-plugin-google-gtag

# yarn を利用している場合は下記を使用
yarn add gatsby-plugin-google-gtag

インストールが完了したら、gatsby-config.jsでpluginの設定をします。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: ["G-XXXXXXXXXX"],  // 控えておいた、測定IDを記載します。
        pluginConfig: {
          head: true  // headタグに記載されるようにコンフィグを設定します。
        }
      }
    }
  ]
};

以上で設定完了となります。

※ 開発環境では、gtag.jsの設定が埋め込まれません。gatsby buildによってビルドされたコードにはgtag.jsの設定が埋め込まれています。