先日、hexoというNode.js製静的サイト作成ツールを用いてNpm Insideというブログを新たに始めました。
ついでに、遅ればせながらきちんとアクセス解析もしようと思い立ちました。
このブログはmiddlemanで作っていますが、こちらも特に解析をしていませんでした。
早速調べたところ、ga-beaconというライブラリが良さそうだったので導入してみました。
ga-beaconとは
ga-beaconはMITライセンスで公開されているツールで、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のケース
middlemanをmiddleman-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>
と追加すると良いかと思います。
まとめ
以上のような感じで、リアルタイムにアクセス解析が実現します。 素晴らしいですね。