JavaScriptに関するお知らせ

SINCE2019
ホーム
>
【JS】GatsbyのGoogleAnalyticsはv4対応のgatsby-plugin-google-gtagを使おう

【JS】GatsbyのGoogleAnalyticsはv4対応のgatsby-plugin-google-gtagを使おう


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

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

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

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

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は設定をミスりやすいからね。テスト環境だと切ってたりするし。要注意!以上。



【JS】npm runとnpxの違い、関係性について
PREV
2021-01-31
【JS】npm runとnpxの違い、関係性について

バタフライキーボードのMacで2年間プログラミングしてぶっ壊れたキーTOP10
NEXT
2021-03-15
バタフライキーボードのMacで2年間プログラミングしてぶっ壊れたキーTOP10