콘텐츠로 이동

Clarity 설치 방법

트래킹 코드 설치

웹사이트에서 Clarity를 사용하려면 트래킹 코드를 설치해야 합니다. Clarity 계정에 추가한 각 웹사이트에는 고유한 트래킹 코드가 있습니다. 동일한 스크립트를 웹사이트의 여러 서브도메인에 추가할 수 있습니다.

프로젝트를 선택하고 Settings > Setup으로 이동합니다. 프로젝트 추가 방법을 참고하세요.
진행할 설치 방법을 선택합니다.

Clarity를 설치하는 세 가지 방법이 있습니다:

서드파티 플랫폼에 설치
수동 설치
NPM으로 설치

팀 멤버에게 코드를 공유하여 설치를 도와줄 수도 있습니다.

서드파티 플랫폼에 설치

Shopify, SquareSpace, Wix, WordPress 등 서드파티 플랫폼에 Clarity 트래킹 코드를 설치할 수 있습니다. 지원되는 서드파티 플랫폼 목록을 참고하세요.

View all platforms를 선택하면 지원되는 플랫폼 목록을 볼 수 있습니다.
나열된 플랫폼 중 하나를 선택하여 Clarity를 설치합니다. 각 플랫폼을 선택하면 해당 플랫폼의 설치 안내를 따르세요.
사용 중인 플랫폼이 목록에 없으면 I don’t see my platform을 선택하여 요청을 제출할 수 있습니다.
플랫폼 이름을 입력하고 Submit을 선택합니다. 향후 해당 플랫폼을 지원할 수 있도록 노력하겠지만, 지금 바로 Clarity를 사용하려면 수동으로 코드를 설치할 수 있습니다.

수동 설치

수동 설치를 하려면 Get tracking code를 선택합니다.
코드를 복사하여 웹사이트나 웹 앱의 <head> 섹션에 붙여넣습니다.

NPM으로 설치

NPM 연동을 사용하면 JavaScript 프로젝트에 Heatmap, Session Recording 등 고급 분석 기능을 원활하게 통합할 수 있습니다. 시작하려면 NPM에서 제공하는 Clarity 패키지를 사용하고, 안내에 따라 초기화 코드를 사이트에 추가하세요. 자세한 내용은 NPM 문서를 참고하세요.

NPM 설치 안내 보기

팀 멤버에게 코드 공유

설치를 도와줄 수 있는 팀 멤버에게 코드를 공유하려면 이 방법을 선택하세요.

Share code를 선택합니다.
팀 멤버의 이메일 주소를 입력하고 Submit을 선택합니다. 트래킹 코드와 설치 안내가 포함된 이메일이 팀원에게 발송됩니다.

설치 확인

Clarity가 올바르게 설치되었는지 확인하는 두 가지 방법이 있습니다:

Clarity 프로젝트에서 확인

스크립트를 추가하면 프로젝트의 Recording과 Dashboard 데이터를 즉시 확인할 수 있습니다. 트래킹 코드를 추가하자마자 현재 라이브 사용자 수와 함께 실시간 데이터를 볼 수 있습니다:

라이브 레코딩 수 확인

Watch now를 선택하면 라이브 사용자를 바로 확인할 수 있습니다.

POST 요청으로 확인

사이트와 상호작용하는 동안 https://www.clarity.ms/collect로의 POST 요청을 확인하세요. 요청을 확인하는 방법은 다음과 같습니다:

웹사이트에서 마우스 오른쪽 버튼을 클릭하고 Inspect를 선택합니다.
Network 탭으로 이동하고 collect 파일을 선택합니다. POST 요청이 표시됩니다.
프로젝트 대시보드에서 데이터를 확인했다면, Heatmap을 통해 사용자가 웹사이트와 어떻게 상호작용하는지 살펴보세요.

연동 설정

이 섹션에서 선택적으로 Google Analytics, Google Tag Manager를 연동하고 관리할 수 있습니다.

Google Analytics 연동

Google Analytics 연동을 통해 Clarity가 Google Analytics 대시보드와 세션 플레이백을 연결할 수 있습니다.

연동을 원하면 Getting started를 선택하세요. Google Analytics 연동에서 자세히 알아보세요.

GA 연동에서 Getting started 선택

Google Tag Manager 연동

Google Tag Manager 연동은 자동으로 감지됩니다.

연동을 원하면 Finish setup을 선택합니다.
연동을 원하지 않으면 Sign in with a different account를 선택합니다.
드롭다운에서 GTM account, GTM container를 선택하고 Create and publish를 선택합니다.

고급 설정

고급 설정에서 쿠키와 봇 탐지를 관리할 수 있습니다.

쿠키

Clarity는 세션 데이터를 수집하기 위해 쿠키를 사용합니다. 토글 버튼으로 쿠키를 활성화하세요.

고급 설정의 쿠키

이 설정을 끄면 동의(consent)를 전달해야 합니다. Recording이 다중 페이지 세션으로 연결되지 않습니다. 쿠키 사용 커스터마이즈 방법을 알아보세요.

쿠키 끄기

봇 탐지

기본적으로 Clarity는 봇 트래픽을 감지하여 총 세션 수와 분석에서 제외합니다. 대시보드 상단에서 제외된 봇 세션 수를 확인할 수 있습니다.

대시보드에서 봇 제외

토글 버튼으로 봇 탐지를 끄거나 다시 켤 수 있습니다. 봇 탐지를 끄면 Clarity가 봇 트래픽을 감지하지 못하며 총 세션 수에서 제외되지 않습니다.

봇 탐지 켜기

Clarity 호환성

Clarity는 최소한의 코드로 대부분의 사이트에서 작동합니다. 일부 최신 브라우저 API가 필요하지만, 구형 브라우저에서도 예외를 발생시키지 않습니다.

모든 사이트 아키텍처를 지원하지만, 웹사이트의 Canvas나 서드파티 iFrame 요소 내부는 캡처할 수 없습니다.

FAQ

자주 묻는 질문에 대한 답변은 설치 FAQ를 참고하세요.

더 알아보기

번역: jh.lee@medibuilder.com with Claude Code