Gastbyで新しいバージョンのGoogle Analyticsが動かない
gatsby-plugin-google-analytics のドキュメントを参考に設定したのだが、なぜかうまく行かない。
Googleの提供しているChrome拡張であるTag Assistantでチェックしてみると、無効なIDだという理由でエラーになる。
調べた結果、起きていたのはこちらの問題だった。
私が利用していたGoogle Analyticsは新しいバージョン(GA 4)のもので、そもそもこちらを利用している場合、gatsby-plugin-google-analytics は GA 4 には対応していなかった。
そのため、下記を参照して gatsby-plugin-google-gtag をセットアップすることで問題は解決した。
ドキュメントには下記のような設定例が載っている。
module.exports = { plugins: [ { resolve: `gatsby-plugin-google-gtag`, options: { // You can add multiple tracking ids and a pageview event will be fired for all of them. trackingIds: [ "GA-TRACKING_ID", // Google Analytics / GA "AW-CONVERSION_ID", // Google Ads / Adwords / AW "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager) ], }, }, ], }
このtrackingIdsの配列の中にGoogle Analyticsの測定ID(G-XXXXXXXXX)をセットすればOK。
(Google Analyticsの測定ID、一つだけを設定する形で問題ない)
併せてGoogle Search Consoleの設定も行いたい場合(うまく行かなかったパターン)
上に載せたやり方でGoogle Analyticsの設定自体は完了となるが、Google Search Consoleの設定を併せて行いたいケースもあるだろう。 その場合、上記のやり方では足りない。
上のやり方で設定をした場合、Google Analytics関連のtagは</head>以降に挿入されるが、それでは、Google Search Consoleにおける、Google Analyticsアカウントを用いた所有権の確認に失敗する。
所有権の確認を成功させるためには </head>より前にGoogle Analyticsのタグを挿入する必要がある。
これを実現させるためには下記のオプションを追加する。
diff --git a/gatsby-config.js b/gatsby-config.js --- a/gatsby-config.js +++ b/gatsby-config.js @@ -5,6 +5,9 @@ module.exports = { options: { trackingIds: [`G-XXXXXXXXX`], }, + pluginConfig: { + head: true, + },
これで所有権の確認は完了する。
と思いきや、失敗する...なぜだ...？？？？
併せてGoogle Search Consoleの設定も行いたい場合(うまくいったパターン)
というわけで、仕方なく確認のためのHTMLタグを挿入するやり方に切り替える。
google-site-verification てきな名前のタグである。
Gatsbyの構成にもよるので設定方法などは記載しないが、これをHTMLタグの</head>前に貼り付ければ設定は完了する。
無事に設定自体はできたものの、Google Analyticsの設定は完了しているのに、なぜGoogle Search Consoleの設定には失敗したのか...
原因がつかめていないのが気持ち悪いし、黙ってHTMLタグを設定するのは負けた感があるものの、原因を調査するには疲れたので、ひとまずこれで行く。
この件については余裕ができたら調べる(←こういうセリフを吐いた場合、いつまで立っても調べはじめないのが世の常かもしれないが...)
