?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

지난 포스팅에서는

모바일 페이지에서 불필요해 보이는 섹션을 제거하고

원본 페이지와 AB split test를 시행해보니

예상과 달리,

회원 가입 전환율이 오히려 하락한 상황까지 살펴봤습니다.

 

지난 포스팅 보러가기

 

1.

UX 테스트는 하는 것이 하지 않는 것보다 항상 더 좋습니다.

 

모든 임직원이 불필요하다고 생각한 섹션이

사실은 방문자의 회원 가입 전환율에 중요했을까요?

 

기이한 현상의 실체는

매우 엉뚱한 곳에 숨어있었습니다.

 

예상을 벗어난 결과를 초래한 원인은

뷰포트 하단에 둥둥 떠다니는

3사 배너의 가림 효과 때문이었습니다.

 

배너가_가리는_첫뷰포트.png

 

원본_페이지_스크롤_진행률.png

- 원본 페이지의 스크롤 진행률 (Y축은 표본수)

 

위와 같이

원본 모바일 메인 페이지에서 

스크롤 진행률이 급락했던 이유는

동영상 컨텐츠 섹션애 거부감을 느꼈다는 해석보다

 

뷰포트 하단에 고정되도록 설정된 3사 배너가

우연히도 동영상 컨텐츠 섹션이

이 메인 페이지의 마지막인 것과 같은

시각 효과를 연출했기 때문이었습니다.

 

AB 테스트 과정에서

그저 산만해 보여서 하는 김에

제거한 3사 배너 영역이 아래와 같이

 

이 메인 페이지에 컨텐츠가 더 있다는

시각적인 신호를 제공했기 때문에

자연스럽게 스크롤 진행률이 상승했던 것입니다.

 

하단_개방된_첫뷰포트.png

 

변경_페이지_스크롤_진행률.png

- 변경 페이지의 스크롤 진행률 (Y축은 표본수)

 

하지만 

스크롤 진행률은 또 다시 급락했고

오히려 대부분의 방문자가

무의식적으로 스크롤을 내려서

메인 페이지의 첫 뷰포트에 표시된

회원 가입 관련 프로모션 메세지에 대한

관심을 잃었을 뿐입니다.

 

2.

온라인 업무 방식의 문제도 드러났습니다. 

 

3사 배너를 모바일 메인 페이지에 개재한 이유는

회사 수익에 조금이라도 기여하려는

담당자의 애사심이었습니다.

 

그러나

3사 배너를 개재하여 얻은 수익은

매월 평균 15만원에 미치지 못했고

 

경영진은 방문자가 살펴보기를 바랬던

전문 컨텐츠를 아무도 보지 않았습니다.

 

더하여,

3사 배너는 모바일 단말기에서만

표시되도록 설정되어 있었는데

 

모든 임직원이

업무 PC에서 모바일 페이지에 접속해서

이와 같은 가림 현상을 

수년간 아무도 몰랐습니다.

 

하지만

스크롤 진행률 AB test만으로

수년간 숨어있던 업무 방식의 문제까지 

발견할 수 있었습니다.

 

3.

모든 방문자가 본 모바일 첫 뷰포트에서는 어디를 클릭했을까요?

 

이 포스팅 연재의 주제가 클릭 히트맵인데.

이제야 클릭 히트맵이 거론될 차례입니다.

 

저희가 처음부터 계속하여

클릭 히트맵을 측정하는 유료 서비스 가입은

매우 많이 망설이셔야 한다고 말씀드린 이유도

이제 말씀드릴 차례입니다.

 

오른쪽 팝업 메뉴에 숨어있는

로그인 양식에 클릭이 집중된다고 나타났습니다.

 

모든 임직원분께서 그 결과에 시큰둥했습니다.

 

왜냐하면

이 홈페이지에서 활성화된 서비스가

무료 경품 신청이기 때문이었습니다.

 

무료 경품 신청 결과를 확인하려고

로그인할 것이라는 예상에서 

조금 더 벗어나지 않았습니다.

 

클릭히트맵_결과.png

 

그 외에 상단 메인 배너 영역의 클릭 히트맵도 수집했습니다.

 

배너 역시 무료 경품 이벤트에만 클릭이 집중되었습니다.

 

그런데

이 홈페이지의 메인 배너 영역은

수평 방향으로 5개 이상의 배너가 돌아가는 방식인데

애초에 클릭 히트맵 측정 따위는

염두에 두지 않고 작성한 매우 오래된 코드여서

대부분의 상용 솔루션이 각 배너의 클릭 히트맵을

측정하는 것은 불가능에 가까웠습니다.

 

메인_배너_클릭률.png

 

4.

UX 테스트는 지속해야 합니다.

 

그럼에도 불구하고

이 연속 포스팅의 주제인 클릭 히트맵을

상용 서비스를 돈주고 사용하시면 안되는 이유는

 

클릭 히트맵이 무의미하기 때문이 아니고

매우 세부적인 UX 상황을 관찰하기 위한

현미경과 같은 특수한 측정 도구이기 때문입니다.

 

현미경.png

현미경 아이콘 제작자: Freepik - Flaticon

 

본 연재 포스팅에서도

클릭 히트맵은 해당 뷰포트를 보는가?라는

좀 더 상위의 가설이 검증된 후에

분석하는 의미가 더 분명해지는 과정을 보여드렸습니다.

 

해당 뷰포트 영역을 본다는 사실만으로는

해결되지 않는 UX 관련 질문들이 존재하기 때문입니다.

 

이와 같이

클릭 히트맵 고유의 의미가 분명한데

단지 유료 서비스의 시각적인 과장 광고에 현혹되셔서

사실은 불필요한 부가 비용을 지불하시면

 

클릭 히트맵은 돈 값을 못한다는

 

엉뚱한 오해에 빠질 수 있습니다.

 

지금까지 클릭 히트맵을 

상용 서비스를 구매하지 않고도

매우 정밀하게 측정하고 분석하는

방법을 안내해 드렸습니다.

 

긴 연재를 끈기있게 살펴보신 노력에

존경과 감사의 말씀을 드립니다.

?
  • ?
    GA4 어려워요 2023.05.11 15:04
    안녕하세요, 포스팅해주신 글 잘 보고 있습니다. 업무에 활용하기 위해 배우는 중인데요, 몇가지 질문이 있어 댓글을 남깁니다.
    1. '구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법' 시리즈에서 jQuery 자바 스크립트 코드를 푸터에 추가하라고 하셨는데, 그 후에 어디서 사용되는지 잘 모르겠습니다 ㅠㅠ 그 후에 태그매니저 변수 생성에서 맞춤 자바 스크립트를 추가했으니 정상작동 되는건가요?
    2.구성 태그에 GA4 Global tag가 없어서 GA4 pageview (트리거가 all pages 페이지뷰로 설정되어 있습니다)를 사용하고 나머지는 똑같이 했습니다. 이렇게 하는것이 맞는지요?
    3. GA4에서 히트맵과 스크롤을 어떻게 보는지 내용이 없어서 알려주시면 정말 감사하겠습니다.
  • ?
    singleview.co.kr 2023.05.14 11:56

    GA4 어려워요님 안녕하세요.

    저희에게 지난 주는 매우 고난한 시간이었습니다.


    마음이 급하실 수도 있는데

    답변을 주말까지 지연시킨 나태함을
    매우 죄송하게 생각합니다.

     

    그저 인간적인 동료 의식으로

    저희에게 질문하셨을 것이고

    저희도 답변해 드리는 것이므로

     

    일단 안내해 드리는 정보를 살펴보시고.

    부담없이 추가의 질문이나 의견을 알려주세요.


    1.
    Query 자바 스크립트 코드를 푸터...

    저희 생각에는 아래의 포스팅에서
    1번과 4번 항을 말씀하신 것 같습니다.

    http://singleview.co.kr/blog/20202

     

    두 가지 가능성으로

    나누어서 재검토하셔야 할 것 같습니다.

     

    *.

    GTM없이 vanilla JS로 이벤트 신호를

    구글 애널리틱스에 직접 전송하는 경우

     

    http://singleview.co.kr/blog/20202

     

    *.

    GTM으로 구글 애널리틱스에

    이벤트 신호를 중계하는 경우

     

    http://singleview.co.kr/blog/20320

     
    혼란스러우실 수 있지만
    구글 애널티틱스와 GTM과 JS API는
    시간이 갈수록 서로의 고유 영역을 침범하며
    전문 개발자가 아닌 실무자를
    오히려 더 혼란에 빠지게 하는 상황은
    저희도 매우 안타깝습니다.

    2.
    그 후에 어디서 사용되는지 잘 모르겠습니다

     

    동일한 페이지에서 2번 항을 한번 더 살펴보시고

    추가의 질문이 있으시면 부담없이 알려주세요.

    열람하신 포스팅들을 따라서 구현하시라면
    DOM이라는 개념과 jQuery를 

    충분히 이해하셨다는 전제가 필요합니다.

    아주 짧게 요약해 드리면
    클릭 사건을 추적하고 싶은 DOM 요소에
    sv-sttr이라는 사용자 정의 속성을 수기로 추가한 후

    푸터에 입력하신 jQuery로
    sv-sttr이라는 사용자 정의 속성을 추가한 DOM의
    클릭 사건을 테스트로 표시하는 원리입니다.

    한번 더 말씀드리지만
    저희의 추가 설명도 난해하시다면
    GA4 어려워요님의 잘못도
    저희의 부족함도 아닙니다.

    이미 알고 계시듯이,
    구글의 기술은 홀로 우주선을 타고 안드로메다까지 가버렸고
    대부분의 지구인은 느린 걸음을 쫓아가기 때문입니다.

    3.
    구성 태그에 GA4 Global tag가 없어서

    아마도
    아래의 포스팅을 보시고

    http://singleview.co.kr/blog/20320

    저희가 미숙하게 작성한
    구성 태그에 관한 정보 때문에
    혼란을 느끼신 것 같습니다.

    문의하신 내용을 기술적으로 분리해 봤습니다.
    연관된 다른 혼란까지
    한번 더 살펴보시면 좋을 것 같습니다.

    *.
    GA4 어려워요님께서
    GTM을 사용하실 계획이라면
    1번과 2번 질문은 무의미하다는 점을
    한번 더 검토하셔야 합니다.

    아래의 포스팅 내용은
    GTM을 사용하지 않고
    vailllar JS API로 신호를 전송하려는
    경우에 해당하기 때문입니다.

    http://singleview.co.kr/blog/20202

    *.
    GTM을 이용하시려면
    아래의 포스팅을 참고하셔야 합니다.

    http://singleview.co.kr/blog/20320

    *.
    GTM에서 GA4를 사용하시는 중이라면

    GA4 Global tag라는 태그명을 찾지 마시고
    [Google 애널리틱스 GA4 구성]이라는
    태그 유형을 찾으셔야 합니다.

    이와 관련된 좀 더 자세한 정보는
    아래의 페이지의 2번 항에서 확인하실 수 있습니다.

    http://singleview.co.kr/blog/19485

    저희가 누력하여 혼란을 느끼신 것으로 보이는 페이지에도
    이와 관련된 정보를 추가했습니다.

    4.
    히트맵과 스크롤을 어떻게 보는지

    앞서 문의하신 내용을 살펴보면
    정보가 원활하게 전송된다고
    확신할 수 있는 상황이 아닌 것 같습니다.

    먼저,
    저희가 지금 안내해 드린
    1~3번까지 항목을 살펴보시길 부탁드립니다.

    데이터 시각화는
    정확하게 수집한 이후에만 고민하셔야 하기 때문입니다.

     

    5.

    한번 더 말씀드리지만
    저희의 추가 설명도 난해하시다면
    GA4 어려워요님의 잘못도
    저희의 부족함도 아닙니다.

     

    저희가 여러 프로젝트를 수행하다보면

    전문적인 개발 경험이 없이

    온라인 마케팅 업무를 담당하시는

    실무자 분들의 어려움을 자주 목격합니다.

     

    살펴보시는 저희의 포스팅은

    일반 교육 자료라기 보다는

    저희의 업무 기록 중 일부일 뿐이라서

    매우 불친절하거나 비약적일 수 있습니다.

     
    하지만

    처음에는 익숙하지 않아서 난해해도

    실무 목표를 해결하기 위해

    저희와 함께 고민하고 행동하시다보면

    자연스럽게 체득하시는 경우도 많이 봤습니다.


  1. 29
    May 2022
    07:45

    Google Analytics 4에서 self-referral을 처리하는 방식

    지난 포스팅에서는 구글 애널리틱스 4에서 List Unwanted Referrals 항목을 설정하여 특정 도메인을 source = referral에서 제외하는 방법을 알아봤습니다. 지난 포스팅 보러가기 이번 포스팅에서는 밀접하게 연관되 주제인 Google Analytics 4의 self-referra...
    Bysingleview.co.kr Views1465
    Read More
  2. 22
    May 2022
    11:18

    Google Analytics 4의 Referral에서 특정 도메인 제외하는 방법

    구글 애널리틱스 4의 [획득=Acquisition] 보고서를 살펴보면 referral이라는 단어가 자주 보입니다. referral 트래픽을 분석하다 보면 가끔씩 특정 도메인 주소가 referral로 분류되지 않아야 분석 업무가 더 수월해 지는 경우가 있습니다. 유입 트래픽 분석 ...
    Bysingleview.co.kr Views1384
    Read More
  3. 08
    May 2022
    17:57

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 6

    지난 포스팅에서는 모바일 페이지에서 불필요해 보이는 섹션을 제거하고 원본 페이지와 AB split test를 시행해보니 예상과 달리, 회원 가입 전환율이 오히려 하락한 상황까지 살펴봤습니다. 지난 포스팅 보러가기 1. UX 테스트는 하는 것이 하지 않는 것보다 ...
    Bysingleview.co.kr Views1018
    Read More
  4. 01
    May 2022
    11:32

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 5

    온라인으로 컨텐츠 서비스를 확장 중이지만 재무 성과가 기대에 미치지 못해서 고민에 빠진 전통 잡지사의 현황을 측정하기 위해 Click Heatmap과 Scroll Depth %라는 측정 도구를 적용하기로 결정한 의사 결정 과정을 지난 포스팅에서 간단히 알아봤습니다. ...
    Bysingleview.co.kr Views1202
    Read More
  5. 23
    Apr 2022
    13:49

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 4

    구글 태그 매니저를 이용해서 Click Heatmap과 Scroll depth %의 로우 데이터를 직접 더 정교하게 수집하는 방법을 지난 포스팅에서 자세히 알아보았습니다. 지난 포스팅 보러가기 이제 수집된 로우 데이터를 분석해서 시행 방안을 개선해야할 차례입니다. 이 ...
    Bysingleview.co.kr Views746
    Read More
  6. 17
    Apr 2022
    17:32

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 3

    지난 포스팅에서는 유료 솔루션을 사용하지 않고 Click Heatmap의 로우 데이터를 직접 더 정교하게 수집하는 방법 중에서 저수준 자바스크립트 API로 구글 애널리틱스에 직접 전송하는 방식을 자세히 알아봤습니다. 이전 포스팅 보러가기 이번 포스팅에서는 구...
    Bysingleview.co.kr Views644
    Read More
  7. 10
    Apr 2022
    13:48

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 2

    지난 포스팅에서는 현재 웹사이트의 UX 평가 과정에서 Click Heatmap이 매우 유용한 도구이지만 몇 가지 분명한 한계 때문에 체험판을 넘어서는 기능을 이용하기 위해 비용을 지불하는 절차가 매우 번거롭게 느껴질 수 있는 이유를 간략히 알아봤습니다. 이전 ...
    Bysingleview.co.kr Views564
    Read More
  8. 03
    Apr 2022
    14:07

    구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 1

    이번 포스팅부터 몇 회에 걸쳐 UX 평가에 매우 유용한 도구인 Click 혹은 Scroll 시각화를 구글 태그 매니저와 구글 애널리틱스를 활용하여 직접 측정하는 방법을 알아보겠습니다. 웹 사이트의 UI와 관련된 업무를 하다보면 UX에 관한 고민이 시작될 수 밖에 ...
    Bysingleview.co.kr Views587
    Read More
  9. 27
    Mar 2022
    17:02

    Xpress Engine 1.11.6을 PHP 8.0으로 마이그레이션 완료

    프로젝트의 필요에 의해서 우연히 Xpress Engine 1.11.6을 PHP 8.0으로 마이그레이션하게 되었습니다. 아래의 페이지에서 PHP 8.0에 포팅된 Xpress Engine 1.11.6을 살펴보시고 다운로드하실 수 있습니다. http://singleview.co.kr/appstore/20011 정확히는 저...
    Bysingleview.co.kr Views405
    Read More
  10. 13
    Nov 2021
    15:30

    구글 데이터 스튜디오를 이용해서 애널리틱스 4의 구매 전환율 확인하는 방법

    신버전인 구글 애널리틱스 4는 구버전인 유니서벌 애널리틱스에 비해서 데이터 모델을 근본적으로 혁신해서 더 강력하고 유연한 기능을 제공하지만 구버전인 유니버설 애널리틱스에 비해서 의외의 약점이 있습니다. 이번 포스팅에서는 신버전인 구글 애널리틱...
    Bysingleview.co.kr Views1165
    Read More
  11. 06
    Nov 2021
    11:26

    구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 마지막

    이번 포스팅에서는 Explorer 화면으로 접근하실 수 있는 FUNNEL 보고서를 활용하는 사례를 살펴보겠습니다. 지난 포스팅에서는 구글 애널리틱스 4의 Explorer 화면 중 Tab Settings 탭을 자세히 알아봤습니다. Explorer 화면 중 Tab Settings 탭 알아보기 그런...
    Bysingleview.co.kr Views853
    Read More
  12. 30
    Oct 2021
    15:01

    구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 2

    지난 포스팅에서는 구글 애널리틱스 4의 Explorer 화면 중 Variables 탭을 자세히 알아봤습니다. Explorer 화면 중 Variables 탭 알아보기 이번 포스팅에서는 Explorer 화면 중 Tab Settings 탭을 살펴보겠습니다. 1. Tab Settings 탭의 속성 이해하기 이 탭은...
    Bysingleview.co.kr Views913
    Read More
  13. 24
    Oct 2021
    06:34

    구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 1

    오늘은 구글 애널리틱스 4의 구매 전환 FUNNEL 보고서를 생성하는 방법을 살펴 보겠습니다. 지금까지 gaectk.js와 구글 태그 매니저를 이용해서 구글 애널리틱스 4(=신버전), 유니버설 애널리특스(=구버전)의 이커머스 데이터를 통합하여 수집하는 설정 방법을...
    Bysingleview.co.kr Views800
    Read More
  14. 16
    Oct 2021
    09:44

    구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Google Analytics 4 + GTM + gaectk.js

    이번 포스팅에서는 구글 태그 매니저를 이용해서 구글 애널리틱스 4(=신버전)의 이커머스 데이터 수집 설정 방법을 살펴보겠습니다. 동일한 상황에서 유니버설 애널리틱스(=구버전)의 이커머스 데이터 수집 설정 방법이 궁금하시다면 전 포스팅을 확인해 주세...
    Bysingleview.co.kr Views791
    Read More
  15. 05
    Oct 2021
    11:28

    구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Universal Analytics + GTM + gaectk.js

    지금까지 구글 애널리틱스의 이커머스 데이터 수집 방식에서 유니버설 애널리틱스와 구글 애널리틱스 4 구글 태그 매니저의 복잡한 상호 관계에 대해서 정확히 이해하기 위해 상당히 많은 시간을 할애했습니다. 이제 구글 태그 매니저를 이용해서 유니버설 애...
    Bysingleview.co.kr Views553
    Read More
  16. 26
    Sep 2021
    20:01

    구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - 2

    이전 포스팅에서는 이커머스 데이터 수집 기능과 관련된 유니버설 애널리틱스와 구글 애널리틱스 4의 같은 점과 다른 점을 개략적으로 살펴봤습니다. 이전 포스팅 보러 가기 더하여, 유니버설 애널리틱스와 구글 애널리틱스 4의 이벤트 데이터 모델을 충분히 ...
    Bysingleview.co.kr Views465
    Read More
  17. 22
    Sep 2021
    12:59

    구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - 1

    지금까지 유니버설 애널리틱스와 구글 애널리틱스 4의 이벤트 데이터 모델을 자세히 살펴 본 이유는 결국 이커머스 데이터를 수집하고 분석하기 위한 기초 지식이었다고 해도 과언이 아닙니다. 구글 애널리틱스의 버전과 무관하게 이커머스 데이터도 이벤트를 ...
    Bysingleview.co.kr Views900
    Read More
  18. 12
    Sep 2021
    09:34

    구글 애널리틱스 4의 이벤트 측정 방식을 알아보세요. - 5

    이제 Google Analytics 4의 Custom event를 살펴볼 차례입니다. 만약 Recommended Events의 개념을 머리속으로 정확히 떠올리실 수 없다면 이전 포스팅을 확인하셔야 합니다. 이전 포스팅 보러 가기 Universal Analytics에 익숙한 개발자라면 Google Analytics...
    Bysingleview.co.kr Views704
    Read More
  19. 04
    Sep 2021
    20:44

    구글 애널리틱스 4의 이벤트 측정 방식을 알아보세요. - 4

    Universal Analytics는 session base의 Analytics였습니다. 하지만 Google Analytics 4는 event base의 Analytics로 변신했습니다. 그래서 Google Analytics 4를 이해하는 노력은 Google Analytics 4가 제공하는 다양한 기본 혹은 사용자 정의 이벤트를 이해하...
    Bysingleview.co.kr Views791
    Read More
  20. 28
    Aug 2021
    17:57

    구글 애널리틱스 4의 이벤트 측정 방식을 알아보세요. - 3

    이번 포스팅에서는 Google Analytics 4의 이벤트 추적과 수집 기능을 자세하게 알아 보겠습ㄴ다. 사실 이전의 두 포스팅은 Google Analytics 4의 이벤트 추적 기능을 본격적으로 살펴보기 위한 워밍업이었다 해도 과언이 아닙니다. 이전 포스팅 보러 가기 저희...
    Bysingleview.co.kr Views797
    Read More
Board Pagination Prev 1 2 3 Next
/ 3
SEARCH