【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は設定をミスりやすいからね。テスト環境だと切ってたりするし。要注意!以上。
PREV
2021-01-31
【JS】npm runとnpxの違い、関係性について
NEXT
2021-03-15
バタフライキーボードのMacで2年間プログラミングしてぶっ壊れたキーTOP10
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介