既存のGatsbyサイトにGoogle Analytics を追加するメモです。

前提条件

Google Analyticsのアカウントがあり、使ったことがある。
Gatsbyサイトがある。

アナリティックスのアカウント/プロパティの設定

アナリティックスのサイドバーの下の管理アイコンをクリックする。
新たにアカウントを作成するか、既存のアカウントを選択する。
[+ プロパティを作成]ボタンをクリックする。
「プロパティ名」を設定する。例：サイト名など
「レポートのタイムゾーン」を「日本」に設定する。
「通貨」を「日本円(JPY ￥）」に設定する。
[次へ]ボタンをクリックする。
「ビジネスの規模」を選択する。
該当する利用目的をすべてチェックする。
[作成]ボタンをクリックする。→ データストリームの設定に移る。
「Choose a platform」の質問に今回は「ウェブ」を選択する。
「ウェブサイトのURL」を設定する。
「ストリーム名」を設定する。例：サイト名など。
「ストリームを作成]ボタンをクリックする。→ 「ウェブストリームの詳細」画面となる。
右上の「測定 ID」（例：G-W********）を書き留めるが、画面を出しておくなどして、このあと利用できるようにする。

gatsby-plugin-google-gtag のインストール

次のコマンドなどでインストールをおこなう。

$ npm install gatsby-plugin-google-gtag
$ npm audit fix

又は

$ yarn add gatsby-plugin-google-gtag

gatsby-config.js の編集

こちらを見て設定します。例えば、一部の行は削除して次のような感じです。

:
:

    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
          "G-W8XXXX4XXX", // Google Analytics / GA
        ],
        // This object gets passed directly to the gtag config command
        // This config will be shared across all trackingIds
        gtagConfig: {
          anonymize_ip: true,
          cookie_expires: 0,
        },
        // This object is used for configuration specific to this plugin
        pluginConfig: {
          // Puts tracking script in the head instead of the body
          head: false,
          // Setting this parameter is also optional
          respectDNT: true,
          // Avoids sending pageview hits from custom paths
          exclude: ["/preview/**", "/do-not-track/me/too/"],
        },
      },
    },
  ],
}

このあと、いつもどおりに GitHub に push するなどしてサイトを公開すると、アナリティックスでアクセスが確認できるようになります。