GatsbyサイトにGoogle Analyticsを設置
既存の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 するなどしてサイトを公開すると、アナリティックスでアクセスが確認できるようになります。
ディスカッション
コメント一覧
まだ、コメントがありません