?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

지난 포스팅에서는

현재 웹사이트의 UX 평가 과정에서

 

Click Heatmap이

매우 유용한 도구이지만

몇 가지 분명한 한계 때문에

체험판을 넘어서는 기능을 이용하기 위해

비용을 지불하는 절차가 매우 번거롭게

느껴질 수 있는 이유를 간략히 알아봤습니다.

 

이전 포스팅 보러 가기

 

이번 포스팅에서는

구글 태그 매니저를 이용하여

유료 Heatmap 서비스의 현실적인 대안을

구현하는 설정 방법을 알아보겠습니다.

 

1. 

DOM 디버그용 자바스크립트 코드 설치하기

 

Click Heatmap의 기초 데이터를 수집하려면

당연히 해당 페이지의 DOM에서 발생하는

모든 클릭 이벤트를 추적할 수 있는

자바스크립트 코드가 필요합니다.

 

실제의 데이터 수집은

구글 태그 매니저의 [맞춤 자바 스크립트]

변수를 사용할 예정이지만

 

일단 관찰하려는 웹페이지에서

제대로 작동하는지 간단하게 확인할 수 있다면

당연히 더 좋습니다.

 

그래서

아래의 jQuery 자바 스크립트 코드를

사이트의 푸터에 추가해 주세요.

 

<script>
$(document).on('click', function(event){
    var sClickEventLbl = event.target.getAttribute('sv-attr');
    if(!sClickEventLbl)
        sClickEventLbl = 'sv_missed_object';
    console.log(sClickEventLbl + ' clicked');
});
</script>

 

2.

클릭 이벤트가 발생했는지 궁금한 DOM 객체에 attr 삽입하기

 

위의 jQuery 코드를 한번 더 유심히 보시면

event.target.getAttribute('sv-attr'); 라는 실행문을 보실 수 있습니다.

 

이 실행문의 의미는

DOM 객체에 클릭 이벤트가 발생하면

[sv-attr] 이라는 사용자 정의 속성의 값을 가져오라는 것입니다.

 

[sv-attr] 이라는 사용자 정의 속성의 값이 없으면

sv_missed_object라는 문자열을 표시하도록

예외 처리가 되어 있습니다.

 

[sv-attr] 이라는 사용자 정의 속성은

아래와 같은 방식으로 입력하세요.

 

<a sv-attr='mob_rev2_main_topmenu_emagazine' href="/emagazine">링크제목</a>

 

웹페이지에 위와 같이

모든 클릭 이벤트 리스너가 등록되고

클릭 가능한 특정 객체에

sv-attr 사용자 정의 속성이 등록되면

 

해당 클릭 객체를 클릭하거나 터치할 때마다

브라우저의 console 창에 

sv-attr 속성의 값이 출력됩니다.

 

단,

A라는 DOM 객체의 속성은 상속된다는 점을

항상 기억하셔야 합니다.

 

아래와 같이 A 태그가 IMG, I, P 태그 등으로 상속되면

sv-attr 사용자 정의 속성은

A 태그가 아니고 IMG, I, P 태그에 삽입해야 합니다.

 

<a href="/target"><img sv-attr='mob_rev2_main_topmenu_logo' src="//images/logo.jpg" alt=""></a>

<a href="/target"><strong sv-attr='mob_rev2_main_target'>sample title</strong><p sv-attr='mob_rev2_main_target'>sample description</p></a>

 

하지만,

아래와 같이 A 태그 하위에 위치해도

상속을 받지 않는 SPAN 태그와 같은 경우도 존재합니다.

 

<a href="#"><i sv-attr='mob_rev2_main_QNA_prev'><span class="sr-only">이전</span></i></a>

 

1항에서 안내해 드린 

모든 클릭 이벤트 리스너가 여려분을 도와주기 때문에

그냥 특정 태그에 sv-attr을 넣고 클릭한 후

해당 속성의 값이 브라우저 콘솔에

출력되는지 확인하다 보면,

 

자연스럽게 감이 오실 것입니다.

 

3.

그 많은 클릭 요소에 어떻게 사용자 정의 속성을 삽입하나요?

 

지금 이 생각을 하셨다면

맞는 생각이면서 동시에

처음부터 다시 고민하셔야 하는 문제의 근본을

비로소 발견하신 것일 수 있습니다.

 

수 많은 DOM 객체에 일일히 

사용자 정의 속성을 삽입하는 과정은

물론 매우 번거롭습니다.

 

하지만

현실의 측정 목표는 생각보다

단순하고 간단한 이유는 크게 두 가지입니다.

 

*.

측정해야 하는 클릭 객체는 많지 않습니다.

 

이전 포스팅에서도 거론되었던

Universal Analytics의

Enhanced link attribution 보고서를 보면

 

구글애널리틱스_인사이트_보고서.png

- 클릭 히트맵을 추적해야 하는 객체는 몇개 안됩니다.

 

사용자가 관심을 갖는 클릭 객체는

웹사이트 운영자가 제발 클릭해 달라고

애원하는 요소들에 한정되기 때문입니다.

 

대부분의 웹사이트가 해결해야 하는 문제는

제발 클릭해 달라고 애원해도 클릭하지 않는 상황이고

운영자가 상상도 못한 링크를 클릭하는 상황이 아닙니다.

 

웹사이트에서

클릭해주기를 애원하는 요소가 20개 이상이라면

Click Heatmap을 측정할 단계가 아니고

해당 페이지의 운영 목적을 재검토하셔야 합니다.

 

*.

첫 뷰포트 이후의 요소는 거의 클릭하지 않습니다.

 

스크롤이 매우 길고 클릭 요소가 많은 웹페이지라 해도

