워드프레스 사이트에 히트맵 설치하는 방법 (코드 한 줄, 3분)
- how-to
- wordpress
- heatmap
- installation
기사 요약
- 워드프레스에 히트맵을 추가하려면 코드 한 줄만 붙여넣으면 됩니다
- 방법은 세 가지입니다: (1) 테마의 헤더 설정 필드, (2) 코드 삽입 플러그인, (3) header.php 직접 수정
- 성공의 기준은 "오류가 없다"가 아니라, HeatMapX 대시보드에서 해당 사이트의 카운트가 실제로 증가하는 것입니다
히트맵을 추가하려면 코드와 씨름해야 할 것 같아 걱정되시나요? 워드프레스에서는 정말로 태그 코드 한 줄만 있으면 됩니다. 이 가이드에서는 초보자에게 가장 쉬운 방법부터 조금 더 고급스러운 방법까지, 세 가지 추가 방법을 안내합니다.
1단계: 사이트 키 발급받기
먼저 HeatMapX에 가입하고(무료 플랜 이용 가능), 사이트를 등록한 뒤 사이트 키를 발급받으세요. 신용카드는 필요하지 않습니다.
사이트 키를 발급받았다면, 아래 태그의 YOUR_SITE_KEY 부분을 실제로 발급받은 키로 바꿔서 사용하세요.
<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>
이 태그를 아래 세 가지 방법 중 하나를 이용해 사이트의 <head>에 붙여넣으세요.
방법 1 (초보자에게 추천): 테마의 헤더 설정 이용하기
Astra나 GeneratePress 같은 인기 테마들은 대부분 "고급" 또는 "사용자 지정 스크립트" 항목 아래에 <head> 영역에 코드를 직접 삽입할 수 있는 설정 필드를 제공합니다.
- 워드프레스 관리자 화면에서 사용 중인 테마의 커스터마이저 또는 설정 패널을 엽니다
- "헤더 스크립트", "사용자 지정 코드", "고급"과 같은 이름의 필드를 찾습니다
- 위의 태그를 해당 필드에 붙여넣고 저장합니다
테마 파일을 직접 건드릴 필요가 없기 때문에, 처음 시도하는 분에게는 가장 안전한 방법입니다.
방법 2: 코드 삽입 플러그인 이용하기
사용 중인 테마에 헤더 입력 필드가 없다면, WPCode(구 Insert Headers and Footers)와 같은 플러그인을 사용할 수 있습니다.
- 플러그인 화면에서 WPCode 같은 코드 삽입 플러그인을 검색해 설치한 뒤 활성화합니다
- 플러그인 설정을 열고 "Header" 필드를 찾습니다
- 위의 태그를 붙여넣고 저장합니다
이 방법의 장점은 테마를 변경해도 태그가 유지된다는 점입니다. 앞으로 사이트 디자인을 리뉴얼할 계획이 있다면 이 방법이 잘 맞습니다.
방법 3 (고급): 자식 테마에서 header.php 수정하기
코드를 직접 수정하는 데 익숙하다면, 태그를 테마 파일에 직접 추가할 수 있습니다.
- 먼저 사용 중인 테마의 **자식 테마(child theme)**를 만듭니다 (부모 테마를 직접 수정하면 다음 테마 업데이트 시 변경 사항이 사라지므로, 반드시 자식 테마가 필요합니다)
- 자식 테마의
header.php를 열고,wp_head()바로 앞이나 닫는</head>태그 바로 앞에 태그를 붙여넣습니다 - 파일을 저장합니다
부모 테마를 직접 수정하면 다음 테마 업데이트 때 변경 사항이 덮어써지면서 태그가 사라집니다. 이 방법을 선택한다면 반드시 자식 테마를 통해 수정하세요.
실제로 작동하는지 확인하는 방법
태그를 추가했다면, 자신의 사이트에서 몇 개의 페이지를 둘러보세요. 다만 여기서 중요한 부분이 있습니다.
페이지가 오류 없이 로드되는 것과 추적이 실제로 작동하는 것은 다른 문제입니다. 브라우저 콘솔에 아무 문제가 표시되지 않더라도, 사이트 키를 잘못 입력했다면 데이터가 HeatMapX에 전혀 전달되지 않을 수 있습니다.
확실하게 확인하는 유일한 방법은 HeatMapX 대시보드를 열어 사이트 목록에서 해당 사이트를 찾고, 카운트가 실제로 증가했는지 확인하는 것입니다. 몇 개의 페이지를 방문한 뒤 카운트가 늘어난다면 설치가 제대로 된 것입니다.
자주 묻는 질문
Q. 사이트 속도가 느려지지 않나요? A. 이 태그는 비동기(asynchronous)로 로드되며 용량이 가벼워서, 페이지 로딩 속도에 미치는 영향은 미미합니다.
Q. 캐싱 플러그인을 사용 중인데, 주의할 점이 있나요? A. WP Super Cache나 W3 Total Cache 같은 캐싱 플러그인을 사용 중이라면, 태그를 추가한 뒤 반드시 캐시를 지워(퍼지) 주세요. 예전 캐시 버전이 계속 제공되면 새로 추가한 태그가 적용되지 않습니다.
Q. 태그를 추가했는데 대시보드의 카운트가 늘어나지 않아요 A. 가장 흔한 원인은 사이트 키가 일치하지 않는 경우입니다 — 다른 사이트의 키를 붙여넣었거나, 복사하는 과정에서 글자가 하나 빠졌을 수 있습니다. HeatMapX 대시보드에 표시된 키와 다시 한번 비교해 보세요.
마치며
워드프레스에 히트맵을 추가하는 작업은 결국 코드 한 줄을 붙여넣는 것으로 끝납니다. HeatMapX는 무료로 시작할 수 있으니, 직접 사용해 보면서 방문자들이 실제로 사이트를 어떻게 이용하는지 확인해 보세요.