Gatsbyで構築したサイトにGoogle Analytics4を導入する

事前に Google Analytics4 を有効にして、G から始まる測定 ID をコピーしておく。

今まではgatsby-plugin-google-analyticsを利用していたので、gatsby-config.jsに以下のように記述していた。
gatsby-plugin-google-analyticsは GA4 に対応していない。

{
  resolve: "gatsby-plugin-google-analytics",
  options: {
    trackingId: "UA-xxxxxxx",
    head: true,
  },
},

GA4 に対応しているgatsby-plugin-google-gtagを利用する。

yarn add gatsby-plugin-google-gtag

gatsby-config.jsも以下のように修正する。

{
  resolve: "gatsby-plugin-google-gtag",
  options: {
    trackingIds: ["G-xxxxxx"],
    pluginConfig: {
      head: true,
    },
  },
},

ホスティングに Netlify を利用していたが、デプロイ時に以下のエラー。
Node のバージョンが14.15.0以上でないといけないらしい。

PM: error gatsby-plugin-google-gtag@4.16.0: The engine "node" is incompatible with this module. Expected version ">=14.15.0". Got "12.18.0"

Netlify では、ルートディレクトリに.node-version ファイルを置くことで、そのバージョンの Node を利用して Build してくれるらしい。

.node-versionを作成してデプロイ成功。