GatsbyでGoogle Analyticsを導入した。 導入にあたってはgatsby-plugin-google-analyticsというプラグインを使用する。

プラグインのインストール

まずはプラグインをインストールする。

npm i -S gatsby-plugin-google-analytics

gatsby-config.jsの設定

続いてgatsby-config.jsに以下の設定を記述する。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
        head: false,
        anonymize: true,
        respectDNT: true,
      },
    }
  ]
}

最低限trackingIdを導入すれば導入が完了する。その他に設定したオプションについて簡単に覚書。

headオプション

読み込み用のscriptタグの記述をheadタグ内にするかbodyタグにするかどうかを決めるオプション。trueでhead内に、falseでbody内に記述される。

anonymizeオプション

一部の国（ドイツなど）では、Google Analyticsに_anonymizeIP関数を使用する必要があるとのこと。その_anonymizeIPを使用するかどうかを決めるためのオプション。

respectDNTオプション

このオプションを有効にすると「DNT (Do Not Track)」が有効になっている訪問者に対してGoogle Analyticsが読み込まれないようになる。ちなみにこのDNTオプションは各ブラウザに実装されている。

各ブラウザにおけるトラッキング拒否機能 （DNT） の有効化について

この他にも設定項目がある。詳しくはGatsbyの公式のドキュメントを参照。