GatsbyJSで作成したブログにGoogle Analyticsとrobots.txtを設定

📅 August 15, 2019

ありがたいことにGatsbyJS Starterには素晴らしいテンプレートがたくさんそろってるので、それを利用してこのブログを作りました。その際にGoogle Analyticsとrobots.txtを導入したのでメモ。

前提

テンプレートにはgatsby-starter-gcnを使いました。 GAのトラッキングIDは取得済み。

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

gatsby-plugin-robots-txtとgatsby-plugin-google-analyticsが必要。 gatsby-plugin-google-analyticsはStarterに初期設定済み。

yarn add -D gatsby-plugin-robots-txt

Netlifyの設定

あらかじめ取得したGAのトラッキングIDをBuild時の環境変数として"GOOGLE_ANALYTICS"を登録しておく。

netlif_env1

gatsby-config.js

以下の変更後、githubにpush。あとは勝手にNetlifyがBuildとデプロイをしてくれる。

module.exports = {
  plugins: [
    "gatsby-plugin-robots-txt",
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS,
        head: true
      }
    }
  ]
};

確認

このブログであれば、https://yamaleaks.fun/robots.txtにアクセスできれば成功。 GAも動いた。