google analytics導入

January 29, 2021

google analyticsの勉強のために立ち上げがサイトなので、さっそくgoogle analyticsを導入します。
ここを参考に進めていきます。 まずは、gatsby-plugin-google-analyticsをインストール

$ yarn add gatsby-plugin-google-analytics

analyticsのアカウントを作成し、GAのトラッキングIDを取得します。取得後、gatsby-config.jsにGAの設定を追記します。

gatsby-config.js
  plugins: [
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: "G-XXXXXXXXXX",
        head: true,
      }
    },

gatsby developを再起動後、ソースを見てGAタグが追加されたか確認したのですがどこにも追加された形式なし。 ドキュメントをみると、gatsby developでは機能しない模様。
ドキュメントに従いgatsby build, gatsby serveを実行してソースを確認

$ gatsby build
$ gatsby serve

再度ソースを見てもGAタグが入ってないとしばらく悩みましたが、gatsby serveはポート9000で立ち上がって来てたことに気が付いていないだけでした。 http://localhost:9000/にアクセスしてGAタグが入ってるのを確認できたので、デフォルトのページを削除して一回pushします。