関連記事
そのページを分析する
エンドユーザーの行動解析をする場合、どのページからどのページに遷移したかというページ遷移による行動解析が常套手段となりますが、それ以上に１つ１つのページについてのレイアウト、どこにどんなコンテンツを配置するか、そのパーツ単位のアクション率を分析することがとても重要です。
今回は、１つのページに対し、パーツ単位にアクション数を簡単に計測する方法を記載します。
ページ構成
次のようなページ構成を例に話を進めます。
ページを構成する各パーツは次のとおりです。
・グローバルヘッダー（div id = "g_header"）
・左サイドカラム１（div id = "left_col1"）
・左サイドカラム２（div id = "left_col2"）
・メインカラム１（div id = "main_col1"）
・メインカラム２（div id = "main_col2"）
・メインカラム３（div id = "main_col3"）
・右サイドカラム１（div id = "right_col1"）
・グローバルフッター（div id = "g_footer"）
これらの枠内に配置されたコンテンツのクリックされた回数をイベント計測するには次のようなトラッキングコードを設置すればよいです。ここではjQueryを利用しています。
イベントトラッキングコード例
<!-- jQueryバージョン1.x.yの最新版をロード -->
<script type="text/javascript"><!--
google.load("jquery", "1");
// --></script>
<!-- ページビュー（標準の）トラッキングコード -->
<script type="text/javascript"><!--
(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-55064898-1', 'auto');
ga('send', 'pageview');
// --></script>
<!-- イベントトラッキングコード -->
<script type="text/javascript"><!--
$(document).ready(function(){
// グローバルヘッダーのアクション計測
$("a[href]", "#g_header").click(function(){
ga('send', 'event', 'グローバルヘッダーClick', decodeURI(this.href), this.innerText);
});
// 左サイドカラム１のアクション計測
$("a[href]", "#left_col1").click(function(){
ga('send', 'event', '左サイドカラム１Click', decodeURI(this.href), this.innerText);
});
// 左サイドカラム２のアクション計測
$("a[href]", "#left_col2").click(function(){
ga('send', 'event', '左サイドカラム２Click', decodeURI(this.href), this.innerText);
});
// メインカラム１のアクション計測
$("a[href]", "#main_col1").click(function(){
ga('send', 'event', 'メインカラム１Click', decodeURI(this.href), this.innerText);
});
// メインカラム２のアクション計測
$("a[href]", "#main_col2").click(function(){
ga('send', 'event', 'メインカラム２Click', decodeURI(this.href), this.innerText);
});
// メインカラム３のアクション計測
$("a[href]", "#main_col3").click(function(){
ga('send', 'event', 'メインカラム３Click', decodeURI(this.href), this.innerText);
});
// 右サイドカラム１のアクション計測
$("a[href]", "#right_col1").click(function(){
ga('send', 'event', '右サイドカラム１Click', decodeURI(this.href), this.innerText);
});
// グローバルフッターのアクション計測
$("a[href]", "#g_footer").click(function(){
ga('send', 'event', 'グローバルフッターClick', decodeURI(this.href), this.innerText);
});
});
// --></script>
イベントトラッキングの構文
-- 標準構文ga('send', 'event', 'イベントカテゴリ名', 'イベントアクション名');
-- 標準構文＋イベントラベルによる分類
ga('send', 'event', 'イベントカテゴリ名', 'イベントアクション名', 'イベントラベル名');
-- 標準構文＋イベントラベル＋数値カウント
ga('send', 'event', 'イベントカテゴリ名', 'イベントアクション名', 'イベントラベル名', 数値);
つまり、使いたいように自由に使ってよいということですね。
今回の例では、クリックした数を集計したいので特に数値指定は不要でした。
アナリティクス画面での見え方
次のような形で計測されればうまくいっています。
