訪問者の解析ツール
(CGIとJavaScriptによるアクセスログ)

自分のホームページにどの程度の訪問者があるかは、カウンターをつけて把握するのが一般的です。
ホームページをはじめたころの、単純なページ構成ならば、カウンターだけでも、さほど問題ありませんが 多彩な内容のページに発展してくると、カウンターでは訪問者が把握しきれません。
例えば検索サイトから訪問される場合は、トップページをパスして直接目的のページに来られます。

私の場合でもトップページをパスして目的ページに入る方が半数を超えていますし、 ある方の場合では、実に80〜90%が目的ページに直行していたという例もありました。
逆に、トップページまでは来られたが、そのまま帰られる場合も結構多いようです。
これらの状況を解析するには、各ページへの訪問者を記録しなければできません。

そこで、訪問者の動きを自分で記録する方法を、ここに紹介をします。

1、CGI

ホームページサーバーに記録を保存するにはサーバーでプログラムを実行しなければできません。
しかも、サーバー自体にプログラムが利用できる環境が整備されていることが前提条件です。
まず、あなたの使っているホームページサーバーが「CGI利用可」となっているか、プロバイダーのホームページで調べてください。
(「CGI利用不可」の場合は以下はあきらめてください)

  1. サーバーに訪問者記録用のフォルダーを作ってください。( 一般的にはCGIを使うフォルダーは「 cgi-bin 」という名前をつけます。)
  2. 下記ソースをコピーして「 usr.cgi 」というファイルをつくってください。
  3. アスキーモードでサーバーの訪問者記録用フォルダーにファイル転送(FTP)してください。
  4. 「 usr.cgi 」ファイルの属性(パーミッション)を全て実行可( 755 )にしてください。

usr.cgi
#!/usr/local/bin/perl ## usr/bin/perl と書くサーバーも多いので確認すること #-----データ取得----- $buffer = $ENV{'PATH_INFO'}; ## ",ID,閲覧ページ,訪問元,"  が送られる @pairs = split(/,/,$buffer); ## 配列に分割 $ip = $ENV{'REMOTE_ADDR'}; ## 訪問者の接続IPアドレス #----データセット--- $id = "$pairs[1]"; $old_url = "$pairs[3]"; $page = "$pairs[2]"; #------日付時刻------ ($sec,$min,$hour,$d,$m,$y,$w) = localtime; $m++; $hour= sprintf("%.2d",$hour); $min = sprintf("%.2d",$min); $sec = sprintf("%.2d",$sec); $d= sprintf("%.2d",$d); $m = sprintf("%.2d",$m); $y = $y + 1900; $youbi = $w; $w++; if($w>6){$w=0;}

#-----保存ファイル名------
$fil="$pairs[1]_$youbi.js";	## 今日のファイル
$fil1="$pairs[1]_$w.js";	## 明日のファイル
#---ログを保存--- open(OUT, ">>$fil"); flock(OUT,2); print OUT "n++;dt[n]=\"$num,$m\/$d\,$hour\:$min:$sec,$old_url,$page,$ip\"\;\n"; flock(OUT,8); close(OUT); #---6日前ののファイルを空にし明日のファイルを準備--- open(OUT1, ">$fil1"); print OUT1 ""; close(OUT1); #---ブラウザ表示--- print "Content-type: text/html\n\n"; print "<HTML>\n<HEAD><TITLE></TITLE></HEAD>\n"; print "<BODY onLoad=\"close()\">\n"; print "</BODY>\n</HTML>\n";

2、対象ページに仕掛
( WindowsXP Sp2 用に書き換え)

お客さまが不愉快に思われないように、記録をCGIに受け渡します。
  1. 記録を取りたい各ページに下記のJavaScriptを挿入します。
  2. CGIのあるURLは、(1)で作ったCGI用のURL/フォルダー名/に、識別名は自分のものに書き換えてください。

<script language="javascript"> <!-- document.write('<img name="usr_log" width=1 height=1>'); cgi_url="http://qpon.cool.ne.jp/cgi-bin/usr.cgi";//CGIのあるURL(自分用に書換え) id="qpon"; //識別名:自分のものに変更のこと ur1=document.URL;ur2=ur1.split("/");ur3=ur2[ur2.length-1]; //閲覧ファイル名 if(ur3==""){ur3=ur2[ur2.length-2]+"/";} //省略された場合フォルダー名で代用 ref=document.referrer; //訪問元 document.usr_log.src=cgi_url+"/,"+id+","+ur3+","+ref+","; //--> </script>

