概要

  • Jekyll で生成しているサイトに Google Analytics を導入した

環境

  • 特記事項なし

手順

トラッキング ID の取得

Google Analytics > アナリティクス設定 から、プロパティを作成する。

項目 設定 例
トラッキングの対象 ウェブサイトを選択 ウェブサイト
ウェブサイトの名前 プロパティの名前を設定 KAKELOG
ウェブサイトの URL サイトのベース URL を設定 https://blog.kakeragames.com
業種 適当に設定 コンピュータ、電化製品
レポートのタイムゾーン 適当に設定 日本（GMT+09:00）東京

規約に同意して、トラッキング ID を取得する。

トラッキングスクリプトの貼り付け

プロパティ > トラッキング情報 > トラッキングコード から、トラッキングスクリプトを取得する。

_includes/google-analytics.html を作成して、スクリプトを貼り付ける。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', '<YOUR_TRACKING_ID>', 'auto');
  ga('send', 'pageview');

</script>

トラッキングスクリプトの挿入

各ページにスクリプトを挿入するために、基本レイアウト HTML にさっきのテンプレートを挿入する。

_layouts/default.html

<!DOCTYPE html>
<html>

  {% include head.html %}
  {% include google-analytics.html %}

  <body>
    <!-- 略 -->
  </body>

</html>

トラッキング出来ていることの確認

Google Analytics > レポート から、いろいろ見てみる。

  • リアルタイム > サマリー
  • ユーザー > サマリー
  • 行動 > サイト コンテンツ > すべてのページ

トラッキングできてれば OK。 （集計範囲が初期値だと 1 ヶ月前から前日までなので、すぐに確認したかったら本日を含める。）

まとめ・感想

Jekyll で生成しているサイトに Google Analytics を導入した。

特に難しいところは無かった。テンプレートも簡単に作れて良い。