【Click Tracker S】指定したクラスを持つリンクのクリックを追跡するWPプラグイン-シフルインサイト

今回はChatGPTと格闘しながら作り上げたWordPressプラグイン「Click Tracker S」を紹介します。

このプラグインを作ろうと思ったきっかけが「どの内部リンクがクリックされているかわからない」ということでした。

このブログでも様々な場所に内部リンクが張り巡らされており、なんとか回遊率を上げようとしています。実際アクセス解析を見ればどこかしらのリンクをクリックしていることは分かるのですが「で、どこやねん？」となるわけです。

あるいは広告についても、どのリンクがクリックされているのかが分かったほうが良いわけです。広告はない方がいいわけですから、圧倒的にクリックに差があるようなら少ない方をなくしたほうがよい。

ということで、

クラスを複数設定し、それぞれクラスを持つリンクのクリック数を計測、
日別、週別、月別など、さまざまな期間でクリック数を表示できて、
グラフなんかも表示できる

そんなプラグインを探したのですが、どれも帯に短し襷に長しといったところだったので、生成AI の時代なんだから自分で作ってしまおうということで作ったのが「Click Tracker S」です(Sは管理人の名前Sifr(シフル)のSです)。

WordPressのプラグインディレクトリには登録されていないので手動でインストールすることになります。使ってみたい方は以下のリンクからダウンロードして手動でのインストールを行ってください。

Click Tracker S

ここからは使い方の解説です。

Contents

「Click Tracker S」の使い方

「Click Tracker S」の使い方

クラス、タグ、グループの設定

「Click Tracker S」をインストールすると、管理画面のサイドメニューに「Click Tracker S」の表示が出ますのでそこから「設定」に移動してください。

設定画面を見れば概ね使い方はわかると思いますが、設定画面では

クリックを追跡したいクラス名
そのクラスにつけたタグ
複数のクラスやタグをひとまとめにするグループ

を設定できます。ここで指定するクラスは以下の例にある赤字の部分になります。

 <a href="https://example.com" class="track-click">テキスト</a>

一応これだけを設定すればそのクラスのあるリンククリックを集計してくれます。タグの欄にはそのクラスを持つリンクがどういうものかがわかるような名前をつけてあげてください。

グループは必須ではありませんが、集計結果で複数のタグをグループ分けして表示する事ができます。追跡するクラスが多くなった場合は利用してください。グループ名をあらかじめ登録し、それをプルダウンで選択することになります。

集計結果

集計結果は最後メニューの「Click Tracker S」をクリックすれば見ることができます。結果の表示は「タグ」と「タグとURL」を選択することができ、「タグ」の場合は設定画面で登録したタグ名ごとの集計、「タグとURL」を選択するとタグとクリックされたURLが組になって表示されます。

また、集計期間は「今日」「昨日」「過去7日」「過去30日」「過去12か月」から選ぶことができます。

さらに、表示されているタグ名をクリックすると集計結果のグラフもポップアップで表示されます。

表示結果で「タグ」が表示されているときはタグごとの結果のグラフ、「タグとURL」ではURLごとの結果のグラフが表示されます。

管理者の追跡とIPアドレスのブロック

「Click Tracker S」の機能をチェックするために自分でクリックして確認したいこともあると思いますが、そのために管理者のクリックを追跡するかどうかを選機能もついています。

更に特定のIPアドレスからのクリックも排除できますので、例えばIPアドレスを指定することで自分のクリックを排除することも出来ます。

特定のクラスを持つ<div>に含まれる<a>タグにクラスを付与するtips

以上が基本的な機能の説明なのですが、我ながらなかなか素晴らしいプラグインになっていると思います。

ただ、様々な障害から本来クリックを追跡したい<a>に他と区別できるクラスを付与できない(されていない)場合もあると思います。そんな時に役に立つかもしれないJavaScriptを紹介します。

特定のクラスを持つdiv内にある<a>タグに指定したクラスを付与する

このスクリプトを</head>タグの上に設置すると、

<div class="test-box"><a href="https://example.com">テキスト</a></div>

という状況になっている<a>タグに「test-class」というクラスを付与してくれるので「Click Tracker S」で追跡することが出来ます。すでに他のクラスが付与されていても新たに「test-class」を追加してくれます。ただし、「test-box」というクラスを持つdiv内にある全ての<a>にクラスが付与されてしまうことは注意してください。

また、「div.test-box」の部分を「div#test-box」に変更すれば「test-box」というIDを持つdivに含まれる<a>タグにクラスを付与してくれます。

一応以下にIDバージョンも載せておきます。