Google Analytics を利用して、ページ表示と操作イベントを記録するまでの方法の要約。
出典
利用方法
つぎのコード断片
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
を head タグ内に書く。 または外部 JavaScript ファイルを用意して読み込む。
コード中の UA-XXXXX-X は、取得した自分の ID と置き換える。
このスクリプトが実行されると Google Analytics のスクリプト ga.js が読み込まれる。
ga.js はいつ読み込まれてもいいので、 (function() { ... })(); のところは body タグの最後とかに書いても良い。
_gaq オブジェクト
Google Analytics への命令は非同期実行できる。_gaq グローバルオブジェクトはそのためのキューとして ga.js が利用する。
_gaq.push() メソッドで配列を渡すことで、実行キューに入る。配列は、最初の要素がメソッド名で、それ以降がメソッドの引数となる。
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
は次の
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();
と同等となる。こちらは同期的に実行される。
※ 昔の Analytics API では _gat がトラッカーのためのグローバルオブジェクトだった。
関数を渡すこともできる
_gaq.push(function() {
var pageTracker = _gat._getTracker('UA-XXXXX-X');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
可変長引数をとるので、複数の命令も一度に追加できる。
_gaq.push(
['_setAccount', 'UA-XXXXX-X'],
['_setDomainName', 'example.com'],
['_setCustomVar', 1, 'Section', 'Life & Style', 3],
['_trackPageview']
);
ga.js が読み込まれていないときの _gaq はただの配列として変数定義されているだけなので、追加しても命令が溜まり続けるだけである。ga.js の読み込みが完了されれば順番に実行される。
ページ表示の記録
ページ表示したことの記録は _trackPageview() メソッドを利用する。
_gaq.push(['_trackPageview', path]);
path は任意で、無指定では現在ページのパス（ドメインルートが /）で記録される。
仮想の URL でも良い。たとえば同じ URL でもログイン時と非ログイン時で表示が異なる会員サイトや、遷移なしでページを丸まる書き換えるサイトなどでは明示指定することで読み込んだページを記録できる。
またスラッシュ / は、サイトの階層を表すための区切り文字として利用している。
path を / で開始することで、階層ごとに解析レポートを見ることができる。
イベントの記録
表示されたページの操作をイベントと呼び、その記録は _trackEvent() メソッドを利用する。
_gaq.push(['_trackEvent', category, action, label, value, noninteraction]);
5つの引数のうち category と action は必須。あとは任意。型は value が数値。noninteraction は bool 値。ほかは文字列。
記録したイベントは、Google Analytics レポートの Content -> Events （日本語表記だと コンテンツ -> イベント）で見ることができる。
クリックイベントを記録するための、インライン記述例：
<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a>
実際は jQuery などを利用して記述することになる。
$(document).on('click.event-tracking', '.player input', function () {
var $input = $(this),
$player = $input.closest('.player'),
category = $player.attr('title'),
action = $input.attr('title'),
label = $player.find('title').text();
_gaq.push(['_trackEvent', category, action, label]);
});
カテゴリ
操作の分類名。視覚的な領域で分けることになる。たとえばフォームごとや、ヘッダー、フッターなどで識別すると良さそう。
同じログインボタンクリックでも、複数のUIビューがあるとき、カテゴリを隔ててアクション名をあてると、どこからイベントが生じたかを識別できる。
_gaq.push(['_trackEvent', 'ヘッダー', 'ログイン']);
_gaq.push(['_trackEvent', '導入', 'ログイン']);
_gaq.push(['_trackEvent', 'フッター', 'ログイン']);
アクション
操作で生じる処理の名前。うかつに「クリック」とすると、解析レポートにも「クリック」としか表示されない。
「再生」「開く」「〇〇で並びかえ」など意味のある名前にするとよい。
ビューワーへのイベントトラッキングをしたいときは、カテゴリを一定にして、ボタン名をアクションとする。
_gaq.push(['_trackEvent', 'Viewer', '次へ']);
_gaq.push(['_trackEvent', 'Viewer', '前へ']);
_gaq.push(['_trackEvent', 'Viewer', '閉じる']);
ラベル
処理が与える対象の表題。ビューワーで表示される画像の名前や、ダウンロードリンクをクリックしたときのファイル名など。
_gaq.push(['_trackEvent', 'チュートリアル', '次へ', '始めに']);
_gaq.push(['_trackEvent', 'チュートリアル', '次へ', '最初のステップ']);
_gaq.push(['_trackEvent', 'チュートリアル', '次へ', 'さらに高度なステップ']);
1 ページにいくつも同じカテゴリのものがあるときの識別子としても利用できる。
値
操作に、なにか数値的価値があるときの、その値。
なにかの操作と操作の間にかかった時間など。正の整数のみに対応している。
_gaq.push(['_trackEvent', 'スライドショー', '次へ', 'ページ1', page_1_end_time - startTime]);
_gaq.push(['_trackEvent', 'スライドショー', '次へ', 'ページ2', page_2_end_time - page_1_end_time]);
_gaq.push(['_trackEvent', 'スライドショー', '次へ', 'ページ3', page_3_end_time - page_2_end_time]);
解析レポートでは合計と平均を見ることができる。
非作用イベント
操作から生じたわけではないが、なんらかの現象を記録をしたいときのイベント。noninteraction に true を与える。
たとえば、Flash を埋め込んでいて読み込み完了までにかかった時間など。
制限
記録できるイベント数は1つのセッションにつき約500回までとされている。
マウスの位置を逐一記録とか、一定時間の経過ごとにイベントをトラッキングするとか、そういうのはできない。
改訂履歴
2012-11-14 初版
2012-11-15 例を追加。誤字と記述順などを修正。
2012-11-20 アクションとカテゴリの説明が逆のような気がしたので修正。