初めまして、コーダーです。
よく見かけるのは、HTMLタグにonclick属性をインライン記述する<a href="" onclick="gtag(...)"> ですよね？
今回は、WordPressで、一つのテンプレートファイルで数十ページ生成する、しかもaタグではなくbuttonタグで
クリックイベントがきちんと設定＆取得できるのか？が、
個人的に少し引っかかったので簡単にまとめてみることにしました！
今回やりたかった事
「店舗ページ(20ページ)に設置しているアコーディオンのクリック数をそれぞれカウントしたい。」
「アコーディオンは各店舗ごとに複数設置。」
サイトの内容：レンタルオフィスのサイト
ページ：レンタルオフィス20店舗分のページが存在する。
テンプレート：各オフィスはpage-office-detail.phpで作成する。
管理画面：20店舗登録。それぞれに同じカスタムフィールドを用意して、
各オフィスで所有している備品を入力する形式。
備品アコーディオンをpage-office-detail.phpに出力させる。
イベントトラッキング：アコーディオンにトラッキングを仕掛ける。その際に「event_category」と「event_label」の値を動的に取得する。
条件
- gtag.js
- WordPress5.4/PHP7.2
※プラグインはACFやCustom Taxonomy Orderなどのカスタムフィールドやタクソノミー関連のプラグインのみ導入。
（Analytics関連のプラグインは入れていません。）
※Analytics管理画面にて「目標」は設定済みです。
結果イメージ
HTMLの時はこれでOKですよね！
<head>
//gtag.jsなので<head>タグ開始直後に記述する
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
</head>
<button onclick="gtag('event', 'click', { 'event_category': `椅子の種類`, 'event_label': `武蔵小杉` });"></button>
結論
page-office-detail.phpの各アコーディオンに下記をかけば、とりあえずAnalyticsにデータを送ることができます。
<?php
$officeName = get_the_title(); //例：武蔵小杉
?>
<button onclick="gtag('event', 'click', { 'event_category': '椅子の種類', 'event_label': <?php echo $officeName; ?> });">椅子の種類のアコーディオン</button>
※Analyticsでは武蔵小杉/椅子の種類、赤羽橋/椅子の種類...などのように店舗分のデータをそれぞれ渡すことができます。
もちろんevent_categoryの値を「技術書の種類」にすれば、武蔵小杉/技術書の種類、赤羽橋/技術書の種類...と取得が可能です。
しかしこのままだとアコーディオンを閉じた時もカウントしてしまう。。。
今回の目的は、
「閲覧者はアコーディオンをクリックするのか？
（きちんと中身を見てもらえているのか。クリック数が少なければ別の見せ方を検討したい）」
でしたので、少し工夫をします。
修正後
page-office-detail.php
インラインで書くのをやめます。
<div class="js-toggle-wrapper" aria-expanded="false">
<button type="button" class="js-analytics-event" data-officeName="<?php echo $officeName; ?>" data-category="椅子の種類">椅子の種類のアコーディオン</button>
<div>
アコーディオンの中身
</div>
</div>
office.js
$('.js-analytics-event').on('click', (event) => {
let $current = $(event.currentTarget);
accrodion($current);//処理内容は省いていますが、クリックしたら親要素のdivの「aria-expanded」がtrueになって
コンテンツが開く処理をしています。
if ($current.parent('.js-toggle-wrapper').attr('aria-expanded') === 'true') {
let cate = $current.attr('data-category');
let officeName = $current.attr('data-officeName');
gtag('event', 'click', { 'event_category': `${cate}`, 'event_label': `${officeName}` });
}
});
これで「アコーディオンを開いた時」のみカウントを取得することができるようになりました。
ちなみに、私の場合はカウントの反映に2時間ほどかかったような気がします。。
その他
スマホの場合 clickイベントや onclick だとイベントが取得できない。
というケースを聞きますが、
試しにインラインでonclickを書いた場合・今回の方法両方でAnalyticsにデータは送ることができていました。
（個人的な検証結果）
閲覧ありがとうございました。