Who's among.us - 실시간 접속자 방문통계

웹사이트나 블로그에 현재 접속자를 표기하고 싶을때가 있습니다. 구글 애널리틱스나 네이버 애널리틱스는 이를 비롯해 더 많은 기능을 보유하고 있지만 간단한 기능과 위젯표기를 원한다면 아래에서 설명하는 위젯을 추천합니다.

who's amung.us 소개

웹 사이트 또는 블로그에 대한 무료 실시간 통계를 제공한다. 프로 버전은 유료이고 더 많은 기능을 지원한다. 블로그나 웹사이트 페이지에 위젯 코드를 추가하면 작동하기 시작한다. 위젯은 현재 웹사이트를 탐색하는 사람의 수(현재 접속자)를 표시한다. 또한 크롬이나 파이어폭스를 위한 플러그인을 제공한다.

HOME

Who's among.us

위젯 기능

위젯을 클릭하면 상세한 실시간 통계 페이지를 보여준다.

• 방문자가 사이트에 동시에 접속한 수량을 시간 별로 확인할 수 있다.

  

• 현재 읽고 있는 페이지의 목록을 확인할 수 있다. 각 페이지 옆에 머문 시간을 표기해 준다. 또한, 가장 인기있는 페이지를 볼 수 있게 변경할 수 있고 각각에 얼마나 많은 사람들이 몰려있는지 확인할 수 있다.

  

• 지도형으로 제공되는 것은 통계적인 부분은 아니지만 어디서 접속하고 있는지를 확인할 수 있다. 실시간으로 그들의 도시를 표현한다. 붉은 색 핀은 현재 접속중인 사람을 표시하고 파란 핀은 과거에 접속했던 것을 표시한다.

  

who's amung.us 위젯 사용법

사이트의 widgets 메뉴를 선택하면 각 위젯별 코드를 제공한다. 새로고침할때 마다 새로운 코드를 발급하니 참고하자.

클래식 위젯

기본으로 제공되는 위젯의 모양이다.

색깔입힌 위젯

색상을 선택하고 코드를 복사해서 사용하면 된다.

작은 위젯

작은 크기의 위젯도 제공한다.

탭 위젯

웹페이지에 고정된 형태로 위치를 지정할 수 있다. 원하는 형태로 지정하면 코드가 변경되니 그것을 복사해서 사용하면 된다.

맵 위젯

세계지도 위에 접속자를 표기한다.

크롬과 파이어폭스용 위젯

브라우저에서 웹사이트에 얼마나 많은 사람이 접속하고 있는지 확인한다.

• 크롬 플러그인
• 파이어폭스 플러그인

적용하는 예

일반적으로, 발급된 코드를 원하는 위치에 붙여넣기하면 이는 잘 표현된다. 워드프레스나 티스토리 같은 CMS을 이용하는 경우에는 주어진 편집기능등을 이용해서 직접적인 코드 수정없이 적용이 가능하다.

티스토리

티스토리에서도 태그입력기를 이용해 삽입할 수 있다. 물론 직접 스킨을 수정해도 된다.

1. 티스토리 관리자로 로그인한 후에, "플러그인 설정"에서 관리 및 통계의 "태그 입력기"를 추가한다.

   

2. 사이드바에서 기본 모듈에 추가된 태그 입력기를 원하는 사이드바에 위치시키고 "편집" 버튼을 누른다.

   

3. 팝업창이 뜨면 이름을 적당히 정하고, 치환자 상자에 who's among.us 위젯 코드를 삽입한다. 사용자 모듈에 저장을 체크하면 사이드바의 사용자 모듈에 저장되고 이후에 다시 불러올 수 있다.

   

4. 아래는 블로그에 표기되는 상태다.

   

워드프레스

프리 버전 혹은 프로 버전 계정에 이 방법을 사용할 수 있다.

워드프레스 사이트에서 제공하는(예: yourblogname.wordpress.com) 호스팅은 약간 다른 코드를 필요로 하며, 맵 위젯을 직접적으로 포함시킬 수 없다. 만일 자신의 설치형 워드프레스 사이트를 운영중이라면 제공되고 있는 일반 코드가 잘 작동할 것이다.

1. 워드프레스 계정에 접속하고 Appearance(외모) > Widgets(위젯) 옵션을 선택한다.

   

2. 스크롤을 내려 "Text" 위젯 옵션을 선택하고, 페이지의 메인 사이드바 영역에 드래그해 놓는다.

   

3. 위젯 영역에 제목을 부여하고(만일 원한다면), 큰 텍스트 박스에 위젯 코드를 붙여넣는다. 이후에 "Save(저장)"버튼을 누르고 "Close(닫기)" 버튼을 누른다.

   

4. 위젯은 당신의 블로그에 표시될 것이다.

   

IE8 문제 해결

amung에서 배포하는 스크립트가 IE8에서 오류를 내뿜기에 방법을 찾아보았는데 과거 방식의 삽입방법을 사용한다는 글을 발견했다.

<div class="amung">
    <a href="http://whos.amung.us/stats/cp8neo95czmf">
    <img src="http://whos.amung.us/swidget/cp8neo95czmf" title="Click to see how many people are online" alt="실시간 방문자" /></a>
</div>

링크부분의 stats/ 뒤 부분에 자신의 삽입 ID(코드에서 자동으로 주어지는), 또한 Img 에서도 마찬가지로 변경해서 사용한다.