GatsbyブログにGoogleアナリティクスを導入する

April 30, 2020

ブログに限らず、何かしらサイトを開設したらまずやりたいのは、アナリティクスの導入ですよね。
どうせ誰も見ないだろうと思いつつも、アクセスがあるのか気になっちゃうのが人間の性ってもんですよ。

というわけで、このブログにも導入しました。
せっかくなので解説します。

GatsbyブログへのGoogleアナリティクス導入方法

公式サイトを見て下さい。終わり。
https://www.gatsbyjs.org/docs/adding-analytics/

嘘です。そこまで味気ないことはしません。

公式サイト、全部英語ですしね、、。
読むの大変ですよね。
日本語で要点だけかいつまんだ記事を用意してほしいですよね。
そろそろ書きます。

アナリティクスにサイトを登録する

まずはアナリティクスにサイトを登録しましょう
アカウント持ってない人はサクッと作りましょう。
https://marketingplatform.google.com/about/analytics/

僕はもともとアカウント持ってたので、持ってる人向けに話を進めます。

アナリティクスの画面を開いたら、左のメニューに「管理」ってところがあるので、ポチッと。

すると、「プロパティを作成」って青いボタンが真ん中にあると思うので、クリックして下さい。次に、こんな画面になると思います。

この記事を読んでる方がやりたいのはウェブでしょう。
そのまま「続行」をクリック。

この画面で、自分のサイトの名前、URLを設定して下さい。業種はそのサイトのテーマに一番合いそうなやつを選びましょう。
タイムゾーンも日本にしておくといいと思います。
設定したら「作成」をクリック。

OKです。
次の画面にトラッキングIDが書いてあるので、それをこのあと使います。
アナリティクス側での作業はここまでです。

Gatsbyのアナリティクスのプラグインをインストール

今度はエディタでの作業です。
プラグインをインストールします。

npm install --save gatsby-plugin-google-analytics

インストールできたら、gatsby-config.jsに設定を書きます。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // replace "UA-XXXXXXXXX-X" with your own Tracking ID
        trackingId: "UA-XXXXXXXXX-X",
      },
    },
  ],
}

“UA-XXXXXXXXX-X”のところに、先程出てきた自分のサイトのトラッキングIDを入力して下さい。とりあえずこれだけ書けば最低限なので動きます。
詳しいオプションを知りたければこちらからどうぞ。
https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/

動作するか試してみよう

ここまでで設定は完了です！
早速ビルドして、サイトにアクセスしてみましょう！
アナリティクスのリアルタイムのところに動きがあれば成功です。
これでアクセスチェックが捗りますね！

まあ僕の場合はアクセスなくて落ち込むだけなんですけどね、、。