커스텀 태그 추가 — 자체 A/B 테스트 변형별로 히트맵 필터링

HeatMapX에 커스텀 태그를 추가했습니다. 페이지에 코드 한 줄만 추가하면 해당 방문자의 클릭, 스크롤, 마우스 이동 이벤트에 태그가 붙고, 대시보드에서 히트맵을 태그별로 필터링할 수 있습니다.

"A/B 테스트는 이미 자체 코드로 동작하고 있다. 변형별 히트맵만 보고 싶다"는 고객 요청에서 시작된 기능입니다. A/B 테스트에 국한되지 않습니다. 로그인 여부, 회원이 어떤 플랜을 쓰는지, 어떤 캠페인으로 유입됐는지 등 사이트가 이미 알고 있는 속성이라면 무엇이든 세그먼트로 만들 수 있습니다.

사용 방법

추적 태그가 있는 페이지에 다음을 추가합니다. 추적 태그보다 앞이든 뒤든 상관없이 동작합니다(먼저 호출된 것은 큐에 쌓였다가 태그가 로드되면 적용됩니다).

<script>
  window.hmx = window.hmx || function(){ (window.hmx.q = window.hmx.q || []).push(arguments) };
  hmx('set', 'ab_variant', 'B');
</script>

서버에서 HTML을 렌더링하는 경우, 추적 태그보다 앞에서 한 번에 전달할 수도 있습니다.

<script>window.heatmapxTags = { ab_variant: 'B', plan: 'pro' };</script>

태그는 같은 브라우저 탭 내 페이지 이동 시에도 유지되므로, 방문 시작 시 한 번만 설정하면 충분합니다. hmx('unset', 'ab_variant')로 태그를 제거할 수 있습니다.

대시보드에서 필터링

사이트, 그리고 페이지의 히트맵을 엽니다. 우측 상단 필터 영역(기기 필터 옆)에 "태그" 드롭다운이 나타납니다. ab_variant = B (128)처럼 키, 값, 세션 수가 함께 표시되는 항목 중 하나를 선택하면 클릭, 스크롤, 마우스 이동 히트맵이 해당 세그먼트만으로 다시 그려집니다.

태그가 붙은 데이터가 없는 사이트에서는 드롭다운이 표시되지 않습니다. 설치 후 태그가 붙은 첫 이벤트가 도착하는 시점부터 선택할 수 있게 됩니다.

MCP 서버에서 필터링

Claude 등 AI 도구에서 사용하는 MCP 서버도 태그를 지원합니다.

• get_heatmap_summary에 tags: { "ab_variant": "B" }를 전달하면 해당 세그먼트의 요약을 반환합니다. 여러 키는 AND 조건으로 결합됩니다.
• 새로 추가된 list_tags 도구로 사이트에서 관측된 키와 값 목록을 가져올 수 있습니다.

규칙

• 키: 영문 소문자, 숫자, _, -로 132자(대문자는 소문자로 변환됩니다). 값: 164자. 동시에 최대 10개 키까지 보관합니다.
• 이메일 주소, 사용자 ID, 주문번호 등 개인을 식별할 수 있는 값은 넣지 마세요. @와 .을 모두 포함하는 값은 저장되지 않습니다.
• 키 하나당 최근 30일 기준 최대 50개의 서로 다른 값까지 저장됩니다. 그 이상의 새 값은 무시됩니다.
• 태그를 사용하지 않으면 전송되는 내용은 지금까지와 동일합니다.

요금제

무료 플랜을 포함한 모든 플랜에서 이용할 수 있습니다.

영향 범위

기존 추적 태그를 그대로 사용합니다. 태그를 설정하지 않은 사이트는 영향을 받지 않습니다. 추적 스크립트(tracker.js)는 브라우저에 최대 24시간 캐시되므로, 설치 직후에는 일부 재방문자에게 다음 날부터 반영될 수 있습니다.