Gatsby.js + Netlify でつくったサイトに Google Analytics を導入する

背景

Gatsby.js + Netlify でつくっているサイトに Google Analytics を入れてみたくなりました。
プラグインでサクッと導入できることは知っていましたが、地味にハマったので共有します。

ちなみに公式リファレンスを隅まで読めばハマりません。
今すぐこのページを閉じて公式リファレンスを読みましょう。

最初に試したこと

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

をしてから、以下のように書きました。

gatsby-config.js

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

Google Analytics から発行されたトラッキング ID は Netlify の環境変数に入れておけばよさそうです。
Netlify の環境変数は process.env.HOGE で参照できます。

これで完璧。
だと思っていたら違いました。

ハマったポイント

上述した方法では Google Analytics が動きませんでした。
しばらく悩んだ後、以下の対応が必要なことに気がつきました。

1. head オプションをつける

アナリティクスヘルプを読むと、Google Analytics のスクリプトは

タグの直後に貼り付けます。

と書かれています。

しかし Gatsby.js では、head optionを指定しない場合、 Google Analytics のスクリプトが body に配置されるそうです。

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
+       head: true,
      }
    },
  ],
}

2. gatsby-plugin-google-analytics を最初に読み込む

どうやら gatsby-plugin-google-analytics は gatsby-config.js に書かれているプラグインの中でいちばん最初にロードしないといけないようです。

gatsby-config.js

module.exports = {
  plugins: [
    // ここより前で別のプラグインをロードしないこと
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
        head: true,
      }
    },
  ],
}

この2つの対応を行った結果、無事に Google Analitics が導入できました。

おわりに

冒頭でも述べたとおり、当記事の内容は公式のリファレンスにも書かれています。

何番煎じか分かりませんが、「公式リファレンスをちゃんと読むべき」ということを改めて学びました。

ちなみに作ったサイトはこちら。
https://machidania.tokyo/