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

Got something to add? You can just leave a comment.

  • 오옷, 멋집니다~

    reply edit

  • 호~ 감솨합니닷!

    reply edit

  • 진짜 굉장하네요!! 신기신기

    reply edit

  • 설치해보세요.. 스토킹하는 재미가 쏠쏠합니다;;

    reply edit

  • 리브리스 리브리스

    광고주한테는 귀가 솔깃하겠네요. 사용자의 마우스 움직임을 통계적으로 분석해 볼 수 있으니까요.
    좀더 지능적인 플래쉬 광고가 나오지나 않을까 우려됩니다 ㅋㅋ

    reply edit

  • 그럴수도 있겠군요;;

    reply edit

  • 아이트래킹에 그것에는 미치지 못하겠지만.. 상당히 의미있는 데이터들을 뽑아 낼 수 있을 것 같습니다.
    1명의 기록을 레코딩하여 재현하는것도 좋지만...
    여러명의 마우스 움직임을 통계적으로 산출하여 시각화해서 보여준다면...
    유료화하여 제공하셔도 좋을 것 같습니다.

    제가 1등으로 등록하죠! :)

    reply edit

  • 히트맵(http://firejune.com/1178)처럼 마우스 움직임까지 시각화하면 대박이겠네요.

    reply edit

  • 이거 죽이겠는데요..ㅋ
    광고주도 광고주지만, 중소형업체에서 웹분야회사들은 필요하지 않을까합니다.^^
    잘써보도록 할께요..궁금점도 물어보고

    reply edit

  • 넵, 언제든지 질문주세요!

    reply edit

  • 이전 포스트를 보고 팀원들하고 솔루션으로 만들까.. 이야기했었는데, 만드셨군요. ㅋㅋ

    reply edit

  • 솔루션이라고 하기에 너무 조악하지만, 시작했으니 큰 그림도 그려봐야겠어요.

    reply edit

  • JKwang JKwang

    안녕하세요^^혹시..ASP로는 없을까요?;;아니면 작동원리라도 간단히..설명해주실순 없을까요??..ㅠ_ㅠ

    reply edit

  • 마우스 이벤트 데이터와 발생시각 그리고 부수적인 정보들을
    JSON 자료로 만들고 브라우저에서 떠날 때(unload) 서버에 일괄적으로 저장시키는 방식입니다.

    reply edit

  • JKwang JKwang

    참..가장궁금한건 트래킹 서비스 해주는 싸이트보면 clixpy.com 같은경우 DIV로 감싼다음에 사용자가 조작을 못하도록 해놓고 실제로 페이지를 불러와서 조작을 하던데요..이런건 어떻게 하는지 정말 궁금합니다;;

    reply edit

  • 투명한 DIV나 이미지를 겹치게 하는 방법으로 조작을 못하도록 막을 수 있습니다.

    reply edit

  • JKwang JKwang

    공개해주신 파일에는 tracker.conf.php 파일이 첨부되어 있지 않습니다만;;이게 뭔지 모르겠네요;;

    reply edit

  • JKwang JKwang

    하나만 질문 남겨도 될까요??제가 따로 추가로 keyup이벤트를 추가해줬는데요
    json값까지는 추가되서 넘어갑니다만..리플레이할때 리플레이가 안되네요;;
    어떤걸 추가되줘야 하는지 모르겠습니다.ㅠ_ㅠ;;
    사용자가 input 에 값을 입력했을때 그것까지도 보여줄려고 하고 있거든요..;;
    도움좀 부탁드리겠습니다^^;;

    reply edit

  • JKwang JKwang

    keyup 이벤트는 해결했습니다^^;;DB에서 값을 안넘겨줘서 그런거였네요^^감사합니다~

    reply edit

Your Reaction Time!

captcha

avatar