GatsbyサイトにGoogle Analyticsを設置

既存の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 するなどしてサイトを公開すると、アナリティックスでアクセスが確認できるようになります。

アナリティックスのリアルタイム