Gatsbyブログにグローバルサイトタグ(gtag.js)を実装する

誰も見に来ることがないとわかっているこのブログに、Google アナリティクスの設定を行った時のログを残しておこうと思います。

グローバルサイトタグ（gtag.js）って何？

以前、WordPress に Google のユニバーサルアナリティクスタグ(analytics.js)を設定したことはありましたが、同じようにアナリティクスタグを設定しようとしたところ、タグがグローバルサイトタグ(gtag.js)なるものに変わっていました。

グローバルサイトタグ（gtag.js）は、JavaScript タグ付けフレームワークおよび API であり、イベントデータを Google アナリティクス、Google 広告、キャンペーンマネージャー、ディスプレイ＆ビデオ 360、検索広告 360 に送信できます。
https://developers.google.com/gtagjs/

どうやら現在はグローバルサイトタグがメインで使われているようですね。ということで gtag を設定する方向で進めてみます。

既存プラグインの削除

ユニバーサルアナリティクスタグ(analytics.js)用のプラグインを削除する手順です。必要な方だけこの手順を行ってください。 まずはgatsby-config.jsからプラグインの設定を削除します。

module.exports = {
  ...
  plugins: [
    ...
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-XXXXXXXXX-X",
      },
    },
    ...
  ],
};

次にプラグインを削除します。

$ yarn remove gatsby-plugin-google-analytics

グローバルサイトタグ用のプラグインを導入する

こちらの「Gatsby サイトに Google グローバルサイトタグを簡単に追加してくれるプラグイン」を利用して設定していきます。

gatsby-plugin-google-gtag

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

https://www.gatsbyjs.com/

まずはプラグインを追加します。

$ yarn add gatsby-plugin-google-gtag

次にプラグインの設定を行います。

module.exports = {
  ...
  plugins: [
    ...
    {
      resolve: "gatsby-plugin-google-gtag",
      options: {
        trackingIds: ["G-XXXXXXXXXX"],
        pluginConfig: {
          head: true,
          respectDNT: true,
        },
      },
    },
    ...
  ],
};

設定の内容はこちらになります。

僕が行った設定はこれだけです。必要に応じてマニュアルを参考に設定を調整してみてくださいね 👋👋