リンク (Aタグ) クリック監視＆ログ v1.0 Ajax版CGI

『どこから来たのか』と『サイト内の移動』はアクセス解析でわかります。 自分のサイト外へのリンクをクリックした場合には普通のアクセス解析では取れません。
『どのリンクがクリックされたのか？』は昔は個人ページではそれほど重要ではなかった物の アフィリエイト全盛の今は広告がクリックされているか？というデータは重要な物です。

このリンクのクリックデータの把握を最も確実に行うならCGI経由でリンク先に飛ばす方法がベターです。
アフィリエイトリンクの場合は、広告会社がこの形式でデータを取っています。 ですから一見サイトオーナーには必要ないようにも思えますが、 楽天などの商品リンクの様に個別のリンクも全てまとめて『楽天のリンク』とされてしまいます。

アフィリエイト収入の効率や詳細な戦略を立てるのであれば、 どのページの、何のリンクがいつクリックされたのか？も重要なデータです。
これを把握する為には、自サイトでも詳細なリンクデータを取る必要があります。
うちはアフィリエイト自体真面目にやってませんが・・・(^^ゞ
レンタル解析も非常に良い物が多くJavaScript監視の物でもある程度のデータはしっかり取れます。 が、100%把握したいのであればCGIを噛ませる方法がベターです。

---

JavaScriptでもクリック監視をして、そのデータを取ってCGIに送る事ができます。
ただし、この方法は
・イベントオブジェクトを理解できるブラウザである事
・ビジターがJavaScriptの実行を有効にしてる事

これらが大前提になりますのでCGIでワンクッション入れる方法に比べたらかなり不確実です。 また、記録をすると言う事は結果的にCGIに渡す必要もあるのでCGIが使えないサーバーでは扱えません。

簡単なサンプルJavaScriptの説明とログ用CGIを提供しておきます。
アクセスログ取り、及び解析用CGI・JavaScriptは『クリック監視１』のv0.9版と別です。 またデータファイルもJavaScriptによる読み込みを行うので、UTF-8固定となります。

このページはJavaScriptによる、クリック監視のログ取り方法ですので
CGIはいずれARTEMIS-CGIの方に移動します。

---

JavaScript経由でCGIに送る方法

---

■ [ HEAD内に貼り付けるスクリプト ]
<script type="text/javascript"> function GetAnchor(obj, type, func){ if(obj.addEventListener){ obj.addEventListener(type, func, false); }else{ if(obj.attachEvent) obj.attachEvent('on' + type, func); } }; GetAnchor(document,'click',function(ev){ /* 自サイト、登録サイトはログを取らない 1:とらない 0:とる */ var log = 0; /* パスするURLの始まり部分を配列で */ var myurl = ['http://' + top.location.hostname]; var CP; if( !(CP = ev.srcElement || ev.target) ){ return false; } var enc = ( self.encodeURIComponent || function(str){ return str; } ); var URLcheck = function(arg){ for(var i=0; i<myurl.length; i++){ if(arg.indexOf(myurl[i]) >-1 ){ return false; break; } } return true; }; for(var i=0; i<5; i++){ if(CP.tagName == 'A' && CP.href != ''){ var pagename = enc(document.title).replace(/&/g,''), linkname = enc(CP.title).replace(/&/g,''), url = enc(CP.href); if(!log || URLcheck(CP.href)){ var tmpImg = new Image(); tmpImg.src = './log.cgi?cmd=javascript&pagename=' + pagename + '&linkname=' + linkname + '&url=' +url; } break; } if( !(CP = CP.parentNode) ){ break; } } }); </script>

データを記録するCGIとアクセス解析用CGIです。Perl版とPHP版を用意しています。
JavaScriptからのログ、または CGI経由リンク用 どちらでも使えるものです。
アクセス解析はJavaScriptでデータファイルを読み込むので、IE6、NN6以降しか動きません。 また、ログ保存CGI(Perl版)もUTF-8に変換できる日本語ライブラリがない場合は使えません。 PHP版はライブラリ不要です。

---

使い方と説明

---

■ [ ページ内のリンク部分等の書き方の規則の説明 ]

普通の Aタグのアンカーを使います。
ログの方で整理しやすいようにtitle属性でそのアンカーのリンク先などの説明を入れてください。 アンカーで表示されるクリックテキストをinnerHTMLで取るよりも自由度が高く 意図的に整理しやすいと思いますのでtitle属性をそのアンカーの『名前』としてログを取ります。
例：<a href="http://artemis-cgi.com/" title="CGI表紙">CGIサイト</a>

このリンクが貼られているページのアドレスはCGIの方で取れますので、 整理用のこのページの名前として<title>〜</title>に設定されている名前を取ります。 あまり長くない適度な名前を付けて置いてください。
target属性は_selfでも_blankでも、無くても構いません。

『!』『タブ』は使わないでください(削除されます)。
『&』は使わないようにしてください。

---

■ [ JavaScriptの設定 ]

HEAD内に貼り付けるか、JavaScirptソースファイルとして読み込ませます。 HEAD内では他のスクリプトより後の一番最後に書き込むか、読み込ませてください。

var log = 1;
この部分は、外部へのリンクだけログを取るのであれば var log = 1;
内部の動きもとるのであれば var log = 0; です。

内部の動きは普通のアクセス解析などで、どこからどこに移動したのかをキャッチできるはずです。 外部だけにする場合はさらに自サイトのURLの始まり共通部分をmyurl配列に設定してください。

var myurl = ['http://' + top.location.hostname]; ( 初期値 )
通常この状態で同じホスト名なら『内部』と判断できますが、自分のディレクトリつきのURLの場合や マルチドメイン化してる場合などは全て設定してください。
例：
var = myurl = ['http://' + top.location.hostname,
'http://www.artemis.ac/cgi/', 'https://www.artemis.ac/cgi/',
'http://artemis.ac/cgi/',
'https://artemis.ac/cgi/',
'ftp://www.artemis.ac/cgi/'
]
この様に各URLをシングルクオーテーションで囲み、カンマで区切りならがら [ ] 内に羅列します。 カンマは各URLの「区切り」ですから最後の ] の前にはつけない様に。

