maRkの

キャンペーンだとか、Chess.appについてのなにか

はてなブログで Google Analyticsのイベントトラッキングのメモ

Google Analytics設定後のイベント計測するやり方についてです。

Analytics設定については、過去に書いております。
はてなブログでGoogle Analytics 設定メモ

Google Analytics設定が済んだ上でイベントトラッキング設定をする必要があります。)

イベントトラッキングとは何ぞ?に関して、以下に使い方などが示されています。

これをおこなう前にですが、昔は設定したあとでレポートが1日くらい待たないと出てこないことがあったのですけれども、今はリアルタイムレポートにイベントの項目がつくようになリ、即座に自分で試したものが確認出来るようになっています。
そこで、可能ならば、Analyticsのプロパティに新しいビューを作って、自分からのアクセスを除外してあるものと、アクセス除外のないものとを切り分けできる状態にしておいてからおこなうことで、余分なアクセス統計が加算されるということがなくて便利かとおもいます。

リンクに_gaq.push(['_trackEvent', 'カテゴリ', 'アクション', 'ラベル', '値'])を追加していくのですが、特定の箇所のみならば、onclick属性を手動でつけていきます。jQueryなどを使って対象にイベントリスナーを登録していくという方法がしばしば行われています。

まずは、jQueryを使いますので以下を、デザイン設定のところでタイトル下に置きます。

<script>var $ = window.$ || function (cb) { setTimeout(function () { $(cb) }, 100) };</script>

参考:はてなブログで jQuery が(簡単に)使えなくなって困っている人は - 詩と創作・思索のひろば (Poetry, Writing and Contemplation)

以下のようなコードを、フッタに置きます。
対象のセレクターはa href=のものに(.on()の第2引数です)、 カテゴリーはLink、アクションはClick ということにしました。
値は、href属性の値にしてあります。

<script>
$(function(){
    $(document).on( 'click', 'a[href]', function () {
      _gaq.push([ '_trackEvent', 'Link', 'Click', this.getAttribute('href') ]);
    });
});
</script>

設定後に、「変更を保存する」で反映されるのを忘れずに。
適当にリンククリックしてリアルタイムレポートでみたものが以下になります。