Google Analytics+Google Serch Console+Gatsby設定方法について
Google Analyticsの導入をしてみましたが、爆速で構築できた事に驚きました
はじめに
記事が閲覧された場合のアクセス状況の可視化の為にGoogle Analyticsの導入をしてみました。
Gatsbyで導入しているテンプレートによって記載手順は異なりましたが、比較的簡単に導入することができました。
Google Serch Console設定手順について
- Google Serch Consoleにアクセスする
- ドメインorURLプレフィックスの2種類の設定方法があります
- 今回はURLプレフィックスで設定します
- HTMLタグの項目を選択してconten=""の文字列をコピーします
- 私の場合はwebsite-config.tsの「googleSiteVerification」にコピペしました
- デプロイが完了したらGoogle Analyticsに戻って「確認」を押下します
以上で導入は完了となります。
もしエラーなどが表示されたらコピペの見直しやプラグインがそもそも導入されているか確認を行ってみてください。
Google analytics 設定手順について
- Google analyticsアクセスします
- 「データストリーム」を押下して「ストリームを追加」を押下してウェブを押下します
- ストリーム名、ストリームURLを記入して保存します
- 測定IDが表示されますので「gatsby-config.js」の「trackingId」に追加します
- 追加したらデプロイしたら完了となります
以上で導入は完了となります。
もしエラーで表示されなくなったらプラグインが導入されているか確認をしましょう。
詰まった点
2022/7/12時点では Google analytics はGA4にアップデートされており、新規作成される場合はインストールしたテーマによってはアップデートが必要となっております。
私の場合はgatsby-config.jsを確認すると古いバージョンとなっておりましたので、アップデートしました。
GA4に対応しているgatsby-plugin-google-gtagをインストールします。
yarn add gatsby-plugin-google-gtaggatsby-config.js も変更を加えます。
変更前
{
resolve: 'gatsby-plugin-google-analytics',
options: {
trackingId: 'UA-XXXX',
// Puts tracking script in the head instead of the body
head: true,
// IP anonymization for GDPR compliance
anonymize: true,
// Disable analytics for users with `Do Not Track` enabled
respectDNT: true,
// Avoids sending pageview hits from custom paths
exclude: ['/preview/**'],
// Specifies what percentage of users should be tracked
sampleRate: 100,
// Determines how often site speed tracking beacons will be sent
siteSpeedSampleRate: 10,
},
},変更後
{
resolve: "gatsby-plugin-google-gtag",
options: {
trackingIds: ["G-XXXX"],
pluginConfig: {
// Puts tracking script in the head instead of the body
head: true,
// IP anonymization for GDPR compliance
anonymize: true,
// Disable analytics for users with `Do Not Track` enabled
respectDNT: true,
// Avoids sending pageview hits from custom paths
exclude: ['/preview/**'],
// Specifies what percentage of users should be tracked
sampleRate: 100,
// Determines how often site speed tracking beacons will be sent
siteSpeedSampleRate: 10,
},
},
},あとは、デプロイして反映されているか動作確認をしてみてください。
おわり
これでGoogle Serch ConsoleとGoogle Analyticsの導入が完了しました。
現時点だけでもどれだけのアクセスが発生するか確認するのが楽しみです。
次回はASPの登録を行っていきます。