블로그를 통해 애드센스를 하는 경우 방문자의 행동을 파악하거나 히트맵 등을 통해 내 글을 분석하고 페이지를 개선하는 것이 광고 효과 극대화에 도움이 됩니다. 이를 위해서 hotjar같은 유료 사이트를 돈 내고 쓰거나, 구글 GA4 및 태그매니저를 어렵게 사용합니다. 하지만, 마이크로로소프트의 Clarity(선명도)를 사용하면 무료로 아주 쉽게 분석할 수 있습니다.
Table Of Contents
마이크로소프트 선명도(Clarity) 소개
마이크로소프트의 Clarity는 웹사이트 관리자가 사이트 방문자의 행동을 더 잘 이해함으로써 웹사이트 경험을 개선하는 데 도움을 주는 무료 분석 제품입니다. Clarity는 사용자가 웹사이트와 어떻게 상호작용하는지 이해하는 데 도움이 되는 무료 사용자 행동 분석 도구입니다.
저는 Clarity라고 부르고 있기는 하지만, 마이크로소프트 웹마스터도구에서는 한글로 번역하여 선명도라는 용어로 소개하고 있습니다.
Clarity의 주요 기능은 다음과 같습니다
- 히트맵(Heatmaps)
- 모든 페이지에 대한 히트맵을 자동으로 생성합니다. 사용자들이 어디를 클릭하고, 무시하며, 얼마나 스크롤하는지 확인할 수 있습니다.
- 세션 재생(Session replays)
- 사용자의 웹사이트 방문 세션을 재생하여 사용자의 상호작용을 직접 볼 수 있습니다.
- 모바일 앱과의 호환성
- Clarity는 모바일 앱에서도 작동하며, 가벼운 SDK를 통해 모바일 앱에서의 인사이트를 얻을 수 있습니다.
Clarity에서 제공하는 위의 세 가지 기능중에 우리에게 중요한 것은 히트맵과 세션 재생입니다.
Clarity는 완전히 무료로 제공되며, 트래픽 제한 없이 모든 기능을 이용할 수 있습니다. 이것을 통해 사용자 행동에 대한 중요한 데이터를 수집하고 이해하고, 이를 통해 많은 우리의 블로그 페이지를 개선할 수 있습니다.
아래 글에서 하나씩 따라하면서 히트맵과 세션재생을 어떻게 확인할 수 있는지 설정부터 확인까지 알아보도록 하겠습니다.
마이크로소프트 Calrity 들어가기
마이크로소프트 Clarity는 마이크로소프트 웹마스터도구(Webmaster Tools)에서 찾아 들어갈 수 있습니다. 물론 직접 들어갈 수도 있습니다.
먼저 마이크로소프트 웹마스터도구에서는 아래와 같은 화면이 나타나는데, 여기에 최상위의 "Microsoft Clarity를 지금 사용할 수 있습니다. " 항목을 찾아서 시작하기를 누르는 것으로 시작할 수 있습니다.
다음으로 왼쪽 아래에 보이는 "마이크로소프트 선명도"를 눌러서 찾아 들어갈 수 있습니다.
위의 버튼을 누르면 아래와 같은 화면이 나타납니다. 여기에서도 세션 재생과 히트맵을 소개하고 있습니다.
이 화면들에서는 사용자에게 쉽게 설명해 주는 내용이 들어있으므로 한 번씩 읽어 보시면 좋을 것 같습니다. 이 항목들을 읽다 보면 가장 마지막에는 사이트의 성능에 방해를 주지 않는다고 되어있습니다. 실제로 그런지는 잘 모르겠는데, 아마도 매월 1억 명 이상이 사용한다니 큰 문제가 있을 것 같지는 않습니다.
지금까지 내용을 확인한 후 시작하기를 눌러 줍니다. 그러면 다음과 같은 화면이 나타나는데, 여기에서는 Clarity를 명료성이라고 해석했네요. ^^
이용약관을 한번 눌러 주시고 체크박스에 체크해 줍니다. 그리고 허용을 눌러서 승인해 줍니다.
이용약관은 아래와 같이 영어로 나옵니다. 저는 마이크로소프트의 의견을 믿으니 그냥 수락합니다 ^^.
여기까지 따라오셨으면 일단 마이크로소프트 Clarity에 가입 완료 된 것으로 보시면 됩니다. 이제는 실제 사용하는 방법을 알아보도록 하겠습니다.
마이크로소프트 Clarity 사용하기
마이크로소프트 Clarity에 가입하면 아래와 같은 화면이 나타납니다. 해당 화면에서는 애드센스에서 광고를 붙여넣기 하는 것과 유사하게 스크립트 코드를 제공해 줍니다. 이 코드를 내 티스토리 블로그나 구글 블로그 혹은 워드프레스 블로그 헤더아래에 넣으면 됩니다. <head> 아래에 적절한 위치에 넣어주기만 하면 수집이 시작됩니다.
마이크로소프트 Clarity 스크립트 추가하기
저의 경우 아래 이미지에서 처럼 티스토리 블로그의 gtag 아래에 붙어 넣었습니다.
만약 위에서 광고 코드 화면을 그냥 넘어가셨다면 마이크로소프트 Clarity 홈페이지에서 추적코드 받기 항목을 통해 다시 스크립트를 가져올 수 있습니다.
아래 버튼을 누르시면 마이크로소프트 Clarity 홈페이지에 바로 접속하실 수 있습니다.
마이크로소프트 Clarity 설정 및 사용법 알아보기
마이크로소프트 Clarity는 Clarity 투어라는 셀프 가이드 투어를 통해서 사용을 쉽게 할 수 있도록 알려 주고 있습니다.
위와 같이 설정을 하고 나면 Clarity 투어 화면이 제일 처음에 나타납니다. 그래서, 자연스럽게 이 가이드를 따라하게 유도해 줍니다. 저도 이 가이드를 따라서 실행해 보고나서 이 글을 작성할 수 있게 되었습니다.
사이트 범주 선택
먼저 제일 처음으로 사이트 범주를 선택할 수 있는 페이지를 들어갑니다. 그러면 등록한 사이트 범주라는 것을 설정하는 화면이 나타나는데, 이 범주는 다음과 같은 것들이 있습니다.
블로그, 마케팅, 컨설팅, 전자 상거래 등 분류를 선택할 수 있는 것들이 나타납니다. 여기서 우리는 블로그를 하고 있으므로 블로그라고 선택합니다.
google analytics 통합
사이트 범주를 선택한 후에는 google analytics를 통합할 수 있습니다. google analytics를 통합 연결하면 관련 정보를 대시보드에서 쉽게 확인할 수 있습니다.
위의 버튼을 눌러서 통합 화면으로 가면 아래와 같이 나타납니다. 설정을 눌러서도 이동할 수 있습니다.
아래 화면에서 시작 버튼을 눌러서 구글 애널리틱스와 통합을 간단하게 하실 수 있습니다.
시작을 누르면 다음과 같은 인증 화면이 나타나는데, 해당 계정을 연결하면 구글 애널리틱스에 연결이 됩니다.
연결할 때, 사이트를 연결하게되면 연결할 사이트를 선택해서 저장을 누르시면 됩니다.
이제 다시 구글 애널리틱스 통합 화면으로 돌아오면 아래와 같이 연결됨이라고 표시됩니다.
내 장치 IP 차단
다음으로 내 컴퓨터의 IP를 차단합니다. 이 과정은 해주시는 것이 좋습니다. 내 트래픽과 실제 방문자의 트래픽을 구분할 수 있기 때문에 잘못된 정보를 확인하는 일이 없습니다.
위의 IP 차단을 누르면 Clarity가 트래픽을 캡처해서는 안 되는 IP 주소를 관리합니다.
몇 가지 IP가 있을 수 있는데, 만약 집에서 스마트폰으로 하는 IP와 내 컴퓨터의 IP 등을 제거하는 것이 좋습니다.
이를 위해서는 내 스마트폰과 컴퓨터의 IP를 먼저 알아야 합니다.
내 장치들의 IP를 제외해야 Clarity에서 내 통계를 제외할 수 있습니다. 그러므로, 내 장치들의 공인 IP를 먼저 알아야 합니다.
그런데, 내 장치들의 공인 IP를 알려면, 다른 외부의 IP 추적 서버와 접속해서 알아낼 수 있는데, 가장 쉽게 알 수 있는 방법은 다음의 사이트에 접속해서 My IP Address가 1,2,3이 같은 값으로 나오는지 확인하시면 됩니다. 해당 값이 내 공인 IP 주소를 나타냅니다.
다음 링크를 눌러서 1,2,3을 확인합니다. 혹시 다시 한번 확인하시려면 위의 4번 버튼을 누르시면 됩니다.
추가로, 마이크로소프트 Clarity에 접속한 장치의 IP 주소는 아래 화면과 같이 Clarity IP 차단 화면에서 "내 현재 IP 차단"을 눌러서 알아낼 수 있습니다.
위에서 알아온 제외하고 싶은 장치들의 IP와 아래 Clarity의 IP 주소 차단 버튼을 누른 후 IP 주소를 입력하여 추가합니다.
아래와 같이 IP 주소가 차단되었으며, 우측에 휴지통 모양으로 제거할 수 있습니다.
라이브 데모 보기와 내 사이트 세션재생 확인하기
이제 다음으로는 라이브 데모를 보고 세션재생이 어떻게 동작하는지 알아보겠습니다. 세션재생은 실제로 사용자가 내 블로그 페이지에 접속해서 어느 부분을 읽고 어떤 버튼을 눌렀는지 확인할 수 있으며, 만약 버튼을 아무것도 누르지 않는다면 어떤 버튼으로 대체하는 것이 좋을지 등을 확인할 수 있는 인사이트를 제공합니다.
위의 Clarity 투어에서 라이브 데모 보기를 누르고 들어가면 가상의 대시보드와 사용자가 나타납니다. 이 화면에서 라이브 사용자를 누르면 동영상 형식으로 라이브 데모를 바로 보실 수 있습니다.
하지만, 우리가 궁금한 것은 내 사이트의 세션 재생 입니다. 이를 위해서 왼쪽 위에 "Clarity Live Demo"를 눌러서 내 사이트로 변경해 줍니다.
이 화면이 실제 내 사이트에대한 마이크로소프트 Clarity 대시보드입니다. 이제 막 시작했음에도 라이브 사용자를 바로 확인할 수 있습니다.
라이브 사용자의 동영상 카메라 모양을 클릭하면 아래와 같은 화면이 나타납니다. 왼편에는 내 사이트에 접속한 방문자가 어떤 행동을 했는지 녹화된 주소를 나타냅니다.
이제 아래와 같이 동영상 플레이를 할 수 있는 화면이 나타나고, 사용자가 스크롤을 하고 마우스 클릭한 것들이 모두 동영상으로 나타납니다. 이 화면을 통해 내가 버튼을 제대로 배치했는지, 과연 해당 버튼을 클릭하는지 등을 확인하실 수 있습니다.
저의 경우에도 제가 배치한 버튼을 누르지 않고 넘기는 것을 보고 버튼의 내용을 바꿔서 클릭을 유도하기도 하였습니다.
위의 화면은 사용자가 보고있는 화면이 플레이되는 영상의 중간을 캡처한 것입니다.
위처럼 사용자가 보다가 클릭하는 부분들이 이렇게 화면에 라이브로 보입니다. X 부분은 광고가 송출되는 부분입니다.
마이크로소프트 Clarity를 들어가시면 프로젝트(사이트)를 누르거나 왼쪽 상단에서 사이트를 선택하여 대시보드를 통해서 전체 내 사이트의 방문자 현황을 볼 수 있으며, 레코딩을 통해서 라이브 영상을 확인하실 수 있습니다.
히트맵으로 내 블로그 글의 방문자 분석하기
히트맵이란 앞서 설명드린 것과 같이 사용자가 어떻게 클릭하거나, 스크롤 하는지를 색으로 표현해 주는 것입니다. 그런데, 이 항목은 한글 페이지에서 "열 지도"라고 번역되어 나타납니다.
아래 이미지에서 제일 가운데 상단에서 열 지도를 누르면 내가 확인하려는 페이지의 히트맵 보기를 누르면 히트맵이 나타납니다.
아래 이미지는 제 블로그의 히트맵을 나타낸 것으로 가장 많이 클릭한 부분이 붉은 색으로 표시되어 있습니다. 마이크로소프트의 Clarity의 히트맵 장점 중 하나는 순위를 숫자로 표시해 주어 사용자가 더 편하게 가장 많이 클릭된 위치를 찾을 수 있다는 점입니다.
참고로 히트맵의 경우 바로 생성되지는 않고 하루 이틀 정도 기다려야 생성되는것을 확인하였으니 참고하시기 바랍니다.
마이크로 소프트의 Clarity 사용 후기 결론
오늘은 마이크로 소프트의 Clarity를 통해 내 사이트의 페이지를 분석해 보았습니다. 마이크로소프트의 Clarity는 티스토리나 구글 블로그 혹은 워드프레스를 운영하는 블로거에게 방문자의 반응을 자세히 분석할 수 있게 도와주는 매우 훌륭한 무료 도구입니다.
사용법도 매우 직관적으로 쉬워서 누구나 사용하고 페이지를 분석하여 방문자들이 더 많은 클릭을 할 수 있도록 도와주는 도구이므로, 애드센스를 하는 블로거라면 반드시 사용해야하는 도구라고 생각합니다.
저의 경우 구글 애널리틱스 GA4를 사용하기 위해서 공부를 해보려고 하는 시점에 마이크로소프트의 Clarity를 알고 나서는 굳이 구글 애널리틱스의 GA4를 사용할 필요성을 느끼지 못하였습니다.
최근에 구글 애널리틱스 방식의 변화로 인해 GA4의 자료도 매우 적고, 사용하기도 복잡해서 저는 굳이 GA4와 태그 매니저를 이용하지 않고 마이크로소프트의 Clarity를 사용하기로 하였습니다. 저도 구글 애널리틱스 사용법을 찾아가면서 이것저것 공부하면서 진행했지만, 그럴 필요 없이 이것만 있으면 블로거에게 필요한 모든 웹 로그 분석을 매우 쉽게 할 수 있습니다.
