Rooroorooroo [Issues & Opinions]: 자기 방문 제외하는 방문자 카운터 만들기(iframe, JS만 필요)

한국의 블로그는 대개 주인의 방문은 무시한다. 하지만 블로거의 경우 로그인을 한 상태에서도 자신의 방문을 통계에 넣어 제대로 방문자 숫자를 알기 어렵다. 구글 아날리틱스를 통해 자신을 제외시킬 수도 있지만, 역시 방문자수를 바로바로 확인하기엔 GA가 무거운 감이 없지 않아 있다.

모바일로 확인하기엔 소중한 데이터가 너무 많이 닳는다.

그래서 소개한다. 자기 방문을 제외하는 가벼운 방문자 카운터. 서버에서 대부분의 작업을 마치고 아주 간단한 데이터만 보내므로 데이터를 크게 절약할 수 있고, 웹페이지이므로 어디서나 볼 수 있고 호환성이 좋다는 게 매력이다.

1. php(JS와 반대로 서버에서 구동)를 작동시켜줄 무료 호스팅 사이트에 가입한다. Hostinger.kr을 추천한다. 영원히 무료이고 가입도 간단하며 스팸 메일도 오지 않는데다 거의 24시간 호스팅이 잘 작동한다.(간혹 파일이 초기화되거나 날아가기도 하는데 원인은 모르겠다. 반드시 백업해두길 바란다.)

2. 호스팅 경로에 다음과 같은 파일들을 저장한다. 파일은 메모장으로 작성한 후 저장할 때 '모든 파일'로 지정한 후 확장자를 지정한다. 인코딩은 UTF-8로 설정한다.

또 모든 파일이 같은 디렉토리 안에 존재해야 한다. 하나의 폴더로 묶으면 편리할 것이다.

(자세한 설명은 읽어두면 더욱 좋다.)

#####write.php#####

<?php
date_default_timezone_set("Asia/Seoul");
if (isset($_GET["reset"])){
if($_GET["reset"]=="true"){
$cfile=fopen("save.txt","w");
fclose($cfile);
echo "<html><head></head><body><script>alert('reset');</script></body></html>";
}
}else{
$cfile=fopen("save.txt","r");
$getc=fread($cfile,9999999);
fclose($cfile);
if(isset($_GET["n"])){
if($_GET["no"]=="n"){}}
else{
$getc=$getc.intval(time()-(43*365*24*60*60))." ";}
$geta=explode(" ",$getc);
$ct=count($geta);
$ii=0;
$cur=0;
$getc="";
$now=time()-(43*365*24*60*60);
$scs=fopen("savecountshow.txt","r");
$getscs=fread($scs,99);
$getscs=explode(" ",$getscs);
fclose($scs);
while($ii<($ct-1)){
if($now-$geta[$ii]<=$getscs[2]*60*60){
$cur++;}
if($now-$geta[$ii]<=$getscs[0]*60*60){
$getc=$getc.$geta[$ii]." ";}
$ii++;
}
$cfile=fopen("save.txt","w");
fwrite($cfile, $getc);
fclose($cfile);
echo "<html><head></head><body><div id='countdiv' style='color:#00f;'>".$cur."</div></body></html>";
}
?>

설명:이 페이지를 불러오면 save.txt에 방문 시간이 기록된다. save.txt를 초기화하려면 url에 ?reset=true를 덧붙이면 된다.

JS를 통해 당신의 방문을 걸러내 ?n=n을 추가한 url을 불러오면 당신의 방문을 제외한 카운터를 만들 수 있다. 다음과 같이 쓰면 된다.
<iframe id="visitcounter" width="60" height="30"></iframe>
<script>
function loadCounter(b){
var vc=document.getElementById('visitcounter');if(b==1){
vc.src='[path]/write.php?n=n';
}else{
vc.src='[path]/write.php';}
}

if([자기 방문 감지]){loadCounter(1);}
else{loadCounter(0);}
</script>

기록 후에는 최근 30분 내의 방문수가 표시된다.

페이지를 불러오면 이렇게 방문수를 보여준다. iframe에 넣으면 카운터가 된다.

#####save.txt#####
(빈문서)
설명:방문 시간이 기록되는 파일이다. 아무 기록이 없을 때에는 완전히 빈 문서이며, 날짜를 기록할 때에는'21829361 21829384 '와 같이 [날짜-빈칸-날짜-빈칸...] 형식으로 저장된다.(만약 이 문서를 수정한다면 반드시 이에 맞추어야 한다.)

빈칸에 주의한다.

