Gatsby.jsで新しいGoogle Analyticsを使う場合は、gatsby-plugin-google-analyticsではなく、gatsby-plugin-google-gtagを使うこと

Gastbyで新しいバージョンのGoogle Analyticsが動かない

gatsby-plugin-google-analytics のドキュメントを参考に設定したのだが、なぜかうまく行かない。 Googleの提供しているChrome拡張であるTag Assistantでチェックしてみると、無効なIDだという理由でエラーになる。

調べた結果、起きていたのはこちらの問題だった。

github.com

私が利用していたGoogle Analyticsは新しいバージョン(GA 4)のもので、そもそもこちらを利用している場合、gatsby-plugin-google-analytics は GA 4 には対応していなかった。

そのため、下記を参照して gatsby-plugin-google-gtag をセットアップすることで問題は解決した。

www.gatsbyjs.com

ドキュメントには下記のような設定例が載っている。

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タグを設定するのは負けた感があるものの、原因を調査するには疲れたので、ひとまずこれで行く。
この件については余裕ができたら調べる(←こういうセリフを吐いた場合、いつまで立っても調べはじめないのが世の常かもしれないが...)