3、記録一覧表

次のHTMLファイルを自分のパソコン上に作って開くと、 6日分の記録が最新の訪問者から順に一覧表示されます。


list.htm
<html> <head> <title>ログリスト</title> <script language="javascript" > <!-- id="qpon";//自分の識別名に変更のこと dt=new Array(); n=0; ymd=(new Date()).getDay(); //過去6日分のログファイルを合成 cgi_url="http://qpon.cool.ne.jp/cgi-bin/";//ログファイルの保存場所(自分のサーバーに書きかえ) for(i=1;i<7;i++){ md=(ymd+i+1)%7; document.write('<'); document.write('script language="javascript" src="',cgi_url,id,'_',md,'.js"></script'); document.write('>'); } //--> </script> </head> <body> <center> <script language="javascript" > <!-- document.write('<h2>ホームページ訪問者解析[ID=',id,']</h2>'); document.write('<table border=1>'); document.write('<tr><th>no</th><th>月日</th><th>時刻</th><th>訪問元ページ</th>'); document.write('<th>閲覧ページ</th><th>接続IP</th></tr>\n'); nn=0;dm="";dm5=""; for(i=n;i>0;i--){ dd=dt[i].split(","); nn++;if(dm != dd[1]){nn=1;} document.write('<tr><td align=right>',nn,'</td><td>',dd[1],'</td><td>',dd[2],'</td><td>'); dm=dd[1]; if(dd[3]){ document.write('<a href="',dd[3],'" target="_link">',dd[3],'</a>'); }else{ document.write('PC or Mail'); } document.write('</td><td>',dd[4],'</td><td>'); if(dd[5]==dm5){cr="#bbbbbb";}else{cr="#000000";} document.write('<font color="',cr,'">',dd[5],'</font></td></tr>\n'); dm5=dd[5]; } document.write('</table><br>'); //--> </script> 製作:<a href="http://www2a.biglobe.ne.jp/~qpon/">QPON</a> </center> </html>

表示見本

4、データ保存用ファイル

サーバーにデーターを保存するファイルは
「あなたのID」+「_」+「曜日コード」+「.js」
という文字列の構成で自動的に作られ、データが保存されます。
IDが「qpon」だった場合

qpon_0.js     //日曜日のデータファイル
qpon_1.js     //月曜日のデータファイル
qpon_2.js     //火曜日のデータファイル
qpon_3.js     //水曜日のデータファイル
qpon_4.js     //木曜日のデータファイル
qpon_5.js     //金曜日のデータファイル
qpon_6.js     //土曜日のデータファイル

そして、6日後にはデーターがけされ、7日後には翌週のデータが上書きされます。
自動的に繰り返されるので、特に手をかける必要はありませんが
最初の一週間は、できていないファイルがありますので
(3)の「記録一覧表」で呼び出しに行ったとき、エラーになるサーバーもあるようです。
これを避けるには、上記の7つのファイルを中身は空白のままで作成し
サーバーのCGIと同じ所に転送しておくと無難のようです。

5、詳細な解析

次のHTMLファイルを自分のパソコン上に作って開くと、 エクセルで使える「 ,」編集で表示できます。

  1. 「ファイル」「名前を付けて保存」「ファイルの種類[テキスト(*.txt)]」を選び保存する。
  2. エクセルを開き「ファイル」「開く」「ファイルの種類[テキスト(*.txt)]」で保存したファイルを開いてください。
  3. 元のデータ形式「◎カンマ〜〜で区切られたデータ」[次へ]
  4. 区切り記号「[レ]カンマ」[次へ][完了]
でエクセルに取り込めます。

xls.htm
<html> <head> <title>エクセル形式</title> <script language="javascript" > <!-- id="qpon";//自分の識別名に変更のこと dt=new Array(); n=0; ymd=(new Date()).getDay(); //過去6日分のログファイルを合成 cgi_url="http://qpon.cool.ne.jp/cgi-bin/";//ログファイルの保存場所(自分のサーバーに書きかえ) for(i=1;i<7;i++){ md=(ymd+i+1)%7; document.write('<'); document.write('script language="javascript" src="',cgi_url,id,'_',md,'.js"></script'); document.write('>'); } //--> </script> </head> <body> <script language="javascript" > <!-- document.write('月日,時刻,訪問元URL,閲覧ページ,接続IP<br>\n'); for(i=1;i<=n;i++){ dd=dt[i].split(","); document.write(dd[1],',',dd[2],',',dd[3],',',dd[4],',',dd[5],'<br>\n'); } //--> </script> </html>