#####datead.php#####

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body> <?php date_default_timezone_set("Asia/Seoul"); $cfile=fopen("save.txt","r"); $getc=fread($cfile,999999); fclose($cfile); $geta=explode(" ",$getc); $ct=count($geta); $getd=""; $scs=fopen("savecountshow.txt","r"); $getscs=fread($scs,99); $getscs=explode(" ",$getscs); fclose($scs); $ii=0; while($ii<($ct-1)){ if(intval(time())-intval($geta[$ii])-43*365*24*60*60<=$getscs[1]*60*60){ $geth[$ii]=date("H", intval($geta[$ii])+(43*365*24*60*60)); if(substr($geth[$ii],0,1)=="0"){$geth[$ii]=substr($geth[$ii],1,1);} $geti[$ii]=date("i", intval($geta[$ii])+(43*365*24*60*60)); if(substr($geti[$ii],0,1)=="0"){$geti[$ii]=substr($geti[$ii],1,1);} $gets[$ii]=date("s", intval($geta[$ii])+(43*365*24*60*60)); if(substr($gets[$ii],0,1)=="0"){$gets[$ii]=substr($gets[$ii],1,1);} $getd=$getd.date("Y-m-d a h:i s초", intval($geta[$ii])+(43*365*24*60*60))."<br>"; $getb[$ii]=true; }else{ $getb[$ii]=false; } $ii++; } echo $getd."<br>now:<br>".date("Y-m-d a h:i s초",time()); ?>
<br> <canvas width='800px' height='800px'> <script> var cv=document.getElementsByTagName('canvas')[0]; var ctx=cv.getContext('2d'); ctx.beginPath(); ctx.strokeStyle='#ccc'; ctx.arc(400,400,300,0,2*Math.PI); ctx.lineWidth=1.5; ctx.stroke(); ctx.beginPath(); ctx.fillStyle='#444'; ctx.arc(400,400,150,Math.PI,0); ctx.fill(); ctx.beginPath(); ctx.fillStyle='#bbb'; ctx.arc(400,400,150,0,Math.PI); ctx.fill(); ctx.beginPath(); ctx.fillStyle='rgba(128,128,192,.5)'; ctx.moveTo(400,400); var rot1=<?php if($ct!=0){ echo (60*60*$geth[$ct-2]+60*$geti[$ct-2]+$gets[$ct-2])/(24*60*60); }?>-0.25; ctx.arc(400,400,300,(rot1-<?php echo $getscs[2]?>/24)*2*Math.PI,rot1*2*Math.PI); ctx.lineTo(400,400); ctx.fill(); <?php $ii=0; while($ii<($ct-1)){ if($getb[$ii]==true){ echo "ctx.begin".strtoupper("p")."ath();"; echo "ctx.fill".strtoupper("s")."tyle='rgba(0,0,0,0.35)';"; $rot=(60*60*$geth[$ii]+60*$geti[$ii]+$gets[$ii])/(24*60*60); echo "ctx.arc(".(400+300*sin($rot*2*pi())).",".(400-300*cos($rot*2*pi())).",10,0,2*".strtoupper("m")."ath.".strtoupper("pi").");"; echo "ctx.fill();"; } $ii++; } $nowh=date("H",time()); if(substr($nowh,0,1)=="0"){$nowh=substr($nowh,1,1);} $nowi=date("i",time()); if(substr($nowi,0,1)=="0"){$nowi=substr($nowi,1,1);} $nows=date("s",time()); if(substr($nows,0,1)=="0"){$nows=substr($nows,1,1);} $rotn=($nowh*60*60+$nowi*60+$nows)/(24*60*60); echo "ctx.begin".strtoupper("p")."ath(); ctx.line".strtoupper("w")."idth=2; ctx.stroke".strtoupper("s")."tyle='#000'; ctx.move".strtoupper("t")."o(400,400); ctx.line".strtoupper("t")."o(".(400+320*sin($rotn*2*pi())).",".(400-320*cos($rotn*2*pi()))."); ctx.stroke();"; ?> ctx.beginPath(); ctx.fillStyle='#000'; ctx.arc(400,400,5,0,2*Math.PI); ctx.fill(); </script></body></html>

설명:방문 기록을 그래프로 보여주는 페이지다. 용량이 작아 수시로 확인하기 좋다. 현재로부터 24시간 내의 방문을 나타내며, 3일이 지난 기록들은 save.txt에서 삭제한다. canvas 태그를 사용하므로 낮은 버전의 브라우저에서는 보여지지 않을 수 있다.

남색 부채꼴은 마지막 방문 시간으로부터 30분 전까지를 나타낸다. 블로그나 사이트의 마지막 방문자는 그 부채꼴 안의 방문수를 보게 된다.

원 한 바퀴가 24시간이다. 자주 보면 익숙해질 것이다.

#####savecountshow.txt#####

72 24 0.5

설명:형식은 다음과 같다.
[(save.txt에 기록되는 기간(hour))
-빈칸-
(datead.php가 기록을 보여주는 기간(hour))
-빈칸-
(write.php가 표시하는 방문수와 datead.php에 표시되는 남색 부채꼴의 기간(hour))]
이것을 바꾸면 즉각 반영된다.

#####deletelast.php#####
<?php $cfile=fopen("save.txt","r"); $getc=fread($cfile,9999999); fclose($cfile); $geta=explode(" ",$getc); $ct=count($geta); $ii=0; $getc=""; while($ii<($ct-2)){ $getc=$getc.$geta[$ii]." "; $ii++; } $cfile=fopen("save.txt","w"); fwrite($cfile, $getc); fclose($cfile); echo $getc; ?>

설명:이 페이지를 불러오면 가장 최근의 방문 기록을 삭제하며 save.txt의 결과를 볼 수 있다.

잘못된 기록이 있을 때 사용하면 된다.

위의 작업을 마치고 나면 당신만의 방문 카운터 위젯이 완성된다.