CakePHPとjQueryで汎用的なリンククリックカウンターを作成する

ページに記載した外部リンクが何回クリックされたかを知りたかったので、リンククリックをカウントするスクリプトを作成した。 Google Analyticsのイベントトラッキング機能の簡易版。

リンクにあらかじめ決めたCSSクラスとリンクを識別するための属性を設定しておき、リンクがクリックされた時にAjax処理でサーバに属性情報を送信して記録する。

サーバ側はCakePHPで作成したけど、大したことはしていないので他の言語でも実現できるはず。 1つコントローラを作成しておけばどのページからのリンクでもカウントできる。

HTMLソース

<html>
    <head>
        <script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
        <script type='text/javascript' src='/js/click_counter.js'></script>
    </head>
    <body>
        ...
        <a href='http://honjala.net/' class='click-count' data-linkname='ブログ'>ほんじゃら堂</a>
        <a href='https://twitter.com/honjala' class='click-count' data-linkname='Twitter'>Twitter</a>
        ...
    </body>
</html>

click_counter.js

$(document).ready(function () {
    (function($) {
         var ClickTrackService = {
            track: function (name, url, options) {
                var callerUrl = location.href;
                $.ajax({
                    'type': 'POST',
                    'dataType': 'json',
                    'url': '/click_tracks/track/',
                    'data': {
                        'name': name,
                        'url': url,
                        'caller_url': callerUrl
                    },
                    'success': options.success || function (data) {},
                    'error': options.error || function (xml, status, e) {}
                });
            }
        };

        $('a.click-count').live('click', function (e) {
            var linkName = $(this).attr('data-linkname');
            var url = $(this).attr('href');
            if (linkName != null &amp;&amp; linkName != '') {
                ClickTrackService.track(linkName, url);
            }
        });
    })(jQuery);
});

保存用テーブル定義

CREATE TABLE IF NOT EXISTS click_tracks(
    id integer not null auto_increment,
    name varchar(100),
    url text,
    caller_url varchar(255),
    ip varchar(20),
    created datetime,
    PRIMARY KEY (id)
) ENGINE=InnoDB;

click_tracks_controller.php

<?php
class ClickTracksController extends AppController {
    public $name = 'ClickTracks';
    public $uses = array(
        'ClickTrack',
    );  

    public function track() {
        $url = null;
        $name = null;
        $caller_url = null;
        if (array_key_exists('form', $this->params)) {
            if (array_key_exists('url', $this->params['form'])) {
                $url = $this->params['form']['url'];
            }
            if (array_key_exists('name', $this->params['form'])) {
                $name = $this->params['form']['name'];
            }
            if (array_key_exists('caller_url', $this->params['form'])) {
                $caller_url = $this->params['form']['caller_url'];
            }
        }

        $ip = $_SERVER['REMOTE_ADDR'];

        $this->ClickTrack->create();
        $track = array(
            'url' => $url,
            'name' => $name,
            'caller_url' => $caller_url,
            'ip' => $ip
        );  
        $this->ClickTrack->save($track);

        //JSONレスポンス処理
    }
}