【コピペで使える】リンククリック数を自力で計測するJavascriptコード

HTMLサイトで指定のリンクのクリック回数を記録したいといったケースがあります。

リンククリックの計測で検索するとGoogleアナリティクスの設定が出てきますが、本記事ではJavascript(JQuery)とPHPを使って自力で計測を実現する方法をご紹介します。
 

コードサンプル


<a href='https://tadworks.jp/' target='_blank' onclick='countup(1);'>リンクテキスト</a>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
function countup(itemid) {
$.post('./counter.php', { id : itemid });
}
</script>

aタグ内でonclick属性を使って引数付きの関数を実行するようにします。この際引数につけるのはカウントアップ対象のデータベースレコードを想定しています。

レコードのID1のカウント用のカラムをアップデートでインクリメントしてゆくような使用イメージですね。SQL文で書くとこんな感じ。

SQL文の例)UPDATE テーブル名 SET cnt = cnt + 1 WHERE id = ID番号;

実際に使うときは、IDはリンクごとに動的に付与するような形になるかもしれません。

これでリンク先に画面遷移し、かつクリック数を記録することが可能となります。

インプレッション数の計測については別の記事で紹介していますが、画像形式のPHPプログラムで取得するのがよいと思います。

Follow me!