Gatsby.js に Google Analytics を導入する

この記事は以前ちょっと株式会社 社員ブログで公開していたものです

こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。

この記事は、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の設定が埋め込まれています。