Help us understand the problem. What is going on with this article?

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/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした