WordPress で Google アナリティクスのイベントトラッキングを実装する方法

WordPress で Google アナリティクスのイベントトラッキングを実装する方法を紹介します。
例えば、ページ内リンクのクリック数などをカウントしたいときに便利な方法です。

  1. Google アナリティクスのイベントトラッキングとは?
  2. WordPress でイベントトラッキングを実装する方法
    1. Google アナリティクスのイベントトラッキングとは?
    2. Google アナリティクスのイベントトラッキングとは?
  3. jQuery で実装する方法

Google アナリティクスのイベントトラッキングとは?

イベントトラッキングとは、サイト内でユーザーがどういった行動をとったかを計測できる機能です。
例えば、特定のページでページ内リンクボタンがどれだけ押されたか。
ページをどれだけスクロールしたかなど、応用次第では色々なイベントを計測することができます。

WordPress でイベントトラッキングを実装する方法

WordPress で実装する場合、値の型に関数を指定することで、テンプレートに記述した場合でも動的にその値を計測することができます。
例えば、次のコードはリンク先URLを値として計測する方法です。

analytics.js の場合

analytics.js の場合の記述はこちら。

<a href="<?php the_permalink(); ?>" onClick="ga('send', 'event', 'inlink', 'click', '<?php the_permalink(); ?>');">リンク</a>

計測した値はアナリティクスの管理画面から、行動のイベントで確認することができます。値の反映には数日かかる場合があります。動作の確認をしたい場合は、リアルタイム計測で確認しましょう。

イベントトラッキングコードの基本的な指定は次の通りです。

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

値のイベントフィールドは次の通りです。

eventCategory
値の型:テキスト
イベントのカテゴリーを指定します。(例:inlink,outlink)
*必須項目
eventAction
値の型:テキスト
イベントの種類(例:click)
*必須項目
eventLabel
値の型:テキスト
イベントの分類に使用します(例:banner)
eventValue
値の型:整数
イベントに関連する数値を指定できます(例:4649)

gtag.js の場合

gtag.js の場合の記述はこちら。

<a href="<?php the_permalink(); ?>" onClick="gtag('event', 'click', {'event_category': 'inlink', 'event_label': '<?php the_permalink(); ?>', 'value': '0'});">リンク</a>

イベントトラッキングコードの基本的な指定は次の通りです。

onClick="gtag('event', 'click', {'event_category': 'inlink', 'event_label': '<?php the_permalink(); ?>', 'value': '0'});"
action
値の型:テキスト
イベントの種類(例:click)
*必須項目
event_category
値の型:テキスト
イベントのカテゴリーを指定します。(例:inlink,outlink)
*必須項目
event_label
値の型:テキスト
イベントの分類に使用します(例:banner、紹介している記述では the_permalink() と遷移先URLを指定)
value
値の型:整数
イベントに関連する数値を指定できます(例:4649)

詳しくはGoogle アナリティクス イベント トラッキング をご覧ください。

jQuery で実装する方法

イベントトラッキングを細かく指定するのは骨の折れる作業ですが jQuery を使用することで動的に処理することができます。
次のコードは、Google アナリティクス のトラッキングコードを指定した状態で、jQuery が動作する環境で、イベントトラッキングを動的に指定する方法です。

<script>
/* Googleアナリティクス イベントトラッキング */
$(function() {
$('a').click(function(e) {
var ahref = $(this).attr('href');
if(ahref.indexOf('【サイトURL】') != -1 || ahref.indexOf('http') == -1 ) {
ga('send','event','inlink','<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>',ahref);
}else{
ga('send','event','outlink','<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>',ahref);
}
});
});
</script>

外部リンクか内部リンクを判断するためにサイトのURLを指定します。
例えば、www.hirashimatakumi.com のような場合は hirashimatakumi.com と指定します。

まとめ

WordPress で Google アナリティクスのイベントトラッキングを実装する方法を紹介しました。