次に
tmpImg.src = './log.cgi?cmd=javascript& ・・・・・
と言う部分がありますので、この赤い部分をCGIまたはPHPを設置した『 URL+ファイル名 』に変更してください。 自分で作ったCGIでも構いません。

以上でJavaScriptの方は動作します。

情報：
GETでCGIに渡す文字列は『&』で４分割すると
cmd=javascript
pagename=ページのタイトルタグの指定
linkname=アンカーのtitle指定
url=アンカーのhrefにあるURL
となります。
CGI側のデータはコレを元に処理すればよいだけです。
CGI側でネットで無料で提供されているアクセス解析CGI等のデータファイル形式にして保存すれば、 それらの解析表示画面を利用したりする事もできます。

このJavaScriptは、documentのクリックイベントを監視しています。
このスクリプトの監視イベントはメソッドによる付加なので、他のスクリプトのdocument.onclickイベント記述を上書きや干渉は基本的にありませんので 同一オブジェクトに対する同一イベントの重複に注意する必要は要りません。

配布用のサンプルは他のスクリプトとの共存に多少の配慮をしてあります。
グローバル変数名・関数名としてGetAnchor を1個使用しています。
これが他のスクリプトなどと干渉する場合は、 このスクリプト内の全てのGetAnchorと言う文字を、別の干渉しない名前に変更するか、 次のようにしてください。

■グローバル変数を使わない方法
このスクリプトの一番最初の行として ;(function(){ を付け足してください。
このスクリプトの一番最後の行として })(); を付け足してください。

;(function(){
function GetAnchor ・・・・・
GetAnchor(document,'click',function(ev){
処理内容
});
})();

