Ssemi Laboratory

사용자(클라이언트)들의 정보를 파악하여 그들의 상황에 알맞은 좀 더 멋진 화면을 구성하거나, 코드를 만드는데 필요한 것은 역시 정보입니다.
웹이 발전하면서 사용자들의 요구에 맞게 웹페이지가 변하기 시작했습니다.
웹이 사용자의 정보를 얻어 가공하고, 사용자의 요구에 맞게 코드를 구성하고 개인화 하는데는 아주 약간의 시간이 필요했을 뿐입니다.

이번에 소개할 것은 간단하게 클라이언트의 정보를 모아주는 Javascript Function 입니다.
깔끔하고, 간단하게 웹의 클라이언트 기반에서 얻을 수 있는 쓰임새 있는 유용한 정보를 모아오는 소위 Tracker기능의 자바스크립트 합수입니다.

이미 웹 개발자들에게서 많이 알려져 있는 <IMG>이미지 태그를 통해서 스크립트를 실행하는 방법으로 정보를 얻는 방법을 다들 아시리라 생각합니다.

* 이미지 태그로 주소를 실행하는 방법을 통해 필요한 정보들을 해당 파일로 보내는 방법입니다.

<img src="http://주소/파일.php?p1=value1&p2=value2&p3=value3....." width="1" height="1" border="0" style="visibility:hidden;" />

example)
http://주소/counter.php?Doc_Url=/test.php&Ccpu=x86&
CuserAgent=mozilla/4.0 (compatible; msie 6.0; windows nt 5.2; .net clr 1.1.4322)&
Clang=ko&Cje=1&Cce=1&Cref=bookmark&Ctz=9&Ccd=32&Cswh=1280*1024&
Cid=ua=IE&ver=6.0&lang=ko&resolution=1280x1024&color_depth=32&platform=Win32&url=http%3A//www.ssemi.net/&refer=

하지만 AJAX가 생긴 이래로 수많은 스크립트 방식에 변화가 찾아오게 되었습니다.
아니 정확히는 XMLHttpRequest/XMLHTTP의 쓰임이랄까요?

AJAX가 유명해지고 구글에서는 Google Analytics를 공개했고, 이전부터 국내에서는 랭키닷컴의 카운터/웹로그 분석의 웹로그 분석 사이트들이 정보를 모으고 통계를 내고 있었습니다.

자! 간단하게 클라이언트 브라우져의 정보를 추적해봅시다!!

Tracking Client Browser Infomation

사용자 브라우져의 기본적인 유용한 정보를 추적합니다

▶ View Source

// Your site address here!

var HomeUrl = "http://ssemi.tistory.com";





function Tracker()

{

   var ustr = navigator.userAgent;

   var info = [];

   var is_safari = ustr.indexOf("Safari") != -1;

   var is_op = ustr.indexOf('Opera') != -1;

   var is_ie = ustr.indexOf('MSIE') != -1;

   var is_ff = ustr.indexOf('Firefox') != -1;

   

   if (is_op)

   {

       info['ua'] = 'Opera';

       info['ver'] = new RegExp('Opera ([0-9.]+)','gi').exec(ustr)[1];

   }        

   else if (is_ie)

   {

       info['ua'] = 'IE';

       info['ver'] = new RegExp('MSIE ([0-9.]+)','gi').exec(ustr)[1];

   }

   else if (is_ff)

   {

       info['ua'] = 'Firefox';

       info['ver'] = new RegExp('Firefox\/([0-9.]+)','gi').exec(ustr)[1];    

   }

   else if (is_safari)

   {

       info['ua'] = 'Safari';

       info['ver'] = new RegExp('Safari\/([0-9.]+)','gi').exec(ustr)[1];    

   }

   else

   {

       info['ua'] = 'Unknown';

       info['ver'] = '';

   }

   

   var refer            = document.referrer || '';

   var url                = document.location.href.replace(new RegExp(HomeUrl,'gi'),'');

   info['lang']         = navigator.userLanguage ? navigator.userLanguage : navigator.language ? navigator.language : '';

   info['resolution']     = screen.width && screen.height ? screen.width + 'x'+ screen.height : '';

   info['color_depth'] = screen.colorDepth ? screen.colorDepth : '';

   info['platform']     = navigator.platform ? navigator.platform : '';

   info['url']            = escape(url.replace(new RegExp('#.+?$','gi'),''));

   info['refer']        = escape(refer.indexOf(HomeUrl) == -1 ? refer : ''); 



   data = [];

   for (var i in info)

       data.push(i+'='+info[i]);

   

   var s = data.join("&");

}

▶ 사용자 정보

코드를 보면 알 수 있듯이 변수 s에 기록하는 방문자 정보는, 클라이언트쪽에서 브라우져, 브라우져 버젼, 운영체제, 언어설정, 화면 해상도, 컬러수, 레퍼러, 현재 보고 있는 페이지 정보를 전송합니다.

▶ 결과

ua=IE&ver=6.0&lang=ko&resolution=1280x1024&color_depth=32&platform=Win32&url=http%3A//ssemi.tistory.com/&refer=

▶ 응용하기

변수 s에 클라이언트 정보가 담기기 때문에 해당 변수를 서버로 전송합니다.
전송할때는 위에서 말한 XMLHttpRequest/XMLHTTP를 사용하여 전송합니다.

var ajax = new Ajax();
ajax.loadText('/Tracker.php?rnd='+Math.random(),'POST',s);


* Ajax()는 사용자 정의 개체로서 본 내용에서는 제공하지 않습니다.
(출처를 확인하거나 XMLHttpRequest/XMLHTTP를 통한 전송 코드 입니다)

서버쪽(Tracker.php)에서는 방문자 IP(REMOTE_ADDR)와 이 IP를 가지고 국가 정보를 기록할 수 있습니다. (use ip2nation)

▶ 마치며

실제로 본 코드로는 할 수 있는 것이 아무것도 없다고 해도 과언이 아닙니다.
웹의 특성상 클라이언트의 정보를 수집하고, 가공해서 보여주는 것은 서버에서 처리해야 하기 때문입니다.
본 내용에서는 서버에서 처리하는 내용을 넣지 않았습니다. 클라이언트의 정보를 수집까지는 도와드려도, 가공하는 몫은 여러분에게 달려 있기 때문입니다.
본 내용에서의 중요점은 간단한 함수 하나를 가지고 정보를 가져오는 것 + XMLHTTP/XMLHttpRequest를 통해 전송하는 방법에 대한 내용만을 전해드립니다.

• Wizz님의 블로그 | 마이위쯔블로그 통계 페이지의 소스 및 설명를 사용/인용 하였습니다 :)