意外と認知度が低い感じですが、Google Analyticsがそろそろ新しくなりますよ！
現在パブリックベータとして提供されているUniversal Analyticsが 予定では 7月中 に正式リリースになります。つまり今月！
世の中見渡していると非エンジニアなウェブマスター向けの紹介記事が多い印象なので、ここではJavaScriptのインタフェースがどう変わったか、それを使ってエンジニアはどういうことができるようになるか、みたいな、よりエンジニア向けの話題を中心に書いてみたいと思います。
ソースは公式ドキュメントなので、より詳しく知りたい方はそちらを参照してください。
簡単なまとめ
Universal Analytics(analytics.js)は...
- これまでのやつ(ga.js)よりJavaScriptのインタフェースがイケてる
- APIは存在するけどWebインタフェースが未実装の機能がまだまだ多い
- ソーシャルボタンの効果測定とか、クライアント上でのエラー情報の集積とかする専用の機能がある
- 古いデータを引き継ぐ機能は未実装だがその内提供される
この記事を読むと分かること
- これまでのやつ(ga.js)と比べて新しいやつ(analytics.js)がどう変わったか
- Universal Analyticsの新機能で 個人的に 気になってるもの
この記事を読んでも分からないこと
- iOSやAndroid向けSDKの話
- Universal Analyticsの新機能で 個人的に 気になってないもの
- いつUniversal Analyticsが公開されるか（僕が教えて欲しい）
ところで…
Qiitaに投稿した自分の記事にはGoogle Analytics埋め込めるようになりました。
送られてくるのはページビューだけですが、これ設定すると自分の記事がどれくらい読まれているか、とか、Twitterやはてブでどれくらい共有されてるか、とかが分かって楽しいです。
あと大雑把にQiitaを利用している人の情報が分かるので「Chromeユーザ多すぎワロス」とか（なんとなく）分かって楽しいです。
以上お知らせでした
Universal Analyticsとは何か
これまでのGoogle Analytics(以下ga.js)では端末をまたいでユーザを識別することができませんでした。
例えば、同じアカウントでログインしているにも関わらず、会社PC、自宅PC、携帯でそれぞれアクセスしたら3人の別の人がアクセスしたと判断してました。
1番の違いは、この点に関して、同じアカウントなら同じ人として扱えるようになる点だろうと思います。
加えて、ga.jsは（PC向け）Webアプリケーション向け機能が多いですが、Universal Analyticsはモバイルサイト向けの機能の充実や、iOSとAndroid向けのSDKが提供されるなど、よりモバイル向けに機能が強化されているのも大きな違いです。
というわけで様々な環境からのアクセスを解析できるから Universal Analytics なわけですね。
読み込むJavaScriptが変わってインタフェースが変わった
今までは ga.js ってやつでしたが、今度からは analytics.js になります。名前なんてどうでもいいんですが、インタフェース的に結構変わってます。
以前のga.jsはなかなか酷くて、ページビューを送信する場合次のように書きました。
_gaq.push(['_setAccount', 'UA-XXXX-Y']);
_gaq.push(['_trackPageview']);
グローバルに露出している _gaq という名前はいいとしても、なんで _setAccount とか _trackPageview みたいな内部APIが _ で始まるんだよ、とか push ってなんだよ直感的じゃねーな、とか色々思うところがあります。
特に酷いのが送信後に何かをしたい場合で、例えばユーザがformにsubmitした、というイベントをga.jsでトラッキングしようとすると、イベント通知をGoogleに終えてからsubmitイベントを実行しないといけませんが、それを実現するには次のように書きます。
_gaq.push(['_trackEvent', 'form', 'submit']);
_gaq.push(function () {
// _trackEventが終わったあとに実行される関数
});
非同期処理といえばコールバック関数、もしくはDeferredインタフェースを使うのがJavaScript的にはよくある方法なんじゃないでしょうかね。サーバサイドではキューの方が一般的かも知れないけど。(ga.jsでも hitCallback が使えるという情報がありますが、公式ドキュメントでは上記の方法しか紹介されていませんでした。）
それが analytics.js では下記のように変更されます。だいぶ分かりやすくなった気がします。
ga('create', 'UA-XXXX-Y');
ga('send', 'pageview');
ga('send', 'event', 'form', 'submit', { hitCallback: function () {
// イベント送信が終わったら実行されるコールバック
});
まず断っておきたいのは、グローバル関数である ga はデフォルト名で、問題がある場合は変更できます。あと、イベント完了後に何かをするにもコールバックを使うようになってます。
端末をまたいでログインユーザを追跡する
clientId というのがあって、おそらく、これを使います。
ga('create', 'UA-XXXX-Y', { clientId: 'ログインユーザID' });
何も指定しないとanalytics.jsが何か適当に埋めます。これをログインしているユーザのIDとかにすれば、端末が変わっても、ログインしていれば同じ値になるので、同じユーザとして追跡できることになります。
Hitとは何か
Hitってのは
ga('send', 'pageview');
でいうところの pageview の部分のことで、pageview event 以外に appview transaction item social exception timing があります。というか、これら以外は指定できないので注意。
それぞれ意味が違うので、目的に合わせて利用します。それぞれ引数が若干違うので、使う場合は公式ドキュメントを確認してください。
ここでは social と exception について取り上げようと思います。
ソーシャルボタンの効果測定
social hitは、ページにTweetボタンとかLikeボタンとか置く場合が増えていると思いますが、それらが実際どれくらい押されているのかをトラッキングする専用のイベントです。
もちろん event を使ってもいいんですが、こっちを使っておくと何かとよしなにやってくれそうです。
現時点では専用のページがあって、通常のイベントとは区別して見れるというだけなんですが、今後もっと色々と面白いことができるようになっていくんじゃないかと期待しています。
Tweetボタンをトラッキングする
Tweetボタンをクリックされたり、実際にツイートされた回数を計測する方法です。詳しくは Twitterのドキュメントを参照してください。
twttr.ready(function (twttr) {
twttr.events.bind('click', function (e) {
ga('send', 'social', 'twitter', 'click', 'http://example.com');
});
twttr.events.bind('tweet', function (e) {
ga('send', 'social', 'twitter', 'tweet', 'http://example.com');
});
});
FacebookのLikeボタンをトラッキングする方法は、上でリンクを貼った公式ドキュメントに書いてあるので、それを参考にしてください。
はてブボタンには、LikeボタンやTweetボタンのようにユーザの行動をフックするAPIが用意されていないので、トラッキングできないです。
あと、当たり前ですが、これで分かるのはページに埋め込まれているボタンを経由して行動をした場合のみです。
ブラウザ上でのエラーの計測
サーバ上で起こるエラーは把握できますが（ログがサーバに残るので）、ブラウザでJavaScriptがエラーをおこしたとしても、それを開発者が知ることは基本的にできません。
規模が大きな会社ではエラーが起きたら、その情報を自分のサーバに送ってあとで見れるようにしたりしているのかも知れませんが、そんなことにリソースを割く余裕は無い、というところも多いはず。
exception hitは恐らくこういう用途で使うためのものです。恐らく、と言っているのは、現時点ではまだWebインタフェースが存在していなくて、データを送っても何も見れない状態だからです。
あと1つだけ注意があって、 exception で送れるデータが150Bまでなので、スタックトレースを全部送る、みたいなことはできそうにないです。
Custom Dimensions & Metrics とは何か
ga.jsにはCustom Variablesというのがあって、これを使うと独自に定義した属性みたいなのをユーザに付与することができますが、それをもうちょっと便利にしたものです。
Dimentionsは文字列でmetricsは数値になります。DimensionsもMetricsも20個までしか作れないし、一回作ったら削除できないので注意が必要。
Mixpanelみたいにとりあえず送りつけたらその場でトラッキング開始してくれる、みたいな感じじゃなくて、事前にこちら側で、Custom Dimensionsの1番目はログインしてるかどうかを表します、というのを設定しておかなければならないのがちょっと面倒。（ga.jsのCustom Variablesもそんな感じでしたね）
設定ページにいくとスコープをどうするか聞かれます。スコープというのはその情報が、毎回異なるのか、セッション毎に異なるのか、ユーザに対して不変なのか（例えば性別は基本的に変わらないはず）で決まります。詳しくは Custom Dimensions & Metrics - Feature Reference - Google Analytics — Google Developers に書いてあります。
簡単な話が、例えば「ログインしてるかしてないか」を1つのdimentionにして、アクセスユーザに対して適切に設定してやれば、おそらく、簡単にアクセス全体に対するログインユーザの割合が分かったり、ログインユーザと非ログインユーザの行動の違いとかを簡単に比較できたりするんだと思います。
おそらく、とここで言っているのは、これまたドキュメントにはあるけどWebインタフェースからアクセスできない状態だからです。Universal Analyticsを有効にしていてもWebインタフェースにはga.js用のCustom Variablesが表示されます。ひどい
使ってみる
Webインタフェースはないんだけどデータを送るだけなら既にできます。
ga('create', 'UA-XXXX-Y');
ga('set', 'dimension1', '<%= logged_in? %>');
ga('send', 'pageview');
仮にdimensionの1番目をログインしているかどうかに設定しているとすると、上記のようにしておけば、各ページビューがログインユーザによるものか、それとも非ログインユーザによるものかが判別できるようになります。
ga.jsからanalytics.jsへの移行
いまはまだデータを移行することはできません。Googleによればそのうち提供するらしいです。
なのですでにga.jsを使っている人は現状このままga.jsを使い続けて、移行する機能が提供された段階でanalytics.jsに移るというのがよさそう。
ちなみにga.jsとanalytics.jsが混在しても問題無い（とGoogleが明言している）ので、とりあえずUniversal Analyticsを導入しておく、というのもOKです。
合わせて読みたい
-
GoogleAnalytics - Google Analyticsの利用時に注意すること - Qiita [キータ]
Google Analyticsの利用規約で気をつけるべき点についての解説記事
-
GoogleAnalyticsを使ったメールマガジン等からのトラフィック分析 - Qiita [キータ]
キャンペーン機能の使い方。キャンペーン機能はga.jsとanalytics.jsのどちらでも利用できます。（違いがあるかまでは見てないです）
-
2012年Google Analyticsサミット報告｜コラム アユダンテ株式会社
昨年末に行われたGoogle Analyticsサミットでのお話。今回紹介しなかったUniversal Analyticsの新機能について網羅的に紹介されています。