gatsby-blogでGAタグをanalytics.jsからgtag.jsへ変更した

December 12, 2021February 20, 2024

#Develop #Gatsby #React #ブログ制作

このブログはあまり人が来ないけど、google analytics のタグを埋めてある。正直今の状態で満足しているが、6 ヶ月ぐらい前から毎月のように google がタグをアップグレードせよと言ってくるので対応した。

gtag.js はどんなメリットがあるのか

メールにはこう書いてあった

プライバシーを重視した測定

よりプライバシーに気を使って情報収集する
コード不要のタグ管理

機能追加や測定の on/off をコンパネ上からできる
スピーディーで手軽な連携

google 広告とかその他のサービスとも連携できる

google 広告とか使っていると少しメリットがあるのだろうか。現時点であまり私にとってのメリットはないように思う。

gatsby.js にどうやって実装するか

SPA のサイトは DOM だけ更新するのでうまくページ遷移が取りにくいこのサイトももともと gatsby のプラグイン(gatsby-plugin-google-analytics)で実装してもらっている。今回は基本的にプラグインの置き換えて対応完了となる。

gatsby-plugin-google.gtag のインストールと設定

何はなくともプラグインのインストール

npm install gatsby-plugin-google-gtag

gatsby-config.js を編集する。 gatsby-plugin-google-analytics をコメントアウト gatsby-plugin-google-gtag を下に追記。必要そうなトラッキング ID とヘッダーに追加する設定だけ入れた。トラッキング ID は analytics.js の頃から変更無いので、以前同様 env から入力する。

plugins: [
  //{
  //  resolve: `gatsby-plugin-google-analytics`,
  //  options: {
  //    trackingId: `${process.env.GOOGLE_ANALYTICS_ID}`,
  //    head: true,
  //  },
  //},
  {
    resolve: "gatsby-plugin-google-gtag",
    options: {
      trackingIds: [`${process.env.GOOGLE_ANALYTICS_ID}`],
      pluginConfig: {
        head: true,
      },
    },
  },
]

動作確認と後処理

無事 gtag が読み込まれたのでコメントアウトしたgatsby-plugin-google-analyticsのプラグインの設定を削除してプラグインも削除した。

npm uninstall gatsby-plugin-google-analytics

これで対応完了。 gatsbyv2.x でインストール時に実は一度環境を壊してしまったので気軽に latest をインストールせず依存関係をチェックしてから行いましょう。このプラグインがきっかけて gatsby のバージョンを v2 から v4 に上げたのですがその話はまたいつか

参考

gatsby-plugin-google-gtag | Gatsby

gatsby-plugin-google-gtag Easily add Google Global Site Tag to your Gatsby site. The global site tag (gtag.js) is a JavaScript tagging…

Gatsby

analytics.js から gtag.js に移行する | ウェブ向けユニバーサルアナリティクス（gtag.js） | Google for Developers

Google for Developers

おしまい