GatsbyJSにGoogle Analyticsを導入する

GatsbyJSにGoogle Analyticsを導入する

Google Analyticsを導入するにはどうすればいいのか？
Gatsbyならgatsby-plugin-google-analyticsで簡単に実装できます。

やったこと

• gatsby-plugin-google-analyticsインストール
• gatsby-config.jsを設定
• siteConfig.jsを設定

gatsby-plugin-google-analytics

まずは、gatsby-plugin-google-analyticsをnpmでインストールします。

npm install --save gatsby-plugin-google-analytics

gatsby-config.js

次にgatsby-config.jsを設定します。
/data/siteConfig.jsにデータはまとめて管理する仕様にしているのでsiteConfig.jsをちゃんと読み込むようにしましょう。

const config = require("./data/siteConfig");

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: config.googleAnalyticsID
      }
    },
  ],
}

siteConfig.js

siteConfig.jsは以下のように設定します。

googleAnalyticsID: "UA-XXXXXXX-X", // GA tracking ID.

GoogleAnalyticsを確認する。

Google Analyticsで確認してみましょう。