masalibの日記

システム開発、運用と猫の写真ブログです

「Gatsby JS」google-analyticsのプラグインを追加する

ログ分析をするために、google-analyticsを追加します。本格的にやる場合はタグマネージャーのほうがいいです。
簡易的なサイトなら、google-analyticsでも問題ないです。

手順

アナリティクスの「トラッキングID」を発行する

Googleアナリティクスでデータを計測するためにはトラッキングIDが必須です
私が書くよりも下記のサイトが詳しいです。

https://wacul-ai.com/blog/access-analysis/google-analytics-method/ga-tracking-id/

プラグインをインストールする

gatsbyにはプラグインが用意されているのでインストールする。
なお、ローカルで動かしているサーバー(gatsby develop)を停止してください

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

プラグインの設定を追加する

    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // replace "UA-XXXXXXXXX-X" with your own Tracking ID
        trackingId: "UA-16973603-12",
      },
    },

念のために差分

f:id:masalib:20190311013202p:plain
追加の差分

確認

ローカルでは確認できなかったのでデプロイする。リアルタイムに表示されれば問題ないです。

f:id:masalib:20190311013218p:plain
アナリティクスのリアルタイムの画面