Google analyticsをローカル環境でテストするのにオススメの設定

この記事は12月1日から24日までの間、僕が気を向いたときにブログを書く高橋文樹オレベントカレンダー2013の10日目です。

さて、Google Analyticsを使っている人は多いと思うのですが、中にはイベントトラッキングなどの高度な機能を使っている人もいるかと思います。たとえば、このサイトでは読了イベントとしてreadというカテゴリを利用しております。

// 読了イベントを計測
// displayedはスクロールした要素が表示されるときに
// 発火されるオリジナルイベント。
// 普通は何も起きません。

$('#contents-last').bind('displayed', function(e, vars){
    try{
        ga('send', {
            hitType: 'event',
            eventCategory: 'read',
            eventAction: document.location.pathname,
            eventLabel: document.title,
            eventValue: vars.passed
        });
    }catch(e){}
}); 

記事ページの最後に見えない要素を仕込んでおいて、それが画面に入ったら記事を読了したとみなしています。vars.passedはページを開いてから経過した秒数ですね。

こういうことをやっておくとなにがわかるかというと…

• tech系の記事（ソースコードサンプルなんかが載っているページ）はものすごく長い時間読まれる。
• 意外とみんな最後まで読まない。Analyticsの直帰率より低い印象。

などがわかります。このサイトではやっていませんが、縦横1pxの要素を記事本文の真ん中あたりに仕込むようにすれば、「どのあたりまで記事が読まれるか」という情報が取れますね。

みなさん自分のサイトの改善案に色んな仮説をお持ちだと思うので、あとはそれにあったイベントを仕込めばよいというわけです。

Google Analyticsのローカルでの検証

さて、サイトを運営していて、なんらかのイベントをGoogle Analyticsに登録したいなーとなったとします。で、どうやらできたっぽいんだが本当に動くのかどうかわからんという状況でテストをしたくなります。

開発環境とかステージングサーバとかあればそれでもいいのかもしれませんが、いちいちアップロードするのが面倒なので、ローカルで確認したくなるのが人情というもの。

そこでこの方法です。

一応、Google Analyticsのドキュメント（ユニバーサルアナリティクス用）にはTesting on localhost という項目があるので、できるっちゃできるっぽいんですが、その他諸々便利な点もあるので、この方法を試してみてください。

1. ホストを設定する

ローカルで開発している人は、HTMLオンリーの人ならファイルパスでやっていたり、MampなりXamppなりを使っている人なら http://locahost/test みたいな環境でやっているかと思われます。

が、ここではあえてちゃんとしたFQDNを設定したローカル環境を構築します。

たとえば、このサイトは https://takahashifumiki.com ですが、ローカルは http://takahashifumiki.info で運用するとしましょう。.netとか.bizとか、いまではちょっとダサくなってしまったトップレベルドメインがおすすめです。

まず、takahashifumiki.infoとなった場合、自分のパソコンを指さなければいけないので、hostの設定をしましょう。

• Mac /etc/hosts
• Windows C:/Windows/System32/drivers/etc/hosts

上のファイルにこんな記載をします。

127.0.0.1     takahashifumiki.info

これでブラウザにて http://takahashifumiki.info と入力すると、ローカルホストに行くと思われます。Xamppなら、「It works!」とか表示されるんじゃないでしょうか。

2. バーチャルホストを設定する

あとはWebサーバ（大体はXampp同梱のApacheだと思います）の設定を変更します。これはツールによって異なるのですが、だいたいこんな感じ。詳しくは「Xampp virtualhost 設定」とかでググってください。

<VirtualHost *:80>
     ServerName takahashifumiki.info
     DocumentRoot /path/to/document/root
     <Directory "/path/to/document/root">
         Order deny,allow
         Allow from all
         Options FollowSymLinks 
     </Directory>
</VirtualHost> 

/path/to/document/root は適宜読み替えてくださいね。

これで http://takahahisfumiki.info にブラウザでアクセスすると、 /path/to/document/root にあるページが表示されるはずです。

3. Google analyticsでビューを作成する

さて、あとはAnalyticsのトラッキングコードを仕込むだけなのですが、ポイントはビューを作成することです。

ビューは以前「プロファイル」と呼ばれていましたが、要するに同じトラッキングコードで複数の計測パターンを可能にするためのものです。

ビューのデフォルトは「すべてのWebサイトのデータ」とかになっていると思いますが、以下の項目を変えましょう。

ビュー名

高橋文樹ローカル環境など、わかりやすい名前に

WebサイトのURL

http://takahashifumiki.info など、上で設定したFQDN

あとは適当でオッケーです。

4. トラッキングコードをちょっと変える

これは必要なのかどうかよくわからないのですが、一応やってみてください。

ユニバーサルアナリティクスのコードの一部をこんな風に変更します。

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'example.com'});
//↓こうする
ga('create', 'UA-XXXX-Y', {
     cookieDomain: window.location.hostname
}); 

リアルタイムですぐに試せる

さて、ここまで設定すると、Google Analyticsの「リアルタイム」リポートですぐに試すことができます。

イベントがちゃんと発生しているかとか、そういうのはこれでわかりますね。

おまけ：FQDNでやるメリット

さて、「こんなめんどくせー設定やりたくねーよ、localhostでいいじゃん」という方もいるかもしれません。そのご意見はごもっともなんですが、こうやって一々まともなFQDNを設定することには次のようなメリットがあります。

• Google Analyticsに限らず、Facebook、TwitterなどのAPIを利用する場合サイトの登録を求められるケースがあり、その際にlocalhostを登録できないことがある。Webfontなどのサービスを利用する場合も同様。

あれ、一個しかない……。もっとあると思ったんですがね。なんですかね。どこいっちゃったんでしょう。