設定が終わったら全ての改行をやめて、この様に1行にしてすっきりさせても構いません。 複数のページで使う場合は、外部ソースファイルなどにして読み込ませる方が便利です。 <script type="text/javascript"> ;(function(){ function GetAnchor(obj, type, func){ if(obj.addEventListener){ obj.addEventListener(type, func, false); }else{ if(obj.attachEvent) obj.attachEvent('on' + type, func); } };GetAnchor(document,'click',function(ev){ var log = 0, myurl = ['http://' + top.location.hostname], CP; if( !(CP = ev.srcElement || ev.target) ){ return false; } var enc = ( self.encodeURIComponent || function(str){ return str; } ); var URLcheck = function(arg){ for(var i=0; i<myurl.length; i++){ if(arg.indexOf(myurl[i]) >-1 ){ return false; break; } } return true; }; for(var i=0; i<5; i++){ if(CP.tagName == 'A' && CP.href != ''){ var pagename = enc(document.title).replace(/&/g,''), linkname = enc(CP.title).replace(/&/g,''), url = enc(CP.href); if(!log || URLcheck(CP.href)){ var tmpImg = new Image(); tmpImg.src = './log.cgi?cmd=javascript&pagename=' + pagename + '&linkname=' + linkname + '&url=' +url; } break; } if( !(CP = CP.parentNode) ){ break; } }}); })(); </script>

---

■ [ log.cgi / log.php CGIの設定 ]

用意してあるCGIを使う場合は、環境に合わせてCGIの設定が必要。

Perl版は1行目に自分のサーバーのPerlのパスを合わせます。
例：#!/usr/local/bin/perl

PHP版をCGIとして動作させる場合も1行目にphpのパスを追加で書き込みます。
例：
<?php
を
#!/usr/local/lib/php
<?php
等に変更。

php版は、モヂュールでもCGIでもphp5の指定が別途ある場合はそれを行ってください。 php5で製作・確認していますので5なら確実です。 またCGIとして動かす場合はCGI拡張子に変更するか、.htaccessなどでphpをCGIとして登録。

次に両方とも、
設定１
文字コードの設定はありません。
保存形式はUTF-8専用です。

設定２
ログデータを保存するディレクトリを指定。
ログデータ保存ディレクトリはパーミッションをファイル作成削除などが可能な状態に合わせてください。 755や707等

設定３
ログファイルの拡張子です。
データファイルはタブ区切りのテキストになっていますので、Excelで見ると見やすいです。 が、専用の拡張子はないと思うのでタブ区切りテキストで拡張子 txt が向いています。
UTF-8での保存ですので、テキストならnotepad等で普通に見る事もできます。

設定４(Perl版のみ)
日本語ライブラリの指定。
保存形式がUTF-8専用ですので、jcode.plでは保存できません。
jcode.pmというモヂュールがサーバー側で用意されていない場合はPerl版は使えません。
PHP版を使ってください。PHP版が使えない場合は『クリック監視１』の、バージョン0.9の方を利用してください。

設定５
ここには解析ログ取るサイトのURLの共通部分を配列として設定します。
このCGIはGETでログを取るのでどこからでも誰からでもデータを引き渡されてしまいます。 つまり、悪戯し放題って事になります。
その為、特定のサイトのURLから送られたデータにしか反応しないようにします。 一つしかサイトがない場合は $myurls[0]に自分のサイトだけ設定してください。
複数サイト(ホスト)にまたがる場合や、別のHPのログを取りたい場合は $myurls[1]、$myurls[2]、$myurls[3]の様に 配列の番号を増やしながら必要なだけ登録してください。
最低１個は必要です。
例：
$myurls[0] = 'http://www.artemis.ac/';
$myurls[1] = 'http://artemis.ac/';
$myurls[2] = 'https:/www.artemis.ac/';
$myurls[3] = 'https:/artemis.ac/';

設定６
ログを取りたくない閲覧者のホスト名を設定する事でログを取りません。 設定が不要の場合は $eschosts[0] = 'localhost';だけ残しておいてください。
例：
$eschosts[0] = 'localhost';
$eschosts[1] = 'tokyo.ocn.ne.jp';

以上で設定は終わりです。
CGIのパーミッションを実行可能755や700などにしてください。
PHP版はモヂュールとして動かす場合は設定不要と思いますが、 利用しているサーバーの指示に従ってください。

情報：
サーバーのローカルタイムがずれている場合は、Perl版は44行目あたりの localtime(time)をlocaltime(time+60*60*9)の様に(またはgmtimeを使う)秒単位で加算・減算してください。

PHP版は38,39行目あたりの2箇所のtime()をtime()+60*60*9の様にtime()に秒単位で加算・減算してください。

