GA4(Google Analytics)を使用せずにより詳細なアクセス解析が行えるMatomo。個人的にはGA4よりも見やすくて重宝しています。
Matomoって何？という方は以下でレンタルサーバーにインストールして使用する方法について書いていますので参照ください。
さて、このMatomoには、クリックに対する計測機能があります（いわゆるクリックイベント計測）。私はGA4のそれを使ったことがないので違いは分かりませんが、どのボタンがどの位クリックしたかを知るには便利だと思いますので、ダウンロードコンテンツなどを配布するサイトで特別なダウンロード系のプラグインなしでクリック計測をしたいという方はぜひ試してみてください。
Matomoでクリック計測を行う方法
Matomoのクリック計測機能を使うには、ボタンのリンク要素にonclick属性を追加する必要があります。
基本的なリンクタグの構成方法については公式の「Implement event tracking with Matomo」をご覧ください
これによると、リンクタグを以下のようにすることで、クリック時のイベントとして記録され、Matomoのダッシュボードでクリック数を見ることができるようになります。
<a href="mailto:name@example.com" title="Email Us" onclick="_paq.push(['trackEvent', 'Contact', 'Email Link Click', 'name@example.com']);">Email Us</a>つまりはリンクタグ内に「onclick=”_paq.push([‘trackEvent’, ‘Contact’, ‘Email Link Click’, ‘name@example.com’]);”」という属性を追加すればいいということですね。
このままの要素を追加した場合、Matomoのダッシュボードには、以下のように数が計測されます。
- 「Contact」という「グループ」のクリック数
- 「Email Link Click」という「アクション」の数
- 「name@example.com」という名前のクリック数
基本は「名前」をボタンごとに別にしておき、どんな動作なのかでまとめたり、どんな種類なのかをまとめたりしますがすべて別にしておけばそのボタン特有のクリック数がどのレポートにも共通に表示されます
そしてWordPressで行う場合はボタンブロックを使ったリンクでクリック計測を加えるケースが多いと思いますので、一旦HTMLとして編集を選択してonclick属性を追加後、ビジュアル編集に戻せば．．と考えるでしょう。
でもこれをやろうとすると、「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示され変更を適用することができません。そう、WordPressのボタンブロックではこの属性の追加は許可されていないのです。
これを回避するには以下のような手順でonclick属性を追加します。
- ボタンブロックでボタンを挿入後、位置・リンクテキスト・デザインを決定する
- ブロックツールバーから、「HTMLとして編集」をクリックする
- 切り替わったHTMLコードをコピーする
- 新たにカスタムHTMLブロックを追加し、3を貼り付ける
- onclick属性を追加する
- ボタンブロックを削除する
これで、Matomoのアクセス解析タグがページ内に出力されていれば、Matomo側でクリック計測をしてくれるようになります。
実際に行ってみた感覚では、クリック計測の集計は即時反映されず、通常のアクセスの集計よりも時間がかかるようですのでテスト的にクリックしてみたら、ある程度時間を置いて集計結果を見てみるといいと思います
カスタムHTMLブロックを使用しなくても済ませる方法（jQueryの利用）
ここまで紹介した方法では、カスタムHTMLのままにしておく必要があるので、ボタンの再編集をしたい時には以下のようにする必要があります。
- 一旦別のボタンブロックを追加してスタイルなどの調整をする
- ボタンブロックをHTMLで編集するように切り替える
- カスタムHTMLブロックを追加して2をコピーする
- 以前のカスタムHTMLブロックにあるonclick属性の部分をコピーする
- 以前のカスタムHTMLブロックを削除する
まあ一旦ボタンを作ってしまえばそれほどスタイルの変更などをすることはないでしょうから、その時はその時という感じはするものの、できれば手順は減らしておきたいですね。
前述したようにボタンブロックはその他の属性を追加する等の変更を加えると、ビジュアル編集に戻した時、「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示され、リカバリーすると追加したものはすべて削除されてしまいますから、何かを追加するとすれば、追加CSSクラス位でしょう。
そこで、ボタンに特有の追加CSSクラスを加え、そのクラスのある要素（今回ではボタンのリンクタグ）に対して、jQueryで後からonclick属性を追加するという措置を行います。
こうすることで、標準のボタンブロックに何かを加工するわけではないので、通常のボタンブロックとして編集できるようにしつつ、Matomoのクリック計測属性（onclick属性）を追加することができます。
ボタンごとにイベントの名前を変えるケース
ボタンごとにMatomoのイベント名を変えて計測結果を見たい場合に有効な方法です。
例として、ボタンブロックの追加CSSクラスへ「pwcn-onclick-button」というクラスを追加した前提で、以下の手順で機能を追加します。
- ボタンブロックを追加する
- ボタンを選択し、右サイドバーの「高度な設定」から「追加CSSクラス」へ「pwcn-onclick-button」を追加する
- 対応するjQueryコードを追加する
1と2は通常のボタンブロックの操作と、他のブロックでもよく行う追加CSSクラスの追加なので問題なくできるでしょう。
課題は3のjQueryです。具体的には以下のコードを有効化しているテーマのjQueryが読み込まれるファイルへ追加します。
/***** 特定のボタンにMatomoのクリック計測要素を追加 *****/
jQuery(document).ready(function($) {
/* 必要な値を変数に格納する */
// 追加CSSクラスに追加した一意のボタンクラス
const buttonClass = "pwcn-onclick-button";
// トラッキングイベントの各パラメーター
const MatomoEventCategory = 'Contact'; // イベントカテゴリー
const MatomoEventaction = 'Email Link Click'; // アクション
const MatomoEventName = 'name@example.com'; // イベント名
/* 変更が必要なのはここまで */
/* 処理に必要な情報をまとめる */
// MATOMOのトラッキングイベントの情報を変数に格納
const combinedClass = "." + buttonClass + " a";
const matomoEvent = `_paq.push(['trackEvent', '${MatomoEventCategory}', '${MatomoEventaction}', '${MatomoEventName}']);`; // テンプレートリテラルを使用
// 特定のCSSクラスを持つaタグを選択
$(combinedClass).each(function() {
// onclick属性を追加
$(this).attr('onclick', matomoEvent);
});
});
正常にjQueryが読み込まれ、前項の方法と同じくMatomoのアクセス解析タグがページに出力されていれば機能します。
もしも使用しているテーマにjQueryを正常に読み込ませる機能がなかったり、追加しているはずなのに機能しない場合には文末の「テーマでjQueryを使用するには」確認してください。
また、複数のボタンに対して別々の計測をする場合には、各ボタンの追加CSSクラスを分け、jQueryコードを追加して、コード内の「pwcn-onclick-button」と各種イベント要素（カテゴリー・アクション・名前）の名称を変えれば機能します。
ページ単位でクリック計測を行うケース
前項ではボタンごとに「そのボタンの追加CSSクラス」を指定し、その追加CSSクラスに対してjQueryを反応させて、そのボタン特有のイベント名を付加したonclick属性を追加してmatomoで処理させるという方法を紹介しました。
ただユースケースとしては、商品販売ページに複数の購入ボタンがあり、その中のどのボタンをクリックしても「〇〇というページの購入ボタンがクリックされた」こととしてクリック計測をしたいということが多いと思います。
もちろん前項の方法を流用して同じ追加CSSクラスを付与すれば、同様のことができますが、そうしたサイトでは、カスタムフィールドを使って商品名などを登録し、本文内で表示をさせるというような設計をすることが多いので、このカスタムフィールドの値を使って、もう少しWordPressらしく？自動化することもできます。
また、こうすることで、ボタンごとにjQueryを追加（量産）する必要がなくなるので、コードの簡素化や設定ミスを防ぐこともできるようになります。
前項の機能を実装できた前提で説明しますので、よく分からない方は戻って仕組みを確認してから進めてください
カスタムフィールドの値をjQueryに渡す
既に各投稿や固定ページには「item-name」という共通のカスタムフィールドがあることを前提に説明します
wp_localize_script()関数を使って、カスタムフィールドの値をjQueryへ渡すコードを追加します。
以下のコードをfunctions.phpへ追加します。
function pwcn_pluginname_to_matomo_click_eventname() {
// 投稿のカスタムフィールドの値を取得
global $post;
$custom_field_value = get_post_meta($post->ID, 'item-name', true);
// データをJavaScriptに渡す
wp_localize_script('読み込まれているjsのハンドル名', 'trwpLocalizedData', array(
'eventName' => $custom_field_value,
));
}
add_action('wp_enqueue_scripts', 'pwcn_pluginname_to_matomo_click_eventname');「item-name」は自身の環境のカスタムフィールドキーへ、「読み込まれているjsのハンドル名」は自身の環境のハンドル名を指定してください
jQueryのコードを変更する
functions.phpへ追加したコードで取得した値（item-nameというカスタムフィールドの値）をイベント名として自動的に指定するようにしたjQueryコードへ変更します。
jQuery(document).ready(function($) {
// myLocalizedDataが定義されているか確認
if (typeof trwpLocalizedData !== 'undefined') {
const buttonClass = "is-style-matomo-click-event-class";
// トラッキングイベントの各パラメーター
const MatomoEventCategory = 'ダウンロード'; // イベントカテゴリー
const MatomoEventaction = 'クリック'; // アクション
const MatomoEventName = trwpLocalizedData.eventName; // イベントの名前
/* 処理に必要な情報をまとめる */
const combinedClass = "." + buttonClass + " a";
const matomoEvent = `_paq.push(['trackEvent', '${MatomoEventCategory}', '${MatomoEventaction}', '${MatomoEventName}']);`; // テンプレートリテラルを使用
// 特定のCSSクラスを持つaタグを選択
$(combinedClass).each(function() {
// onclick属性を追加
$(this).attr('onclick', matomoEvent);
});
} else {
console.error('myLocalizedData is not defined.');
}
});上記のコードでは、ボタンブロックの追加CSSクラスに「is-style-matomo-click-event-class」を追加した場合に、ボタンのリンクタグにそのページに設定している「item-name」というカスタムフィールドの値をイベント名としてMatomoに渡すというonclick属性を追加しています。
サイドバーのボタンでクリック計測用の追加CSSクラスを付加できるようにする
最後に、ボタンに手動でいちいち「is-style-matomo-click-event-class」という追加CSSクラスを追加するのはミスの元にもなりますし、何より面倒なので、以下のコードを追加して下図のように「クリック計測」という選択ボタンを設け、クリック１つで追加CSSクラスに「is-style-matomo-click-event-class」というクラスが付加されるようにします。
function pwcn_register_block_styles_button_add_click_event_class(){
register_block_style('core/button', array(
'name' => 'matomo-click-event-class',
'label' => __( 'クリック計測',''),
));
}
add_action('init','pwcn_register_block_styles_button_add_click_event_class');
これで、「item-name」というカスタムフィールドに値があり、「クリック計測」を選択した場合のみ、ボタンのリンクタグに「item-name」の値をイベント名としたonclick属性がHTML上に付加され、自動でページごとに分けてクリック計測されるようになります。
テーマでjQueryを使用するには
最後にテーマにjQueryやJavaScriptを読み込ませる機能を実装したい場合やうまく動作しない場合には以下のページを参考にしてみてください
この手法に切り替えて気づいたこと
ダウンロードコンテンツ提供系のプラグインは結構たくさんありますが、それらでクリックされた！と計測されても、クリック元（アクセス元）のIPなどを逆引きするとそのほとんどがクローラーからのアクセス、つまりクリックはされていないことが分かります。
つまりこれらのプラグインは、クリックされたかどうかに反応しているのではなく、そのプラグインで作成したページ（ダウンロードコンテンツ用ページ）へ何回アクセスされたかということを計測しているだけで、クローラーがリンクを辿ってアクセスしたものが計測されているのです。
実際にこの手法を用いてクリック計測（イベント計測）を行ってしばらく経過後に気づいたのは計測の正確性の高さ。これはページへの遷移ではなく、そのボタンがクリックされたと同時にMatomoへ情報が行くから当然のことで、今まで結構クリックされているなぁと感心していたコンテンツが実は．．ということに気づくことができました。
現在ダウンロードコンテンツ提供系プラグインを使っていて、結構なダウンロード数があってうれしいと思っている方はぜひこの手法でイベント計測をしてみてください。きっと残念な結果が待っていることでしょう（笑）、でもそれが実体ですから仕方ないですね。
