GatsbyJSブログにGoogleAnalyticsを導入した

2020-05-05

はじめに

おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です!!

今回はGatsbyJSブログにGoogleAnalyticsを導入して、訪問者数などの情報を取得してみたいと思います。
せっかくブログやるなら訪問者数とか意識していきたいですよね。

基本的には公式ページの内容通りやればできます。

前提

このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。

GoogleAnalyticsのセットアップ

GoogleAnalyticsのサイトへアクセス

GooglaAnalyticsのサイトへアクセスすると以下のような画面になるので、[無料で設定]ボタンをクリックします。

img1.png

GoogleAnalyticsのアカウント作成

Googleアカウントにログインしている状態で、サイトにアクセスすると以下5ステップで設定していきます。

  • アカウントの設定
  • 測定の対象を指定する
  • プロパティの設定
  • 利用規約の同意
  • GoogleAnalyticsの情報をメールに配信するかの設定

アカウントの設定

以下のような画面になるので、GoogleAnalyticsのアカウント名を設定します。
一般的には、アカウント名は会社名をつけることが多いらしいけど、今回は個人ブログなので、ブログで使っている名前で設定しました。

img2.png

測定の対象を指定する

次に測定の対象を指定します。
今回はブログなのでウェブを選択しました。

img3.png

プロパティの設定

次にプロパティの設定をします。
ウェブサイト名・URL・種類・タイムゾーンを設定していきます。

img4.png

利用規約の同意

日本の利用規約に変更して、チェックして同意します。

img5.png

GoogleAnalyticsの情報をメールに配信するかの設定

GoogleAnalyticsの情報をメールに配信するかの設定ができます。
こちらは後からも変更できるので、一旦全てチェックしました。

img6.png

Gatsbyの設定

次にページビューをGoogleAnalyticsアカウントに送信するようにGatsby側の設定をしていきます。

プラグインのインストール

プラグインをインストールします。
[gatsby-plugin-google-analytics]が必要なのですが、自分はもともとインストールされていたのでインストール不要でした。

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

プラグインの適用

インストールしたら、[gatsby-config.js]にプラグインを追加します。
こちらももともとほぼ記載されていたので、トラッキングIDを変更するだけでした。

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",
      },
    },
  ],
}

GoogleAnalyticsを確認する

これで適用できているはずなので、確認してみましょう。
まだ、始めたばかりなのでアクティブユーザーが0人・・・頑張ります!!

まとめ

今回はGoogleAnalyticsを導入しました。
今後訪問者が増えていくように、いろいろ試行錯誤したいと思います!!

他にもGatsbyJSのブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。



最後まで見ていただきありがとうございます!!


Written by のふのふ

東京で働く名古屋生まれの麻雀と芝生と娘と妻を愛するアラフォーエンジニアです。 フロントエンドよりのweb開発技術(React,TypeScriptなど)を中心に扱っています。 web開発やデータサイエンス周りの技術に興味があります。 個人開発でwebアプリをリリースすることを目標にしています。

©2020 のふのふ All Rights Reserved.