GitHub Pages で Google Analytics を使うシンプルな設定

はじめに

GithHub Pages で Google analytics を使うには、ざっと調べたところ

1. ga-beacon を用いる
2. ローカルで Jekyll とそのプラグインを使って build する
3. リポジトリに最低限の上書き用ファイルだけ置いて、ビルドは GitHub に任せる
   などの方法があるようです。3 が最もシンプルかもしれないと思いましたが、今はもっとシンプルでした。
   https://pages.github.com/themes/ を見たところ、上書き用ファイル
   （_layout/default.html など）を自前で置く必要もなくなっています。
   結論としては、
   4. _config.yml に google_analytics: トラッキングID という設定を加えて、ビルドは GitHub に任せる
   が一番簡単なようです。

というわけで、やってみます。以下の準備は、すでに終わっている場合は飛ばしてください。

準備

Google Analytics の準備

Googleアナリティクスのトラッキングコードはすでにあるとします。
ない場合は、Googleアナリティクスにログインし、以下の手順でトラッキングIDをコピペもしくはメモしておきます。

1. [管理] > [プロパティ] のプルダウンで [新しいプロパティを作成]
2. [ウェブサイトの名前] に https://<GitGubアカウント名>.github.io を登録
3. これでトラッキングIDが表示されているのでコピー

GitHub Pages の準備

GitHub で Pages を作成しておきます。

プロジェクトごとの Pages を簡単に作成するには以下の手順になります。
master ブランチ直下にファイルを置く場合を説明します。
master ブランチの docs フォルダ以下にファイルを置く場合は適宜読み替えてください。

1. GitHub 側で適当なリモートリポジトリを REAME.md ありで作成します。
2. Settings で GitHub Pages の Source にて master branch を選び Save を押します。さらに Theme Chooser で適当なテーマを選びます。
3. README.md の編集画面が出る場合は、適宜編集して Commit します。README.md を index.md に名前を変更しておきます。（どちらでもよいです。）
4. Settings の GitHub Pages に現れる URL をたどってデプロイされていることを確認します。（URL は https://<GitHubアカウント名>.github.io/<リポジトリ名>/ になります。）

もちろん 1 は README.md なしでリモートリポジトリを作成し、ローカルリポジトリで index.md を作成して push してもよいです。

以上で、_config.yml という設定ファイルが新たにリポジトリに加わっているかと思います。

コミットしても更新されなかったりすることがあります。GitHub のスタッフに問い合わせたところ、最大15分かかるそうです。慌てず待ちましょう。（もっとかかっている場合もある気がします(?)）

GitHub Pages に Google Analytics を設定する

リモートリポジトリで作業する場合

_config.yml を以下のように編集し、commit します。theme のところは選んだテーマによって違いますが特に変更しなくてよいです。

_config.yml

theme: jekyll-theme-slate
google_analytics: UA-....

UA-.... は Google Analytics のトラッキングID です。

これだけでアナリティクスに反映されるようになります。

いったんローカルリポジトリで作業する場合

1. リモートリポジトリのみで Pages を作成した場合は git clone ... でローカルに持ってきます。ローカルリポジトリから push して Pages を作成した場合は git pull origin master しておきます。
2. ローカルに _config.yml という設定ファイルがあることを確認し、上述のように編集します。
3. add, commit, push します。

参考になったサイト

https://stackoverflow.com/questions/17207458/how-to-add-google-analytics-tracking-id-to-github-pages
の Answer にある https://desiredpersona.com/google-analytics-jekyll/ を参考にしました。

GitHub の Theme は https://pages.github.com/themes/ を使っているようですが、_layout/default.html を見たところ、すでに google analytics を使うためのスクリプトが body の最後に加えられています。google_analytics が設定されると自動で追加されるようです。