日付のフォーマットは付属の解析を使う場合は変更禁止です。

---

■ [ viewer.cgi / viewer.php CGIの設定 ]

Perl版、PHP版 両方とも同じ設定項目です。

設定１
自動でスクリプトのURL検出できるようになていますが、正確には
$thisCGI = 'http:// 設置したパス /viewer.cgi';
の様に書き込んで置いてください。

設定２
$charset='Shift_JIS';
自分の環境(サーバーの文字コード、FTPでサーバーに送った文字コード)に合わせて、 HTMLファイのMETAタグに使う文字コードを書いてください。

設定２
$dir = './data';
log.cgi / log.php で取ったログのあるディレクトリを指定。

以上を設定して設置すして、パーミッションを実行可能(755,705,700)等にしてください。
viewer.js と viewer.css も同じ場所に置いてください。
JavaScript式解析ですのでviewer.jsが無いと動きません。

この解析CGIはデータディレクトリを読み込んでファイルリストを取得するまでCGI(サーバー側)の役目です。 サーバーにはほとんど負担がかかかりません。 解析は私が自分用に使っているJavaScriptで行うタイプの物を更に改良して、 JavaScriptでファイルを読み込んで解析を行うようにしてあります。(これが0.9との違い)
自分のPCの方でファイルの読込みや解析を実行しますので、 データ件数が多いとPCの性能次第で表示するまでが重くなります。
JavaScriptのサポート状況からIE6またはNN6以上のブラウザが必要です。

v0.9のデータファイルはUTF-8で保存している場合以外は、利用できません。
CGIもJavaScriptもv0.9とほとんど同じですが『互換性なし』とします。

サンプル画面

---

改良・流用の為の説明

---

■ [ JavaScript ]

クリックが発生した時(イベント)にJavaScriptで、クリックされたタグをチェックし アンカーであればそのデータを取ってCGIにデータを渡しています。
データ送信警告なしにCGIにデータを渡したりするのは画像オブジェクトのSRCでCGIを呼び出すのが一般的です。 IMGタグでサイズを1*1にしてCGIで情報を取るのと似た様なものですね。

途中、IEとNNでイベントのオブジェクト指定などが違うのでセレクタにしていますが、 その中にある esc_objは、万一オブジェクト不明の時にエラーがでない為の回避です。 全てのブラウザの動作を把握してるわけでもないですし、今後仕様が変るケースなども考えての事。

エンコードは encodeURIComponentだけ使っています。 コレが使えないほんの少し前のブラウザの場合は、生データを渡すようにしています。
かなり古いブラウザでも対応できるescapeメソッドはブラウザやバージョンによって動きが違います。 きちんと解釈したり16ビット？の様なデータになったりして、解析側で戻すのが逆に面倒になるので使っていません。 PHPのデコードとの互換性もないので生の方が楽なので。
生データは日本人が普通日本語の環境で使ってる状態で日本のサーバーなら結構そのまま通用してしまいます。 本当は正しくないのですが、結果的にうまく行くので・・・といった所に頼ってます。 URL情報は基本的に日本語は無いのでで、重要な情報には問題はでにくいです。 日本語.jpタイプのリンクに関してはPunycodeにしても対応ブラウザの場合、JavaScriptでも勝手に日本語にして送ってしまうので文字化けが発生する場合はちょっと使い辛いです。

JavaScriptからのCGIへのデータ受け渡しに関しての注意は、QUERYのライン上でURLを最後にしてる点です。 アンカーのURLにはアフィリエイトリンクの様に複数のhttpから始まるデータや『&』や『=』と言った、 分解する指標になる文字列を持ってしまっています。 このデータがQUERYラインの途中にあるとCGI側でどこまでがアンカーのURLなのか？ アフィリエイトリンクの飛ばし先なのか？がわからず、分解して良いのか良くないのかわからなくなります。 末尾にする事でURL=以降を分解しないと言う事が容易にできます。
またCGI側で受け取る時に、毎回 &で区切られたデータの数が違わないように、取るデータが空でも &linkename= や &pagename= のキー部分は常に送られるようにラインの方に書き込まれています。

---

■ [ CGI Perl版 ]
基本的に私がCGIに始めて触れたレスキューさん仕込みのわかりやすい記述になってると思います。

