본문 바로가기
카테고리 없음

마이크로소프트 클라리티(Microsoft Clarity)를 Google Tag Manager(GTM)로 설치하는 방법

by 마켓피디아 실습 2024. 9. 8.

마이크로소프트 클라리티(Microsoft Clarity)는 웹사이트 방문자의 행동을 분석하고 사용자 경험을 향상시키는 데 도움을 주는 무료 웹 분석 도구입니다. 클릭, 스크롤, 히트맵, 세션 기록 등 다양한 데이터를 제공하여 웹사이트의 개선점을 찾는 데 큰 도움이 됩니다. 이 글에서는 클라리티 사용화면 예시를 보고, Google Tag Manager(GTM)를 사용하여 마이크로소프트 클라리티를 쉽게 설치하는 방법을 단계별로 설명하겠습니다.

 

클라리티 사용 예시 - 쿠팡 가격 변화 추적앱 똑소

클라리티 사용 화면1 - 유저 행동을 동영상으로 볼 수 있다
클라리티 사용 예시2 - 히트맵

 

 

1. Microsoft Clarity 계정 생성 및 프로젝트 설정

먼저, Microsoft Clarity 계정을 만들고 프로젝트를 설정해야 합니다.

  1. Microsoft Clarity 홈페이지에 접속해 로그인합니다. 계정이 없으면 Microsoft 계정을 통해 무료로 가입할 수 있습니다.
  2. 로그인 후, “New Project” 버튼을 클릭하여 새로운 프로젝트를 생성합니다. 프로젝트 이름과 웹사이트 URL을 입력하고 Create를 클릭합니다. 그러면 Clarity가 설치될 웹사이트 프로젝트가 생성됩니다.

마이크로소프트 클라리티 사용법 - 새 프로젝트 생성

2. Google Tag Manager(GTM) 계정 설정

다음으로, Google Tag Manager(GTM)에서 태그를 추가해 Clarity 스크립트를 실행할 준비를 합니다.

  1. Google Tag Manager에 로그인합니다. 계정이 없다면 새로 생성합니다.
  2. GTM에서 새로운 **컨테이너(Container)**를 만듭니다. 컨테이너는 웹사이트에 설치될 모든 태그를 관리하는 저장소입니다.
  3. 컨테이너 코드(GTM 코드)를 웹사이트의 <head>  <body> 태그에 삽입하여 GTM을 웹사이트에 연결합니다.

3. Clarity 트래킹 코드 복사 및 GTM에 태그 추가

  1. Microsoft Clarity 대시보드에서 Tracking Code 섹션을 찾아 복사 버튼을 클릭합니다.
  2. GTM으로 돌아와 새로운 태그 추가 버튼을 클릭합니다.
  3. 태그 구성에서 사용자 정의 HTML을 선택한 뒤, Clarity 트래킹 코드를 붙여넣습니다.

마이크로소프트 클라리티 코드 예시 (복사합니다.)
GTM - 태그 설정 - Custom HTML에 클라리티 코드를 삽입한 모습

4. 트리거 설정

태그를 설치했으면, 이 태그가 언제 실행될지 정의하는 트리거를 설정해야 합니다.

  1. 트리거 설정에서 All Pages를 선택합니다. 이를 통해 Clarity 태그가 웹사이트의 모든 페이지에서 실행되도록 설정됩니다.
  2. 설정이 완료되면 저장을 클릭합니다.

클라리티 코드의 트리거에 All page를 넣은 모습

이렇게 태그 설정을 완료하면, 모든 페이지에서 클라리티 코드를 작성하도록 GTM에 명령 설정이 완료된것입니다.

5. 태그 발행(Publish) 및 테스트

모든 설정이 완료되었다면, 이제 GTM에서 변경 사항을 제출하여 발행해야 합니다.

  1. GTM 대시보드에서 제출을 클릭해 설정한 태그를 발행합니다.
  2. 웹사이트에서 Clarity가 제대로 작동하는지 확인하려면, Clarity 대시보드에서 실시간으로 트래킹 데이터를 확인할 수 있습니다.

마무리

Microsoft Clarity는 히트맵, 세션 기록, 스크롤 맵 등 다양한 기능을 제공하여 사용자가 웹사이트에서 어떻게 행동하는지 쉽게 파악할 수 있게 도와줍니다. Clarity와 Google Tag Manager의 결합을 통해 코드를 직접 수정하지 않고도 클라리티를 효율적으로 관리할 수 있습니다.

활용 팁

  • Clarity는 특히 시각적으로 분석할 수 있는 히트맵과 세션 기록이 강력하므로, 사용자 행동 분석에 적합합니다.
  • Clarity와 Google Analytics를 함께 사용하는 것이 좋습니다. Clarity는 행동 분석에 강점을 두고 있고, Google Analytics는 세부적인 트래픽 분석에 뛰어납니다.