WordPressの運用

gtag.jsでもWordPressのカテゴリーリンクのクリック数をAnalyticsで計測する

2017.11.12

マウスとキーボード

新しいサイトにアナリティクスの計測タグを設置し、いつものようにクリックイベント用のタグを記述し、テストを行もクリックイベントが計測されない・・・・なんでだぁ〜と思いながらうまく計測出来ているサイトと計測タグを見比べてみると計測タグが変わっていました。いつのまに・・・・・。

新しいgtag.jsでも動くクリックイベント

いつの間にか計測タグがgtag.jsなるものに変わっておりました。なのでクリックイベントも従来の記述では使えませんので新しい仕様に対応させます。以前も同じような内容で記事を書きましたがそれのgtag.js版です。

gtagのクリックイベント

以下のような感じでクリックするタグに記述します。

onclick="gtag('event', 'click', {'event_category': 'カテゴリ','event_label': 'ラベル'});"

ユニークで計測できるようにカテゴリーリストを出力する

今回やりたかったのはWordPressの親カテゴリ、子カテゴリのクリック数の計測です。wp_list_categoriesを使うとユニークで計測できませんので、HTMLの編集が自由に行いユニークで計測できるような形で出力します。

<ul class="gnav">
<?php 
$categories = get_categories('parent=0'); 
?>
<?php foreach($categories as $category): ?>
<?php
$cat_id = $category->cat_ID;
$cat_name = $category->cat_name;
$cat_url = home_url('/').$category->category_nicename.'/';
$cat_slug = $category->category_nicename;
$cat_child_list = wp_list_categories(array('child_of' => $cat_id,'echo' => 0));
?>
<li onclick="gtag('event', 'click', {'event_category': 'gnav','event_label': '<?php echo $cat_slug; ?>'});">
<a href="<?php echo $cat_url ?>"><?php echo $cat_name ?></a>
<?php if ($cat_child_list): ?>
<ul class="children">
<?php 
$cat_child_id = get_categories(array('parent'=>$category->cat_ID));
?>
<?php foreach($cat_child_id as $chaild): ?>
	<?php
	$cat_child_url = home_url('/').$cat_slug.'/'.$chaild->category_nicename.'/';
	$cat_child_name = $chaild->cat_name;
	$cat_child_slug = $chaild->category_nicename;
	?>
	<li onclick="gtag('event', 'click', {'event_category': 'gnav','event_label': '<?php echo $cat_slug; ?>'});">
	<a href="<?php echo $cat_child_url; ?>"><?php echo $cat_child_name; ?></a>
	</li>
  <?php endforeach; ?>
</ul>
<?php endif ?>
</li>
<?php endforeach; ?>
</ul>

ラベルにカテゴリにのスラッグ名を指定していますので、それぞれ認識出来ると思われます。 gnav箇所がカテゴリなので任意の名称でご利用ください。

設置の確認はお忘れなく

設置の確認はAnalyticsのリアルタイム>イベントで行います。うまく設置できていたらイベントとしてカウントされます。 ボタンがどの程度押されてているかはデザインを制作する上でもサイトを設計する上でも役立つ情報なので、今後は積極的にクリックイベントを計測していこうと思っています。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する