Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@memetics

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

More than 1 year has passed since last update.

背景

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/

8
Help us understand the problem. What is going on with this article?
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
giftee
giftee (株式会社ギフティ) は、ソーシャルギフトサービス 「giftee」、法人向けデジタルギフトチケット販売画面の提供、その他O2Oソリューションなどを展開する五反田のスタートアップです。(onlab第1期, KDDI ∞ LABO 第1期)

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?