このCGIはGETでデータを取る物ですのでサブルーチンrefcheckは必須です。

@set = split(/&/,$QUERY,4);
直前述のJavaScriptからのCGIへデータ受け渡しのラインでURLを末尾にしてるので『&』で4分割しています。
URLがアフィリエイト用の物だともっと分解されてしまうので4分割固定です。

その次のKey、Valueの分割に関しても 『=』で２分割に固定しておきます。 コレもvalueがアフィリエイト用のURLだと『=』を複数含む可能性があるので。

日本語の扱いについては、送られてくるデータと保存形式がJavaScriptでの制限や仕様で UTF8に固定しています。

データ保存される文字列は１行に保存されます。
JavaScriptなどから渡されたGETのQUERYが
cmd=javascript
pagename=取出したページ名(タイトル)
linkname=取出したアンカーのタイトル指定
url=アンカーのhrefにあるURL
となりますので
これらを分解デコードした物をタブで区切って保存しています。
時間[\t]リンクURL[\t]リンク名[\t]ページURL[\t]ページ名[\t]ブラウザ[\t]ホスト[\t]IP
アクセス解析ではこのログを、タブで分割すれば分析用データして使えます。

---

■ [ log.php PHPスクリプト版 ]
PerlのCGIとほとんど同じコーディングしていますのでPerlの方も参照してください。

$QUERY = $_SERVER['QUERY_STRING']; PHPは$_GETで分解済みのデータを取れますが、URLデータがアフィリエイトデータの場合、 そのURLラインまで分解されてしまっているので、$_GETは使わずにPerlと同じようにQUERYで入力データを取ります。

$set = explode('&',$QUERY,4);
Perlと同じように入力データを取っているので、４分割して必要なデータの形にします。 ４分割の理由はPerlの方に書いてあります。

$pair = explode('=',$value,2);
これもPerlと同じ２分割固定で行います。

---

■ [ viewr.cgi / viewer.php ]
CGI自体は画面フレーム作りと、リスト作りだけしています。
ファイルの読込みや解析は全てJavaScriptで行われます。
JavaScriptは、作成中に他の方法が思いつかなかったのでかなりの多重配列で無駄に複雑になっています。 またファイル読込みに関しても、あまりスマートなオブジェクト化などができていません。
もっと良い方法があれば自分で作り変えてください。

---

CGI経由でアンカーを付ける方法

---

このCGIはJavaScriptから呼び出されてログを取る他に、 直接リンクアンカーに埋め込んで確実にログを取る事もできるようにしてあります。
(JavaScript式と併用しないでください。2重ログになります)

■[ 使い方・記述規則 ]
CGIの設置はJavaScriptの方と同じです。

ページのアンカー href部分の記述を
<a href="./log.cgi?cmd=direct&pagename=&linkname=あるてみす&url=http://www.artemis.ac/" >リンク </a> の様に、

CGIパス+ファイル名?cmd=direct&pagename=ページの整理名&linkname= リンクのの整理名&url=リン先のURL
と言う形でCGIを間にかませて、必要な情報を入れ込んでリンクしてください。
cmd=directと言う形でCGIが呼び出されると、ログを取った後にurlに設定されているリンク先に自動的に飛ばします。 簡単なCGIですからエラーが起きない限り時間的ロスもほとんどありません。

この方法の場合、CGIに引き渡されるデータはURLエンコードされていない生データになるので、ページやリンクの整理名が日本語だと、 場合によっては文字化けする場合があります。大抵大丈夫です。 文字化けする場合は半角英文字を使うか、エンコード(下で提供)した日本語を記述してください。

リンク先URLは日本語は含まれていないのでそのままで良いです。
リンク先URLが汎用ドメイン(日本語ドメイン)の場合は、必ずPunycode(xn--xxxxxxx.jpの形式)に変換して記述してください。 このdirect型の場合はURLラインのデコードをしません。 日本語ドメインの場合punycode指定でもIEでは時々うまく行かないことがあります。 NN系は問題ありません。

■日本語.jpの punycodeへの変換はこちらで
日本語ドメイン名の Punycode変換 <=> 日本語変換

■日本語のエンコード (directの時だけ)

---