10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順

こんにちは、筋肉めがねです。
昨日、本サイトを立ち上げ、これ以降こちらのサイトでブログを書いていこうと考えているわけですが、果たして読者の方が増えていくのか、気になるところです。

そこで、早速Google Analyticsを導入しました。

導入方法について、Gatsbyの公式サイトに書いてある通り、“gatsby-plugin-google-analytics“のpluginをダウンロードして進めていったのですが、それだとうまくいかず、ハマってしまいました。最終的には“gatsby-plugin-gtag“を用いる事でうまく動作したので、その経緯についても書いていきます。

以下、目次です。

先ず試してみたこと（うまく動作しなかった方法）

1. Google Analyticsのページで、新しくPropertyを作成、そして新しくStreamを作成しました。新たにStreamを作成するとMeasurement IDというものが付与されます。そしてこれを後ほど使用します。
2. 続いて、Gatsbyの公式サイトに書いてある通り、terminal上でgatsby-plugin-google-analyticsをインストールしました。

Gatsby公式サイト Google Analyticsの導入方法

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

3. 公式サイトでは、google analyticsのtracking IDをgatsby-config.jsへとベタ打ちするようなガイドがありますが、これは好ましくありません。そこで、Netlifyの環境変数を使用します。
4. Netlifyへloginし、Build & deploy下のEnvironmentにて、以下のように環境変数を設定します。

Key: GOOGLE_ANALYTICS_ID
Value: ここに、先ほどメモしたMeasurement IDを書きます。

5. このサイトでは、“gatsby-v2-starter-lumen“のテンプレートを使用しておりますが、このテンプレでは、gatsby-config.jsファイル内で、既にgoogle analyticsに関する記述が一部あります。この記述は以下のように変更しました。

resolve: `gatsby-plugin-google-analytics`,
options: {
  trackingId: process.env.GOOGLE_ANALYTICS_ID,
  head: true,
}

Netlifyの環境変数を使用したいので、ここでは、process.env.GOOGLEANALYTICSIDを用います。

6. 公式サイトで書かれているとおり、gatsby-plugin-google-analyticsに関する記述をgatsby-config.js内のpluginセクションにおいて一番最初にもってきました。
7. 最後に、gatsby buildして、git push行ったんですが、5分経てど、10分経てどGoogle analyticsが正常に動いておりません。

という事で、違う方法を試すことにしました。

最終的にうまくいった方法

1. 先ほどGoogle Analytics上で作成したProperty, Streamをそのまま使用します。
2. 続いて、gatsby-plugin-gtagをterminal上でインストールします。

sudo npm install --save gatsby-plugin-gtag

3. Netlifyでの設定については、先ほどの設定をそのまま使用します。
4. gatsby-config.jsを以下のように変更します。

resolve: `gatsby-plugin-gtag`,
options: {
  trackingId: process.env.GOOGLE_ANALYTICS_ID,
  head: true,
  anonymize: true,
}

5. 最後にgatsby buildして、git pushしたところ、1-2分でGoogle analyticsが正常に動いていることを確認しました。

gatsby-plugin-gtagについては、公式サイトにも、基本的にはGoogle anlaytics pluginを使用する事と同じ効果が得られる、と書いていますね。
Gatsby公式サイト gatsby-plugin-gtagの導入方法

本日は以上です。ではでは。

ps MarkdownのCodeblock内で、コンマ ”,“を使用すると、それがhtmlでは、“undefined”と表示される、という問題がありました。これについては、現状、セミコロン”;“で代替していますが、解決策がわかり次第、共有します。

20190106追記
MarkdownのCodeblock内で、コンマ ”,“を使用すると、それがhtmlでは、“undefined”と表示される、という問題がありましたが、これは、code blockのopeningの部分で、languageを定義してあげる事で解決しました。

```javascript