Google Analyticsでページ内のクリックイベントをカウント（集計）してみよう

Google Analyticsを使ってみよう で提示したトラッキングコードが埋め込まれているという前提で、
以下のように a タグ の クリック時に記述するだけです。

<a href="#" onClick="javascript:_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a>

上記の記述で、実際にJavaScriptとして実行される関数は、_trackEvent で、_trackEventのパラメータは、以下のようなイメージです。

_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

各パラメータの意味は、以下のとおりです。

• category :
  

  イベントを収集するカテゴリ名を指定します。例）Videos の品名など

• action :
  

  イベントを収集するアクション名を指定します。カテゴリ名とペアでユニークな情報となります。例）Play のクリックイベント時の動作など

• opt_label :
  

  イベントを収集するオプション名を指定します。付加情報になります。例）Baby's First Birthday のタイトル名など

• opt_value :
  

  イベントを収集するオプション値（整数値）を指定します。例）300 秒数など

• opt_noninteraction :
  

  この値を true に設定すると、このイベントが 直帰率の計算に使用されません。例）true

先の例は、単純なクリックイベントでした。
以下の例は、外部リンクへのクリックイベントです。

<a href="http://www.exmaple.com/samle.html" onClick="javascript:_gaq.push(['_trackEvent', 'ExternalLink', document.URL, this.href]);">こちらの記事は参考になります。</a>

• category : 'ExternalLink' (外部リンクという意味)
• action : document.URL (現在ページのURL)
• opt_label : this.href (リンク先URL)

先のコードを埋め込んで、自分でクリックし、 しばらく後に Google Analytics で以下の手順で確認してみてください。

1. Google Analytics ログイン後、メニューバー（上部）の レポート ボタンをクリックします。
2. メニューバー（左部）の コンテンツ をクリックします。
3. さらに、メニューバー（左部）の コンテンツ メニュー内の イベント - サマリー をクリックします。

上記のように クリックされていてば グラフが表記されるはずです。

そもそも、2009年末までは、Google Analyticsでは、以下のような同期トラッキングコードを提供していました。

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXXX-YY");
pageTracker._trackPageview();
} catch(err) {}</script>

上記は、いわゆる同期トラッキングコードの例です。

このコードも 最新の非同期トラッキングコードと同じように、'UA-XXXXXXX-YY' に自身のトラッキングIDを設定し、データを採取したいページに埋め込めばOKです。

ただし、上記のコードでは、動作的には、サーバー : google-analytics.com へアクセスし、ページへの訪問者としてカウントアップ処理を終えるまで、処理が戻ってきません。

Google Analyticsを使ってみよう で示したコードが、最新の非同期トラッキングコードです。

<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-YY']);
  _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>

上記は、いわゆる非同期トラッキングコードの例です。

2009年末以降は、Google Analyticsでは、すべてこの非同期のコードに切り替わっています。
もちろん、先の同期トラッキングコードは、今でも利用できますし、ちゃんと動作します。

これらの 同期、非同期の違いですが、

詳しくは、
google サイトから ga.js ファイルを読み込むタイミングの違いです。

同期トラッキングコードでは、先のスクリプトコードを記述している箇所が読み込まれるタイミングでgoogle サイトから ga.js ファイルを読み込みます。
非同期トラッキングコードでは、先のスクリプトコードを記述している箇所に関係なく、ほぼページの読み込みの最後に google サイトから ga.js ファイルを読み込みます。

このような動作の違いのため、同期トラッキングコード を設置する場所は、bodyタグ終了の直前が良いとされていました。

これは、もしページの先頭に設置されていれば、ページ表示が ga.js ファイルを読み込むまで実行されないので、ユーザは表示待ち状態が長くなる可能性があるためです。

しかし、非同期トラッキングコードでは、これらの問題を回避する一つの方法を提供してくれています。

このコードの中では、先の問題となった ga.js ファイルを読み込み処理に DOM を使用しているので、ほぼ、最後で実行されるはずで、 さらにHTML5に対応しているブラウザには、ga.async = true で非同期を明示しています。

非同期によるクリックイベントをカウント方法は、上記で解説しました。
一応、同期トラッキングコード でのクリックイベントをカウント（集計）の方法を簡単に以下に記載しておきます。

<a href="#" onClick="javascript:pageTracker._trackEvent('Videos', 'Play', 'Baby\'s First Birthday');">Play</a>