例えば
<a href=”/page01/”>ページ1</a>
<a href=”/page02/”>ページ2</a>
<a href=”/page02/”>ページ2</a>
こんなリスト一覧で、クリックをGAのイベントトラッキングで計測したい場合。
<a href=”/page01/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page01’);”>ページ1</a>
<a href=”/page02/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02’);”>ページ2</a>
<a href=”/page02/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02’);”>ページ2</a>
こうすれば、とりあえず計測はできるはず。
ただし、ページが増えた時に
<a href=”/page01/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page01’);”>ページ1</a>
<a href=”/page02/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02’);”>ページ2</a>
<a href=”/page03/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02‘);”>ページ3</a>
<a href=”/page02/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02’);”>ページ2</a>
<a href=”/page03/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02‘);”>ページ3</a>
一行コピペして直す場所が何箇所もあり、ミスが発生しやすくなる。
リンク先はクリックすればミスが見つかるし、リンク文字も目で見てわかる。
しかしイベントトラッキングのjsタグは、ミスが見つかりにくい。
この例は、まさにリンク先とリンク文字はコピペの後に修正したけど、イベントトラッキングを直すのを忘れた状態。
「ページ03」のリンクをクリックすると、正常にpage03へ遷移するが、イベントトラッキングのアクションにはpage02として計測されてしまう。
こういう時は、リンクとイベントトラッキングのラベルをjavascriptで一括操作すると良い。
htmlで
<a href=”javascript:void(0)” onClick=”ga_link(‘page01’);”>ページ1</a>
<a href=”javascript:void(0)” onClick=”ga_link(‘page02’);”>ページ2</a>
<a href=”javascript:void(0)” onClick=”ga_link(‘page02’);”>ページ2</a>
のように書いておき、javascriptで
<script>
function ga_link(link_url){
ga(‘send’, ‘event’, ‘category’, ‘action’, ‘link_’+link_url);
location.href = link_url;
}
</script>
function ga_link(link_url){
ga(‘send’, ‘event’, ‘category’, ‘action’, ‘link_’+link_url);
location.href = link_url;
}
</script>
のように書いておけば、ga_link(引数)の引数をイベントトラッキングで計測して、さらに引数のurlにリンクすることになる。
上の例では、イベントトラッキングでは
カテゴリ：category
アクション：action
ラベル：link_page01
のように計測される。