Room 3100

Github Pagesでリアルタイムアクセス解析を行う

先日、hexoというNode.js製静的サイト作成ツールを用いてNpm Insideというブログを新たに始めました。 ついでに、遅ればせながらきちんとアクセス解析もしようと思い立ちました。 このブログはmiddlemanで作っていますが、こちらも特に解析をしていませんでした。

早速調べたところ、ga-beaconというライブラリが良さそうだったので導入してみました。

igrigorik/ga-beacon

ga-beaconとは

ga-beaconMITライセンスで公開されているツールで、Google Analyticsと連携してリアルタイムにアクセス解析を行ってくれるものです。 Google Analyticsの画面から現在どのページに何人アクセスしているのかを閲覧することができます。

元々、Github Pages用のアクセス解析は無いかと探していて、このツールにたどり着きました。

導入方法

導入は簡単です。事前にGoogle Analyticsに登録をします。

  • 新しいプロパティを作成します。
  • Websiteを選択します。
  • Website nameに識別用の名前を入力します。
  • WebSite URLの項目にhttps://ga-beacon.appspot.com/と入力します。
  • Get Tracking IDをクリックし、UA-XXXXX-XというIDをコピーするかメモります。

https://ga-beacon.appspot.comのように外部URLを指定したくないという方は、自前でGAE上にインスタンスを建てることも可能です。

続いて、アクセス解析を行いたいページに以下のようなHTMLを追加します。ここに貼られた画像がいわゆるビーコンとしてアクセスを検知します。

<a href="http://your.site.com/page-name">
  <img src="https://ga-beacon.appspot.com/UA-XXXXX-X/your.site.com/page-name" />
</a>

もし、ビーコン画像を表示したくない場合は、img srcで指定したURLの最後に?pixelを付与しましょう。

実際のケースでは、これを全てのページに登録するのはとても骨の折れる作業です。 静的サイト作成ツールを利用している場合にはなんとか自動化しましょう。

middlemanのケース

middlemanmiddleman-blogと共に利用している場合は、source/_layouts/article.slimにて

= link_to current_article
  = image_tag "https://ga-beacon.appspot.com/UA-XXXXX-X/#{current_article.url}?pixel"

を適当なところに埋め込むと良いでしょう。(slimの例) デフォルトのテンプレートエンジンなら、以下の様な感じでしょうか。(違っていたらごめんなさい)

<% link_to current_article do %>
  <%= image_tag "https://ga-beacon.appspot.com/UA-XXXXX-X/#{current_article.url}?pixel" %>
<% end %>

hexoのケース

hexoを利用している場合は、themes/your-theme/layout/_partial/article.ejs内の適当な箇所に

<a href="<%- post.permalink %>">
  <img src="https://ga-beacon.appspot.com/UA-XXXXX-X/<%- post.path -%>?pixel" />
</a>

と追加すると良いかと思います。

まとめ

以上のような感じで、リアルタイムにアクセス解析が実現します。 素晴らしいですね。

© 2015 3100 - All code snippets on this site is licensed under a Creative Commons Attribution 3.0 Unported License.