구글 태그 매니저(GTM)로 히트맵 설치하기 (코드 수정 없이 5분 완성)

한눈에 보기

GTM을 사용하면 사이트 코드를 전혀 건드리지 않고도 히트맵을 설치할 수 있습니다

다섯 단계로 끝납니다: 커스텀 HTML 태그 만들기 → All Pages 트리거 연결하기 → 게시하기

성공의 기준은 "에러가 없는 것"이 아니라 HeatMapX 대시보드에서 숫자가 움직이는 것입니다

이미 구글 태그 매니저(GTM)로 태그를 관리하고 있는 사이트라면, 히트맵 추적을 추가하는 가장 깔끔한 방법은 GTM을 이용하는 것입니다. 모든 작업이 GTM 관리 화면 안에서 끝나며, 코드를 건드릴 필요가 전혀 없습니다. 이 글에서는 그 과정을 단계별로 안내합니다.

시작하기 전에: 사이트 키 발급받기

먼저 HeatMapX에 가입하고(무료 플랜 제공, 신용카드 등록 불필요) 사이트를 등록하면 사이트 키를 발급받을 수 있습니다.

사이트 키가 발급되면 아래 형태의 태그를 사용합니다. 여러분의-사이트-키 부분을 실제 발급받은 키로 바꿔주세요.

<script src="https://heatmapx.com/tracker.js?key=여러분의-사이트-키" data-site-key="여러분의-사이트-키"></script>

중요: 붙여넣어야 하는 것은 URL만이 아니라 태그 전체입니다. data-site-key="..." 속성은 이 데이터가 어느 사이트의 것인지를 알려주는 역할을 합니다. 이 속성을 빼거나 src URL만 붙여넣으면 아무것도 추적되지 않습니다.

GTM 설정하기 (5단계)

GTM 관리 화면(tagmanager.google.com)을 열고, 대상 사이트의 컨테이너(작업공간)를 선택합니다
왼쪽 메뉴에서 "태그" → "새로 만들기"를 클릭하고, 태그 유형에서 "Custom HTML"을 선택합니다
위에서 만든 태그 전체를 HTML 입력란에 그대로 붙여넣습니다
트리거 설정에서 "All Pages(페이지 조회)"를 선택하고, 태그에 알아보기 쉬운 이름(예: HeatMapX)을 붙인 뒤 저장합니다
오른쪽 상단의 "Submit/Publish"를 눌러 변경 사항을 실제 사이트에 반영합니다

이제 끝났습니다. 이후로는 사이트의 모든 페이지에서 히트맵 추적이 시작됩니다.

게시 전에 미리 확인하고 싶다면? (프리뷰 모드)

GTM에서 "Preview" 버튼을 누르면 게시 전에 내 브라우저에서만 태그 동작을 테스트할 수 있습니다. 미리보기 화면(Tag Assistant)을 통해 사이트를 열었을 때, 만든 HeatMapX 태그가 "Fired" 항목에 표시되면 정상적으로 작동하는 것입니다.

태그가 작동하지 않을 때 — 체크리스트

Publish 버튼을 눌렀나요? 저장만으로는 변경 사항이 실제 사이트에 반영되지 않습니다. 가장 흔한 원인입니다
트리거가 All Pages로 설정되어 있나요? 특정 페이지에만 적용되는 트리거라면 다른 페이지에서는 추적되지 않습니다
쿠키 동의 배너(동의 모드)가 태그를 막고 있지는 않나요? 일부 동의 관리 도구를 사용하는 경우, 방문자가 동의하기 전까지 Custom HTML 태그의 실행을 보류하도록 설정되어 있을 수 있습니다. 태그의 동의 설정과 사용 중인 CMP(동의 관리 플랫폼)의 분류 방식을 확인해보세요
data-site-key가 정확한가요? 다른 사이트의 키를 붙여넣으면 데이터가 엉뚱한 사이트로 전송됩니다

Claude Code에게 안내받기

GTM 화면을 일일이 뒤지고 싶지 않다면, Claude Code 같은 AI 에이전트에게 안내를 맡길 수도 있습니다. 아래 프롬프트를 복사해서 사이트 키 부분만 여러분의 것으로 바꾼 뒤 붙여넣어 보세요.

Google Tag Manager로 HeatMapX 히트맵 추적 태그를 배포하고 싶습니다.
GTM 화면 조작을 한 단계씩, 제 답변을 기다리면서 안내해 주세요.

사용할 태그 (Custom HTML, 트리거는 All Pages):
<script src="https://heatmapx.com/tracker.js?key=여러분의-사이트-키" data-site-key="여러분의-사이트-키"></script>

GTM을 사용하지 않고 사이트 코드에 태그를 직접 넣고 싶다면, 아래 프롬프트를 사용하면 Claude Code가 파일 수정까지 대신 해줍니다.

이 프로젝트에 HeatMapX 히트맵 추적 태그를 설치해 주세요.
모든 페이지의 </head> 바로 앞에 아래 태그가 포함되도록 하고, 어떤 파일을 수정했는지 알려주세요.

<script src="https://heatmapx.com/tracker.js?key=여러분의-사이트-키" data-site-key="여러분의-사이트-키"></script>

HeatMapX는 데이터를 가져오고 분석하는 작업도 Claude Code에서 할 수 있도록 설계되어 있습니다(CLI 연동). 설정이 끝나면 대시보드의 "CLI & Skills" 페이지를 확인해 보세요.

작동 확인: 숫자가 움직이면 성공

설치가 끝났다면 자신의 사이트 페이지 몇 곳을 둘러본 뒤 HeatMapX 대시보드를 열어보세요. 해당 사이트의 "오늘의 세션" 수치가 올라가고 있다면 추적이 정상적으로 작동하고 있는 것입니다.

성공의 기준은 "에러가 없는 것"이 아니라 대시보드의 숫자가 움직이는 것입니다. 숫자가 움직이지 않는다면 위의 체크리스트를 순서대로 확인해보세요.