Rev. 2.73

ajaxtracker.gif

얼마 전에 소개했던 "자바스크립트와 Ajax로 방문객 마우스 활동 기록하기"에서 아이디어를 얻어 어느 사이트에서나 사용 할 수 있는 마우스 트래킹 프로그램인 AjaxTracker를 만들고 배포합니다. Marcel Oelke씨의 movelogger.js를 참고하여 구축하였으며, 화면 스크롤 이벤트를 추가하고 구조를 조금 변경하였습니다. 서버단 언어는 PHP로 작성하였고 지정된 수 만큼 MySQL에 트래킹 정보를 기록합니다. 늘 그랬듯이 자바스크립트 코드는 PrototypeScriptaculous에 기반하고 있으며 PHP 및 MySQL 버전4 이상에서 작동합니다. 데모 페이지에서 직접 체험해 보세요.

기록되는 내용은 마우스 좌표와 클릭 그리고 스크롤 포지션입니다. 클릭 이벤트 기록에는 재생시 실제 이벤트를 발생시키기 위해 클릭된 영역의 링크와 엘리먼트 정보를 포함하여 메모리에 담아둡니다. 이렇게 취합된 데이터를 JSON으로 전송하여 그대로 DB에 집어 넣습니다.(귀찮아서;) 때문에 쿼리가 다소 무겁습니다. 이부분은 조금 더 효율적으로 개선할 예정입니다. install.php를 실행하여 설치 할 수 있으며, DB정보와 최대 기록 수(기본 300건)를 설정해야합니다. 300건을 기준으로 했을 때 DB소모량은 1~2MB입니다. 실제 사이트에 적용하는 방법은 동봉된 demo.php를 참고하시기 바랍니다. 관리자만 재생할 권한을 부여하는 방법은 환경에 따라 다르기 때문에 코드를 수정하는 작업이 불가피합니다. 이 부분은 프로젝트 위키에 별도로 정리하도록 하겠습니다. 모든 문의는 이 포스트에 댓글로 남겨 주시기바랍니다.

Comments

mouselogger.gif

Marcel Oelke씨는 자바스크립트와 Ajax를 이용하여 웹사이트에 방문한 사용자의 마우스 움직임과 클릭을 기록할 수 있는 movelogger.js를 만들었습니다. 페이지에 머물러있는 동안 지속적으로 트래킹하고 서버에 Ajax로 포스팅하는 방식입니다. 놀랍게도 재생 가능한 이벤트로 파싱되어 리플레이하는 데모 페이지를 공개했습니다. 이 것을 응용하면 별도의 트래킹 응용프로그램을 설치할 필요없이 방문객의 마우스 활동을 실시간으로 적나라하게 관찰할 수 있으며, 동선 분석 등에 활용할 수 있습니다. 자칫하면 나쁜 용도로 사용될 수도 있겠군요.

movelogger는 PrototypeScriptaculous에 기반하여 작성되었으며 서버사이드 언어로는 PHP를 사용했다고 합니다. 데모에서 기록되는 마우스 트래킹은 세션이 끊어지는 즉시 삭제되니 안심하라고 하네요. 자바스크립트가 넘지 말아야 할 선을 조금씩 넘는 듯한 느낌을 받는 것은 비단, 저 뿐만은 아니겠지요... 아무튼, 흥미롭습니다! 특정 사용자의 마우스 다루는 모습을 구경하는 재미도 쏠쏠하겠습니다! <- 나쁜생각

Comments