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で確認してみましょう。