히트맵을 사용하여 WordPress 웹사이트에서 클릭을 추적하는 방법
게시 됨: 2022-03-10웹 페이지의 성능을 측정하는 방법에는 여러 가지가 있으며 가장 인기 있는 방법은 단연 Google Analytics입니다. 그러나 사이트의 어떤 이미지, 단어 또는 요소가 사이트 방문자의 특정 관심을 끄는지 정확히 아는 것은 이러한 도구만으로는 불가능합니다.
때로는 디자인, 레이아웃, 콘텐츠 구조(이름 지정) 측면에서 페이지를 훌륭하게 만드는 요소와 사람들이 다른 대신 의도적인 행동을 취하도록 유도하는 요소가 무엇인지 알고 싶을 때가 있습니다. 실제로 귀하의 질문에 대한 해결책이 있다는 사실을 알게 되면 아마 놀랄 것입니다. 바로 히트맵입니다.
숫자와 통계로 작동하는 Google Analytics와 달리 히트맵은 주어진 페이지에서 가장 많이 참여하는 정확한 지점을 보여줍니다. 히트맵을 통해 페이지에서 가장 많이 클릭된 영역이 무엇인지, 콘텐츠를 스캔하는 동안 사람들이 선택하는 단락이 무엇인지, 클라이언트의 스크롤 동작이 무엇인지 알 수 있습니다(예: 스크롤 없이 볼 수 있는 부분이 몇 개인지 또는 맨 아래에 도달한 페이지가 몇 개인지). 그 페이지).
이 기사에서는 히트맵이 마케팅 목표에 매우 효율적인 이유와 WordPress 사이트와 통합할 수 있는 방법에 대해 설명합니다.
WordPress 사이트에서 히트맵을 사용하는 이유
"방법" 부분으로 진행하기 전에 WordPress 사이트에 히트맵을 구현하는 데 귀중한 시간을 할애할 가치가 있는 이유와 실제 역할이 무엇인지 알고 싶을 수 있습니다.
첫째, 더 많은 사람들이 이제 현대적이고 사용자 친화적인 인터페이스에 긍정적으로 반응하고 단순하고 비대화형 인터페이스를 건너뛰면서 시각적 마케팅이 지속적으로 성장하고 있습니다. 특정 작업에 너무 많은 단계가 필요하고 플랫폼을 조작하기 어려운 경우 결국 포기하고 고객을 잃게 됩니다.
물론 훌륭한 콘텐츠가 여전히 핵심이지만 사이트가 구조화되고 다양한 요소를 결합하는 방식은 방문자의 활동(전환(참여) 또는 이탈)에 영향을 미칩니다.
마케팅 전문가들은 시간이 지남에 따라 이러한 종류의 행동을 연구했습니다.
마케터의 37%는 비주얼 마케팅이 블로깅(38%)에 이어 두 번째로 중요한 비즈니스 콘텐츠 형식이라고 생각합니다.
2016년 B2B 마케터의 51%가 시각적 콘텐츠 자산 생성을 우선시했습니다.
콘텐츠/레이아웃이 매력적이지 않으면 38%의 사람들이 웹사이트 참여를 중단합니다.
그러나 히트맵은 구체적으로 무엇을 위해 만들어졌습니까? 히트맵은 청중에 대한 가치 있고 때로는 놀라운 사실을 발견하는 데 도움이 될 수 있습니다.
WordPress 사이트에 하나를 추가하면 다음을 수행할 수 있습니다.
방문자의 클릭을 추적하고 사이트를 탐색하는 동안 방문자의 기대치를 파악하십시오. 이렇게 하면 페이지를 조정하고 더 보기 쉽고 매력적으로 만들 수 있습니다.
사람들이 관심을 가지는 것이 무엇인지 알아보십시오. 그들이 찾고 있는 정보가 무엇인지 알 수 있으므로 스포트라이트를 받고 자신에게 유리하게 사용할 수 있습니다.
스크롤 동작을 분석합니다. 얼마나 많은 방문자가 사이트의 하단 영역에 도달했는지, 섹션을 더 이상 탐색하지 않고 얼마나 많은 방문자가 즉시 떠났는지 확인하십시오.
커서 움직임을 주시하고 청중이 텍스트에서 어떤 콘텐츠를 가리키고 있는지(또는 선택하는지) 확인하세요.

다시 말하지만 히트맵을 사용하는 것은 재미로 클릭을 추적하는 것일 뿐만 아니라 비즈니스 성장에 많은 영향을 미칠 수 있습니다. 모든 종류의 구매 또는 전환에 영향을 줄 수 있습니다(사이트에서 달성하려는 목표에 따라 다름).
클릭 유도문안 버튼이 동일한 페이지의 다른 요소와 비교하여 의도한 관심을 받는지 알 수 있습니다. 판매 페이지에 배치한 다른 디자인 요소가 사람들이 구매 버튼을 클릭하지 못하도록 방해할 수 있으며 이는 핫스팟 맵에서 볼 수 있습니다. 결과에 따라 외모, 위치, 스타일링 등을 변경할 수 있으므로 매출이 증가합니다.
블로거는 히트맵을 사용할 수도 있습니다. 이렇게 하면 콘텐츠에 대한 고객 친화적이고 매력적인 레이아웃을 만드는 방법을 알 수 있기 때문입니다. 일부 레이아웃은 다른 레이아웃보다 더 많은 트래픽을 생성하며 어떤 레이아웃 을 찾는 것은 사용자에게 달려 있습니다.
사람들이 특정 정보에 머뭇거린다면 그 정보가 그들에게 가치가 있다는 의미이며 근처에 링크나 버튼을 배치하여 사용자에게 유리하게 사용할 수 있습니다. 또는 해당 주제에 대한 추가 정보가 포함된 별도의 게시물을 만들 수도 있습니다.
WordPress 사이트에 히트맵을 추가하는 방법
원래 WordPress용으로 만든 플러그인이든 타사 도구든 상관없이 통합은 전혀 어렵지 않습니다. 일반적으로 히트맵에서 가장 어려운 부분은 결과를 해석하는 것입니다. 결과를 해석하는 것입니다. 결론과 함께 결과가 비즈니스에 미치는 영향 및 이점을 활용하는 방법입니다.
설치에 관해서는 하나의 도구를 선택하고 테스트를 시작하기만 하면 됩니다. Crazy Egg, WordPress용 Heatmap, Hotjar Connecticator, Lucky Orange 및 SeeVolution은 이 방향으로 도움이 될 최고의 인기 도구입니다. WordPress 및 Hotjar 용 Heatmap은 무료이고 나머지 3개는 프리미엄 플랜으로 제공됩니다(무료 평가판을 제공함).
이러한 모든 도구(WordPress용 Heatmap 제외)는 WordPress 뿐만 아니라 다른 웹사이트 빌더에서도 작동한다는 점을 언급하는 것이 중요합니다. 그들은 보편적입니다. WordPress 개발자가 후자와 통합하는 쉬운 방법을 찾았기 때문에 코더가 아닌 사람들도 크게 어려움을 겪지 않을 것입니다. 예를 들어 Squarespace와 같은 다른 웹사이트 빌더와 통합하려면 코드를 약간 다룰 필요가 있습니다.
그렇다면 사이트에 히트맵을 설정하는 방법은 무엇입니까? Hotjar는 전반적으로 좋은 일을 하기 때문에 사용합시다. 직관적이고 현대적이며 WordPress에서 빠르게 구현할 수 있습니다.
이 경우 Hotjar Connecticator 플러그인을 예로 들어 보겠습니다. 설치 및 활성화한 후 hotjar.com에서 계정을 만들고 모니터링하려는 사이트의 URL을 추가하고(나중에 더 많은 사이트를 추가할 수 있음) 제공된 추적 코드를 WordPress 대시보드의 플러그인 페이지에 복사해야 합니다. (아래 참조).

이제 Hotjar 플랫폼에서 바로 수행할 수 있는 히트맵을 만들 차례입니다(WordPress 대시보드에서는 아무 것도 사용자 지정할 수 없음). 따라서 Heatmaps를 클릭한 다음 New Heatmap을 클릭합니다.
다음으로 페이지 타겟팅 기본 설정을 선택해야 합니다. 단일 페이지에서 핫스팟을 추적하시겠습니까? 여러 페이지를 동시에 테스트하여 결과를 비교합니까? 그것도 작동합니다. 후자가 필요한 경우 일부 URL 형식을 사용할 수 있으므로 특정 범주의 모든 페이지를 대상으로 지정할 수 있습니다(유형, 게시 날짜 등으로 정렬). 링크에 포함된 정확한 단어를 작성할 수도 있습니다. Hotjar는 페이지 추적을 시작합니다.

Hotjar의 흥미로운 점은 CSS 선택기를 추가하여 모니터링하고 싶지 않은 페이지 요소를 제외할 수 있다는 것입니다. 이렇게 하면 결과를 비교하거나 분석할 때 불필요한 것들로 인해 주의가 산만해지는 것을 피할 수 있고 테스트하고 싶은 것들에만 집중할 수 있습니다.
히트맵을 만든 후 핫스팟이 있는 첫 번째 스크린샷은 페이지가 방문자와 클릭을 얻기 시작한 후에만 제공되므로 즉시 결과를 기대하지 마십시오. 이 도구는 히트맵이 생성된 이후에 해당 페이지에서 있었던 모든 조회수를 추적하므로 조회수와 클릭수를 기반으로 보고서를 작성할 수 있습니다. 이러한 종류의 보고서를 통해 콘텐츠를 클릭할 수 있는지 여부를 알 수 있습니다.
Hotjar에서 제공한 첫 번째 스크린샷은 다음과 같습니다(테스트는 Hestia WordPress 테마의 사용자 지정되지 않은 버전에서 수행됨).

이 도구의 또 다른 멋진 점은 사용자에게 페이지를 떠나는 이유 또는 페이지에서 마음에 들지 않았던 점을 묻는 간단한 대화형 설문조사를 생성할 수 있는 옵션을 제공한다는 것입니다.
사례 연구: Heatmap을 사용하여 ThemeIsle 및 CodeinWP의 랜딩 페이지를 개선한 방법
이론은 매력적으로 들리며 거의 항상 실습 자체보다 쉽습니다. 하지만 이 방법이 정말 효과가 있을까요? 효율적인가? 하루가 끝날 때 적절한 결과와 통찰력을 얻습니까?
대답은 그렇습니다. 인내심이 있다면 그렇습니다.
우리는 ThemeIsle의 히트맵을 좋아하고 많은 페이지에서 이를 사용합니다. 회사는이 특정 플랫폼에 대한 테마와 플러그인을 판매하는 온라인 상점이기 때문에 페이지는 대부분 WordPress 테마와 관련이 있습니다.
CodeinWP 블로그에서 가장 인기 있는 콘텐츠 중 하나는 테마와도 관련이 있습니다. 우리는 광범위한 목록을 보유하고 있으며 그 중 많은 목록이 Google 결과 페이지의 상위 3위 안에 들 수 있습니다. 최근에 우리는 목록에 대해 두 가지 유형의 레이아웃을 실험했습니다. 하나는 테마의 홈페이지를 나타내는 단일 스크린샷이 있고 다른 하나는 홈페이지, 단일 게시물 페이지 및 모바일 디스플레이의 세 가지 스크린샷을 제공합니다.
두 버전을 비교한 후 우리가 알아차린 주요 사실은 목록 끝에 도달한 사람의 수는 거의 같았지만 클릭수 분포가 달랐다는 것입니다. 하나의 스크린샷만 있는 것입니다. 즉, 시각적 개체가 많은 목록은 테마 디자인에서 더 많은 샘플을 제공하므로 사람들이 어떤 것이 자신에게 호소하는지 더 빨리 인식할 수 있기 때문에 더 설명적입니다. 이 사실을 감안할 때 테마가 어떻게 보이는지 확인하기 위해 추가로 클릭할 필요가 없습니다.
한 장의 스크린샷의 경우 사진에서 볼 수 있는 홈페이지만 있기 때문에 사람들은 테마에 대한 자세한 내용을 찾기 위해 더 깊이 파고듭니다. 따라서 테마 페이지로 이동하고 라이브 데모를 시작하려면 더 많이 클릭합니다.
따라서 광고 기회를 찾거나 제휴사 링크를 사용하는 경우 한 장의 사진 버전이 사용자 참여 및 사이트에서 보낸 시간 측면에서 더 도움이 될 것입니다.


히트맵을 사용하는 또 다른 예는 Hestia 테마의 문서 페이지입니다. 테스트 과정에서 상당한 수의 사용자가 "업그레이드"라는 단어를 클릭한 후 프리미엄 버전으로 업그레이드하는 데 관심이 있음을 확인했습니다. 테마의 프리미엄 기능이 포함된 대상 페이지입니다.
프리미엄 기능에 대해 말하자면, 우리의 또 다른 실험은 커서 움직임을 추적하고 문서를 확인할 때 사람들이 더 많이 가리키고 있는 기능이 무엇인지 확인하는 것이었습니다. 결과를 바탕으로 우리는 전환을 원하는 많은 방문 페이지에서 가장 인기 있는 항목을 사용했습니다. 이 경우에는 무료 사용자가 프리미엄 테마로 업그레이드한 것입니다.

또한 클릭이 적은 질문을 추적하기 위해 FAQ 페이지용 히트맵을 만들었으며 이후에 다른 관련 질문으로 대체했습니다. 지원 서비스를 개선하고 고객에게 보다 부드러운 제품 경험을 제공하기 위해 테스트가 계속 진행 중입니다.

A/B 테스팅의 중요성
히트맵에서 훌륭한 통찰력을 얻은 후에는 여기서 멈출 필요가 없습니다. 결과를 기반으로 페이지에 대한 대안을 만들고 A/B 테스트 방법을 사용하여 어떤 페이지가 더 잘 수행되는지 확인합니다.
A/B 테스트는 아마도 동일한 페이지의 두 개 이상의 버전을 비교할 수 있는 가장 인기 있는 방법일 것입니다. 최종 목표는 어느 것이 더 잘 전환되는지 찾는 것입니다. 목표에 더 가까이 다가가는 데 확실히 도움이 되고 청중이 콘텐츠를 소비하는 방식에 대한 새로운 관점을 제공하기 때문에 시도해야 합니다.
따라서 한동안 히트맵을 사용하고 사용자의 행동을 추적한 후 사이트의 사용성을 개선하는 방법에 대한 계획을 세우십시오. 하나에만 집착하지 말고 대안을 만드십시오. 하나 이상의 아이디어가 있는 경우 모든 아이디어를 테스트하고 사람들의 반응을 관찰하세요. 여기에서 목표는 가장 효율적인 방문 페이지, 즉 전환 가능성이 가장 높거나 예상 참여를 유도하는 페이지를 만드는 것입니다.
그러나 A/B 테스트는 어떻게 작동합니까?
글쎄요, 이 방법을 워드프레스 사이트에서 사용할 수 있도록 만든 플러그인이 몇 가지 있지만, Nelio A/B Testing은 WordPress.org 디렉토리에 있는 리뷰를 기반으로 가장 인기가 있습니다(또한 무료입니다). 플러그인을 설치한 후 실행할 실험 유형을 선택할 수 있습니다. 페이지, 게시물, 헤드라인, 위젯 등 비교할 수 있는 다양한 옵션이 있습니다.

이제 실험을 시작하는 것은 정말 쉽습니다. 몇 분이면 됩니다. 만들 때 테스트를 실행하려는 원본 페이지, 비교하려는 대안, 목표(실험으로 달성하려는 것: 페이지 조회수, 클릭수 또는 직접 사람들을 외부 소스로). 실험을 중지한 후 플러그인은 처음에 설정한 목표와 관련된 자세한 결과를 표시합니다. 따라서 테스트가 끝나면 어떤 페이지의 실적이 더 좋은지 알 수 있고 사이트에서 사용할 수 있습니다. 새로운 아이디어가 떠오를 때까지 다시 테스트를 시작해야 합니다. 디지털 마케팅은 일이 일어날 것이라고 가정하고 희망하는 것이 아니라 일이 일어나도록 하는 것 입니다. 그렇기 때문에 항상 테스트하고 테스트하고 다시 테스트해야 합니다.
그건 그렇고, Nelio A/B Testing 플러그인을 사용하면 히트맵도 생성할 수 있지만 앞서 나열된 플러그인만큼 정교하지 않고 많은 통찰력을 제공하지 않습니다. 그러나 빠른 실험을 실행하고 페이지에 대한 몇 가지 기본 정보가 필요한 경우 시도해 볼 수 있습니다.
결론
성공적인 비즈니스를 원하거나 대담한 프로젝트의 저자가 되고 싶다면 전략을 계속 조정하십시오. 매일, 매주 새로운 것을 시도하십시오. 조정할 수 있으려면 단순히 청중을 아는 것만으로는 충분하지 않으며 청중의 행동을 테스트하고 이를 기반으로 다음 동작을 취하는 것입니다.
마케팅은 고객이 원하는 것을 추측하는 것이 아닙니다 . 그것은 스스로 그것을 찾아 그들에게 필요한 한 가지를 제공하는 것입니다. 히트맵 방법은 사이트에서 사람들의 행동을 스케치하고 그들이 가장 중요하게 생각하는 것을 강조하여 진행하는 데 도움이 됩니다. 간단하고 빠르며 시각적이며(청중을 이해하기 위해 통계를 너무 많이 조사할 필요가 없음) 재미있습니다.
사용자가 웹 페이지에 방문했을 때 어떤 행동을 하는지 아는 것은 정말 매력적인 일이며 많은 것을 배울 수 있습니다.