대부분의 사용자는 왠만하면

첫 뷰포트를 넘어가지 않습니다.

 

뷰포트_하단의_클릭.png

- 스크롤 하단의 클릭율은 감지 불가능한 경우가 많습니다.

 

첫 뷰포트 이후의 클릭 요소에 대해

Universal Analytics의

Enhanced link attribution가

아무것도 보고하지 않는 이유는

 

대부분의 방문자가 해당 뷰포트를

아예 보지도 않았기 때문입니다.

 

아래의 스크롤 진행율 그래프를 보시면

방문자의 90%가 전체 스크롤 높이의 10%만 보고

해당 페이지를 떠나는 현상을 확인하실 수 있습니다.

 

수직_스크롤_진행률.png

- 운영자의 희망과 달리 수직 진행율이 급락하는 웹페이지 사례

 

10%는 집중해서 봤을까요?

 

그래서

사용자 정의 속성을 입력할 일은

그렇게 많지 않습니다.

 

오히려

가능하면 단일 페이지의 목적을 간단하게 하고

스크롤 높이와 클릭 요소의 숫자도 줄이는 것이

결국 방문자 UX 개선의 시작인 경우가 많습니다.

 

4.

이제 웹페이지 준비 작업은 끝났습니다.

 

만약

구글 태그 매니저가 익숙하지 않고

구글 애널리틱스를 통해서

클릭 히트맵 추적이 더 급하시다면

 

1항에서 등록한 이벤트 리스너를

아래와 같이 변형하면 

클릭 히트맵 로우 데이터가

즉시 구글 애널리틱스로 전송됩니다.

 

<script>
$(document).on('click', function(event){
    var sClickEventLbl = event.target.getAttribute('sv-attr');
    if(!sClickEventLbl)
        sClickEventLbl = 'sv_missed_object';
    console.log(sClickEventLbl + ' clicked');
    
    // 구글 애널리틱스 4에 전송
    gtag('event', sClickEventLbl, {
        click_text: 'sv_custom_click'
    });
    // 유니버설 애널리틱스에 전송
    ga('send', 'event', {
        'eventCategory': 'heatmap',   // Required.
        'eventAction': 'click',      // Required.
        'eventLabel': sClickEventLbl,
        'nonInteraction': 1 // true indicates that the event hit will not be used in bounce-rate calculation.
    });
});
</script>

 

저수준의 구글 애널리틱스 API를 이용하여

웹 페이지에서 직접 beacon을 전송하는 방법도

잘 작동해서 유용한 시사점을 얻으면 그만이긴 합니다.

 

하지만,

개발자와 기획자 등이

혼재된 팀에서 협업하는 상황이라면

 

구글 태그 매니저의 컨테이너를 설정하고

좀 더 체계적인 버전 관리 기능을 이용하여

클릭 히트맵 추적 과정을 고도화할 수 있습니다.

 

혹은

반드시 그래야 할 수도 있습니다.

 

특히,

구글 애널리틱스 4를 도입한 상황이라면

더욱 더

개발자와 기획자의 원활한 협업을

촉진시키기 위해

구글 태그 매니저가 필수적입니다.

 

더하여,

운영 서버에 존재하는 특정 웹페이지에서

복잡한 필드 테스트를 진행해야 한다면

 

해당 웹서버의 소스 코드에

FTP로 직접 접근하는 방식은

많은 경우 백해무익합니다.

 

구글 태그 매니저의 구조 상

운영 페이지에 런타임 오류를

발생시키기 어렵기도 하지만

 

본의 아니게 그런 상황이 발생했다 해도

버전 추적 기능을 이용해서

매우 신속하고 정확하게

복구할 수 있기 때문입니다.

 

이러한 구글 태그 매니저의

장점을 활용하며

클릭 히트맵 데이터를

구글 애널리틱스로 전송하는 방법을

다음 포스팅에서 자세히 살펴보겠습니다.

 

다음 포스팅 보러 가기

?

  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 Views336
    Read More
  2. 22
    May 2022
    11:18

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

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

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

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

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

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

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

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

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

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

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

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

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

    이번 포스팅부터 몇 회에 걸쳐 UX 평가에 매우 유용한 도구인 Click 혹은 Scroll 시각화를 구글 태그 매니저와 구글 애널리틱스를 활용하여 직접 측정하는 방법을 알아보겠습니다. 웹 사이트의 UI와 관련된 업무를 하다보면 UX에 관한 고민이 시작될 수 밖에 ...
    Bysingleview.co.kr Views126
    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 Views115
    Read More
  10. 13
    Nov 2021
    15:30

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

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

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

    이번 포스팅에서는 Explorer 화면으로 접근하실 수 있는 FUNNEL 보고서를 활용하는 사례를 살펴보겠습니다. 지난 포스팅에서는 구글 애널리틱스 4의 Explorer 화면 중 Tab Settings 탭을 자세히 알아봤습니다. Explorer 화면 중 Tab Settings 탭 알아보기 그런...
    Bysingleview.co.kr Views558
    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 Views697
    Read More
  13. 24
    Oct 2021
    06:34

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

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

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

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

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

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

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

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

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

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

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

    이제 Google Analytics 4의 Custom event를 살펴볼 차례입니다. 만약 Recommended Events의 개념을 머리속으로 정확히 떠올리실 수 없다면 이전 포스팅을 확인하셔야 합니다. 이전 포스팅 보러 가기 Universal Analytics에 익숙한 개발자라면 Google Analytics...
    Bysingleview.co.kr Views345
    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 Views354
    Read More
  20. 28
    Aug 2021
    17:57

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

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