gatsbyで作ったブログをGA4(Google Analytics 4)に対応させる

GA4 対応パッケージのインストール

以前はgatsby-plugin-google-analyticsを使っていたけど、GA4(Google Analytics 4)に対応したgatsby-plugin-gtagに変更する。

npm install gatsby-plugin-gtag

gatsby-config.js の編集

gatsby-plugin-google-analyticsの設定を削除して、gatsby-plugin-gtagに書き換える。

gatsby-plugin-google-analyticsの設定は不要なので削除する。

{
  "resolve": `gatsby-plugin-google-analytics`,
  "options": {
    "trackingId": `UA-xxxxxxxx-x`
  }
}

gatsby-plugin-gtagの設定。
G-xxxxxxxxxxの部分を個人ごとの値に変更する。

{
  "resolve": `gatsby-plugin-gtag`,
  "options": {
    "trackingId": `G-xxxxxxxxxx`,
    "head": false
  }
}

gatsby-plugin-google-analytics を削除

gatsby-plugin-google-analyticsは使用しなくなったので削除する。

npm uninstall gatsby-plugin-google-analytics

以上。

関連記事