Google Analyticsでユーザの操作を詳しく追跡する、一歩進んだアクセス解析

ユーザーがクリックした外部リンクの URL や回数、ボタンをクリックした回数、ポップアップの仮想ウィンドウが表示された回数や参照元などを知りたいときがあると思います。

こういうユーザの操作は、JavaScript などでトラッキングして自身のデータベースサーバなどに記録すればと思いがちですが、Google Analytics のイベントトラッキングを使えば、これらを簡単に記録して管理できます。

Google Analytics を使うメリット

データ管理の仕組みを自前で用意する必要がない
ページを構成する要素内からなら、どこからでも使える（主にJavaScriptやFlash）
Google Analytics が使え、JavaScript も使える環境なら、大体使える
結果は Analytics の管理画面でそのまま見れる（当然リアルタイムでも見れる）
集計したデータを何らかの用途に利用したいときには、Google Analytics API が使える

サンプルコード

※これから紹介する JavaScript のサンプルコードは、「ユニバーサルアナリティクス」を使っています。古い Analytics のトラッキングコードを使っている場合は、新しいトラッキングコードに移行してください。

ユニバーサルアナリティクスというのは、analytics.js を使っている以下のようなトラッキングコードです。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxxx', 'auto');
  ga('send', 'pageview');
</script>

Google Analytics にイベントを記録するには

Analytics のトラッキングコードが実行された後では、ga という関数が使えるようになっています。
イベントを記録するのに必要なことは、以下の JavaScript コードを実行するだけです。

ga(
     'send',
     'event',
     'Catetory',
     'Action',
     'Label',
     Value,
     {'nonInteraction': 1}
);

send（コマンド）と event（ヒットタイプ）は固定です。
記録する情報は、これ以降の要素で指定します。
Catetory, Action は必須項目、Label, Value は必要に応じて指定します。

最後の8行目はオプションを指定する要素ですが、イベントトラッキングを送信すると直帰率に影響を与えてしまうので、{‘nonInteraction’: 1} を指定することで無効にしています。（これを指定しないと、サイトからの離脱扱いになる）

Category, Action, Label, Value に指定する情報は、文字列型か数値型かの型が決められているだけで、内容は自由に決めることが出来ます。

Action

文字列型、イベントについての詳細。たとえば「click」や「show」など。
document.referrer などを入れてリファラ等をいれるのもよいでしょう。

Label

文字列型、必須ではありませんが、より詳しく分類するのに。

Value

数値型（正数値）、カウント値などを渡すときに。（Analytics の管理画面では合計値が表示されます）イベントの発生回数をカウントしたいだけのときは、指定する必要はないと思います。（指定しなくてもカウントされるので）
変則的な値を集計するとき、例えばゲームなどでユーザーが消費したゴールドを集計したいときなどに使うといいかもしれません。

ユーザーがクリックした外部リンクのURLを追跡する

インライン版

外部リンクのアンカータグに onclick 属性として埋め込みます。

onclick="ga('send','event','jump','click','[外部リンクURL]',{'nonInteraction':1});"

jQuery版

こちらの方がHTMLを汚染しないし、スマートですね。

$("a").click(function(){
     // アンカーのリンク先を取る
     var url = $(this).attr("href");
     // GA送信
     ga(
          'send', 'event',
          'jump',
          'click',
          url,
          {'nonInteraction': 1}
     );
});

Google Analytics と通信するときに SSL を利用する

記録する内容によっては、プライバシーが気になることもあるでしょう。
次のように「forceSSL」を「true」に設定することで、以降の操作は全て SSL 通信で行われます。
（Analytics のデフォルトに設定しておいてもよいかも）

ga('create', 'UAXXXXX', 'auto');
ga('set', 'forceSSL', true);
ga('send', 'pageview');

記録した結果を見る

さて、設定したコードで、イベントがちゃんと記録されているか見てみましょう。

Google Analytics の管理画面では、「イベント」の項目で参照できます。
「リアルタイム」 > 「イベント」セクションでは、イベントが分単位・秒単位で発生している様子を見ることができます。

また「行動」>「イベント」セクションでは、現在までの集計状況を、日毎・月毎など、より詳細に分析できます。

　
「イベント」トラッキングという名称ではありますが、click や mouseover といった規定のイベントに制限されるわけではないので、いつでも好きなタイミングで記録できるのが良いところです。そのため、使い方は非常に多岐に渡るでしょう。

自身のサイトを訪れる人はどういうサイトに興味をもっているのか、便利だと思って用意した新機能（ボタン等）はちゃんと使われているのか等、様々なユーザーの操作や動向を知りたい時に、使ってみてください。

参考：Google Analytics ドキュメント「イベントトラッキング - ウェブトラッキング（analytics.js）」

ku:neko ism