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

前提条件

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

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

1. アナリティックスのサイドバーの下の管理アイコンをクリックする。
2. 新たにアカウントを作成するか、既存のアカウントを選択する。
3. [+ プロパティを作成]ボタンをクリックする。
4. 「プロパティ名」を設定する。例：サイト名など
5. 「レポートのタイムゾーン」を「日本」に設定する。
6. 「通貨」を「日本円(JPY ￥）」に設定する。
7. [次へ]ボタンをクリックする。
8. 「ビジネスの規模」を選択する。
9. 該当する利用目的をすべてチェックする。
10. [作成]ボタンをクリックする。→ データストリームの設定に移る。
11. 「Choose a platform」の質問に今回は「ウェブ」を選択する。
12. 「ウェブサイトのURL」を設定する。
13. 「ストリーム名」を設定する。例：サイト名など。
14. 「ストリームを作成]ボタンをクリックする。→ 「ウェブ ストリームの詳細」画面となる。
15. 右上の「測定 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 するなどしてサイトを公開すると、アナリティックスでアクセスが確認できるようになります。