yuya-yuzen

GatsbyJSで構築したブログサイトにGoogle Analyticsを入れる

2020/08/06
2020/08/06

GatsbyJSで構築したブログサイトに、Google Analyticsを導入する方法について解説します。

結論

gatsby-plugin-google-analytics というプラグインを導入します。

gatsby-plugin-google-analytics | GatsbyJS

前提

  • 筆者の環境

    • Windows 10 Home 64bit
    • node v12.18.0
    • npm 6.14.4
  • Netlifyでホスティング
  • Google Analyticsのアカウントは作成済み

手順

  1. パッケージをインストールする
  2. 設定ファイルにプラグインの記述をする
  3. 環境変数の設定をする

パッケージをインストールする

gatsby-plugin-google-analytics というパッケージをインストールします。

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

設定ファイルにプラグインの記述をする

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

環境変数の設定をする

Google AnalyticsのトラッキングIDを環境変数で指定します。 Netlifyでの設定も必要です。

Netlifyで環境変数の設定をする

次の順番で設定ページを開いていくと、環境変数の設定ができます。

  1. Site settings
  2. Build & deploy
  3. Environment
  4. Environment variables

KeyGOOGLE_ANALYTICS_TRACKING_ID として、 Value に実際のトラッキングIDを入力したらOKです。

設定ファイルで環境変数の指定をする

gatsby-config.js
require("dotenv").config()
module.exports = {
    ...
                trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
    ...
}

確認

自分のサイトにアクセスして、アナリティクスのリアルタイムレポートを見てみます。 自分らしきアクセスが確認できれば、うまくいっています。


Share:
ゆうや