こんにちは！ GoogleAnalyticsをエンジニアじゃない人に見せた時の反応が好きなMizutani(@sirycity)です。 「えっこんな分かるの！？怖っ！？」 みたいなリアクション。

今日はそんなGoogleAnalytics(GA)をGatsby.jsに設定する時のライブラリの話について。

GatsbyにGAを設置するライブラリは復数ある

GA設置系ライブラリは結構あります。特に有名なのがこの2つ。

• gatsby-plugin-google-analytics
• gatsby-plugin-google-gtag

analyticsの方が3倍くらい人気。

使い方はどっちも超簡単で、それぞれgatsby-config.jsにこうやって書くだけ。

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: 'UA-000000000-0',
      },
    },
  ],
}

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-google-gtag',
      options: {
        trackingIds: ['UA-000000000-0'],
        pluginConfig: {
          head: true,
        },
      },
    },
  ],
}

こんだけ一緒なら別に-analyticsの方を使えば良い気もするんですが、個人的には-gtagを使って欲しいんです。なぜなら…

-analyticsはGA4に対応していない

2020年10月にGAのバージョン4がリリースされました。んで、 V4に対応してるのは-gtagの方だけです。…理由はそれだけなんだけどね。

ちなみにGAのV4だとIDがG-A1A1A1A1A1みたいになります。以前はUA-000000000-0みたいな感じ。僕はこれを知らずに1時間つまずいた。注意。

さいごに

GAは設定をミスりやすいからね。テスト環境だと切ってたりするし。要注意！以上。