Gatsby Starter BlogでGoogle Analyticsを導入する
2021-06-05 22:56
2020年10月に、次世代のGoogle Analyticsとして「Google Analytics 4 プロパティ」が正式リリースされている。 Gatsbyでは従来のGoogle Analyticsとは異なる設定が必要になるため、その方法について書いていく。
概要
色々調べると、Google Analytics 4 プロパティ(以下GA4)というのは、 昨今のインターネット利用の状況に合わせて解析の考えを根本から見直した仕組みらしい。
ちなみに旧式のGoogle Analyticsはユニバーサルアナリティクス(以下UA)という。 UAから何がどう変わったかは、この記事を書くために10分ほどGA4について調べた程度の付け焼き刃知識では とてもエラソーに語れるような代物ではないので、 他の偉大なる先人にお任せすることにする。
参考:
UAとGA4の扱いについて
この記事を書いている2021年6月時点では、UAとGA4は併用して利用可能だ。 以下の観点から、UAからアップデートして新しいGA4だけを使うのではなく、両方を導入した方が良いと思う。
- データ収集が1からやり直しになるため、これまでUAで蓄積した解析データを利用できない (今後移行が対応されるかは微妙)
- 学習コストが高く、導入してすぐ使いこなせるだけの情報も十分に出揃っていない
- UAの精度が低下したという背景があるとはいえ、GA4とは解析の仕様自体が異なり完全に置き換わるものではない
よって、この記事では両方を併用する設定について書いていく。
UAとGA4の利用を開始する
Google Analyticsの事前登録は済んでいる前提で進める。
2021年6月現在では、UAとGA4のプロパティを両方いっぺんに作ることが可能。 プロパティの作成画面に来たら、プロパティ名とかタイムゾーンとかを自分に合ったもので選ぶ。 日本なら大体以下のような設定になると思う。
ここで次に進むのではなく、「詳細オプションを表示」を押す。 すると以下のような項目が表示される。
ここから「ユニバーサル アナリティクス プロパティの作成」の項目をONにすると、更に項目が増える。 「Google アナリティクス 4 とユニバーサル アナリティクスのプロパティを両方作成する」とは、 文字通りUAとGA4のプロパティを両方作るかという意味なので、ここにチェックを入れる。
こんな感じに設定したら、「次へ」を押す。そのあとに出る利用規約がどーのこーのとかは、 同意して最後まで進める。
首尾良く作れたら、このように作られるはず(真ん中に関係ないものが挟まってるが気にしない)。 前述の通りUAとGA4は仕組み的に異なるものなので、それぞれ違うものとして扱われているのがわかる。
とにかく、これでUAとGA4を使う準備が整った。
必要なプラグインを導入する
gatsby-plugin-google-analytics
UAをGatsbyで使うには、gatsby-plugin-google-analyticsが必要になるため導入する。 ただし、記事タイトル通りGatsby Stater Blogなら最初から入ってるので不要。
npm install gatsby-plugin-google-analytics
gatsby-config.jsに以下の設定を追加する。 (Gatsby Starter Blogにはもちろん最初からある)
module.exports = {
// 省略
plugins: [
// 省略
{ resolve: `gatsby-plugin-google-analytics`, options: { trackingId: ``, // ここに後ほどトラッキングIDを記載 head: true, // headタグ内に解析タグを出力する }, }, // 省略
]
gatsby-plugin-google-gtag
GA4をGatsbyで使うには、UAとは別にgatsby-plugin-google-gtagが必要になるため導入する。 こちらはGatsby Starter Blogには入っていない。
npm install gatsby-plugin-google-gtag
こちらも、gatsby-config.jsに以下の設定を追加する。
module.exports = {
// 省略
plugins: [
// 省略
{ resolve: `gatsby-plugin-google-gtag`, options: { trackingIds: [ ``, // ここに後ほどトラッキングIDを記載 ], pluginConfig: { head: true, // headタグ内に解析タグを出力する }, }, }, // 省略
]
これで準備が整った。
Gatsbyで使用する
UA
UAのプロパティを開いて、「プロパティ設定」を開くと「トラッキングID」が表示されている。 これをコピーしておく。
コピーしたトラッキングIDを、先ほどgatsby-config.jsに追加したgatsby-plugin-google-analyticsのtrackingId
に書き加える。
module.exports = {
// 省略
plugins: [
// 省略
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: `UA-***********`, head: true,
},
},
// 省略
]
GA4
GA4はUAとは少し違うところにトラッキングIDが書かれている。 プロパティを開いて、「データストリーム」からサイトURLを開くと以下のような画面が開く。
右上にある「測定ID」をコピーし、先ほどgatsby-config.jsに追加したgatsby-plugin-google-gtagのtrackingIds
に書き加える。
module.exports = {
// 省略
plugins: [
// 省略
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [
`G-**********`, ],
pluginConfig: {
head: true,
},
},
},
// 省略
]
動作を確認する
ここまでで設定は完了しているため、あとはデプロイすればUAとGA4ともに使えるようになる。
ローカルで確認する場合は、gatsby develop
では動作しないようになっているため、
以下コマンドで起動する。
gatsby build && gatsby serve
これでHTMLソースのhead
内にUAとGA4の解析コードが出力されることを確認できる。
あとはデプロイ後に解析が正しく行われていることをGoogle Analyticsで確認すれば良い。