投票ボタンの結果を計測する方法【Googleアナリティクス】

Googleアナリティクスで、投票ボタンの結果を計測する設定を行いましたので備忘録もかねて、ご紹介します。

まずは、結果からどうぞ。

計測結果

HTMLの記述

投票部分のHTMLの記述はこのようになっています。
ポイントは、投票ボタンのテキストにクラス名を付けて、js側で取得できるようにすることです。

</pre>
<div class="clear-fix" id="vote_area1" style="disply: block;">
この記事はいかがでしたか？

 <!-- ページ名取得 -->
 <!-- 投票ボタン1 -->
<div class="votebox votebox1"><a class="vote" title="" onclick="Vote('post-1402_vote1', 'cntClass1');" href="javascript:void(0);">
 <span class="cntClass1_text">(知)参考になった</span>
 <span class="cntClass cntClass1">1票</span>
 </a></div>
 <!-- 投票ボタン2 -->
<div class="votebox votebox2"><a class="vote" title="" onclick="Vote('post-1402_vote2', 'cntClass2');" href="javascript:void(0);">
 <span class="cntClass2_text">(笑)おもしろい</span>
 <span class="cntClass cntClass2">5票</span>
 </a></div>
 <!-- 投票ボタン3 -->
<div class="votebox votebox3"><a class="vote" title="" onclick="Vote('post-1402_vote3', 'cntClass3');" href="javascript:void(0);">
 <span class="cntClass3_text">(驚)びっくり</span>
 <span class="cntClass cntClass3">4票</span>
 </a></div>
 <!-- 投票ボタン4 -->
<div class="votebox votebox4"><a class="vote" title="" onclick="Vote('post-1402_vote4', 'cntClass4');" href="javascript:void(0);">
 <span class="cntClass4_text">(美)クール！</span>
 <span class="cntClass cntClass4">1票</span>
 </a></div>
</div>
<pre>
<!-- vote_area1 -->

javascript設定

javascriptにイベントトラッキングを埋め込みます。

• イベントカテゴリ：投票結果
• イベントアクション：投票
• イベントラベル：jsでHTMLよりテキストを取得＜例：(美)クール！＞
• イベント値：1

vote_text = document.getElementsByClassName(cls + "_text")[0].innerHTML;
_gaq.push(['_trackEvent','投票結果,'投票', vote_text, 1, false]);
※clsは、クリックした投票ボタンの番号が入ります。

<strong>上記のスクリプトは、標準Googleアナリティクスをお使いの場合です、ユニバーサルアナリティクスバージョンをお使いの場合は、_gaq.pushではなく、gaをお使いください。</strong>詳細はGoogleアナリティクスヘルプ参照。

コメント

ちなみに、Googleアナリティクスのカスタムレポートに登録しておくと、日付指定するだけでレポートを見れます。