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のプロパティを両方いっぺんに作ることが可能。プロパティの作成画面に来たら、プロパティ名とかタイムゾーンとかを自分に合ったもので選ぶ。日本なら大体以下のような設定になると思う。

Google Analytics設定1

ここで次に進むのではなく、「詳細オプションを表示」を押す。すると以下のような項目が表示される。

Google Analytics設定2

ここから「ユニバーサルアナリティクスプロパティの作成」の項目をONにすると、更に項目が増える。「Google アナリティクス 4 とユニバーサルアナリティクスのプロパティを両方作成する」とは、文字通りUAとGA4のプロパティを両方作るかという意味なので、ここにチェックを入れる。

こんな感じに設定したら、「次へ」を押す。そのあとに出る利用規約がどーのこーのとかは、同意して最後まで進める。

Google Analyticsプロパティ一覧

首尾良く作れたら、このように作られるはず(真ん中に関係ないものが挟まってるが気にしない)。前述の通りUAとGA4は仕組み的に異なるものなので、それぞれ違うものとして扱われているのがわかる。

とにかく、これでUAとGA4を使う準備が整った。

必要なプラグインを導入する

gatsby-plugin-google-analytics

UAをGatsbyで使うには、gatsby-plugin-google-analyticsが必要になるため導入する。ただし、記事タイトル通りGatsby Stater Blogなら最初から入ってるので不要。

Shell

npm install gatsby-plugin-google-analytics

gatsby-config.jsに以下の設定を追加する。 (Gatsby Starter Blogにはもちろん最初からある)

gatsby-config.js

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には入っていない。

Shell

npm install gatsby-plugin-google-gtag

こちらも、gatsby-config.jsに以下の設定を追加する。

gatsby-config.js

module.exports = {
  // 省略
  plugins: [
    // 省略
    {      resolve: `gatsby-plugin-google-gtag`,      options: {        trackingIds: [          ``, // ここに後ほどトラッキングIDを記載        ],        pluginConfig: {          head: true, // headタグ内に解析タグを出力する        },      },    },    // 省略
  ]

これで準備が整った。

Gatsbyで使用する

UA

UAのプロパティを開いて、「プロパティ設定」を開くと「トラッキングID」が表示されている。これをコピーしておく。

UAのトラッキングID

コピーしたトラッキングIDを、先ほどgatsby-config.jsに追加したgatsby-plugin-google-analyticsのtrackingIdに書き加える。

gatsby-config.js

module.exports = {
  // 省略
  plugins: [
    // 省略
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `UA-***********`,        head: true,
      },
    },
    // 省略
  ]

GA4

GA4はUAとは少し違うところにトラッキングIDが書かれている。プロパティを開いて、「データストリーム」からサイトURLを開くと以下のような画面が開く。

GA4のトラッキングID

右上にある「測定ID」をコピーし、先ほどgatsby-config.jsに追加したgatsby-plugin-google-gtagのtrackingIdsに書き加える。

gatsby-config.js

module.exports = {
  // 省略
  plugins: [
    // 省略
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          `G-**********`,        ],
        pluginConfig: {
          head: true,
        },
      },
    },
    // 省略
  ]

動作を確認する

ここまでで設定は完了しているため、あとはデプロイすればUAとGA4ともに使えるようになる。ローカルで確認する場合は、gatsby developでは動作しないようになっているため、以下コマンドで起動する。

Shell

gatsby build && gatsby serve

これでHTMLソースのhead内にUAとGA4の解析コードが出力されることを確認できる。

ローカルで起動して動作確認

あとはデプロイ後に解析が正しく行われていることをGoogle Analyticsで確認すれば良い。