object(stdClass)#510 (13) { ["category_srl"]=> NULL ["order_type"]=> string(4) "desc" ["page"]=> string(1) "3" ["list_count"]=> string(2) "20" ["page_count"]=> string(2) "10" ["start_date"]=> NULL ["end_date"]=> NULL ["member_srl"]=> NULL ["member_srls"]=> NULL ["sort_index"]=> string(10) "list_order" ["module_srl"]=> int(160) ["exclude_module_srl"]=> NULL ["statusList"]=> array(2) { [0]=> string(6) "SECRET" [1]=> string(6) "PUBLIC" } }

string(24) "document.getDocumentList"

object(BaseObject)#459 (9) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(2) { ["_query"]=> string(614) "SELECT `documents`.`title`, `documents`.`nick_name`, `documents`.`regdate`, `documents`.`readed_count`, `documents`.`content`, `documents`.`document_srl`, `documents`.`module_srl`, `documents`.`category_srl`, `documents`.`lang_code`, `documents`.`member_srl`, `documents`.`last_update`, `documents`.`comment_count`, `documents`.`trackback_count`, `documents`.`uploaded_count`, `documents`.`status`, `documents`.`title_bold`, `documents`.`title_color` FROM `xe_documents` as `documents` WHERE ( `module_srl` in (?) and `status` in (?,?) ) and `list_order` <= 2100000000 ORDER BY `list_order` desc LIMIT 40, 20" ["_elapsed_time"]=> string(7) "0.00322" } ["httpStatusCode"]=> NULL ["total_count"]=> int(48) ["total_page"]=> int(3) ["page"]=> string(1) "3" ["data"]=> array(8) { [8]=> object(stdClass)#458 (17) { ["title"]=> string(74) "구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 2" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220410134846" ["readed_count"]=> int(867) ["content"]=> string(16685) "

지난 포스팅에서는

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

 

Click Heatmap이

매우 유용한 도구이지만

몇 가지 분명한 한계 때문에

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

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

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

 

이전 포스팅 보러 가기

 

이번 포스팅에서는

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

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

 

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

구글 애널리틱스에 직접 전송하기 위해

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

 

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로 직접 접근하는 방식은

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

 

구글 태그 매니저의 구조 상

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

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

 

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

버전 추적 기능을 이용해서

매우 신속하고 정확하게

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

 

이러한 구글 태그 매니저의

장점을 활용하며

클릭 히트맵 데이터를

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

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

 

다음 포스팅 보러 가기

" ["document_srl"]=> int(20202) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20230514120046" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(2) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [7]=> object(stdClass)#457 (17) { ["title"]=> string(74) "구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 3" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220417173201" ["readed_count"]=> int(1042) ["content"]=> string(17455) "

지난 포스팅에서는

유료 솔루션을 사용하지 않고

Click Heatmap의 로우 데이터를 

직접 더 정교하게 수집하는 방법 중에서

 

저수준 자바스크립트 API로

구글 애널리틱스에 직접 전송하는 방식을

자세히 알아봤습니다.

 

이전 포스팅 보러가기

 

이번 포스팅에서는

구글 태그 매니저를 이용해서

보다 체계적으로

Click Heatmap의 로우 데이터를 

직접 더 정교하게 수집하는 방법을 알아보겠습니다.

 

1. 글로벌 태그 생성하기

 

*.

구글 애널리틱스 4의 

글로벌 태그 생성 방법은

아래의 포스팅에서 2항까지 따라하시고

기본 작동을 확인하세요.

 

GTM에서 구글 애널리틱스 4의 글로벌 태그 생성하기

 

*.

유니버설 애널리틱스(=구버전)의

글로벌 태그 생성 방법은

아래의 포스팅에서 3항까지 따라따라하시고

기본 작동을 확인하세요.

 

GTM에서 유니버설 애널리틱스의 글로벌 태그 생성하기

 

단,

유니버설 애널리틱스(=구버전)는

2023년 7월 1일부터 데이터가 갱신되지 않습니다.

 

아직 유니버설 애널리틱스만 사용하신다면

이제는 정말로

구글 애널리틱스 4로 이전하셔야 합니다.

 

2. 기본 변수 추가하기

 

구글 태그 매니저는

페이지에 존재하는 모든 DOM 요소의

클릭 이벤트를 추적하기 위한

기본 변수를 제공합니다.

 

구글태그매니저_기본변수_추가.png

 

위의 캡처 화면을 보시면

두 가지 데이터 영역 변수가

추가된 결과를 보실 수 있습니다.

두가지 데이터 영역 변수를 추가하는 방법은

오른쪽 상단의 [구성] 버튼을 클릭하면 나타나는

선택 박스에서 해당 변수를 체크하는 것입니다.

 

구글태그매니저_기본변수_선택.png

 

본 포스팅의 주제는 Click Heatmap인데

Scroll Depth Threshold 변수까지

추가하는 이유는 두 가지입니다.

 

*.

특정 DOM을 클릭하지 않았다면

안 봐서 클릭하지 않은 것인지

봤는데 클릭하지 않은 것인지에 따라서

분석의 방향이 달라집니다.

 

그래서

어느 뷰포트까지 봤는가?라는 질문은

Click Heatmap 분석에서 매우 중요합니다.

 

동일한 이유로

 

*.

대부분의 Heatmap 상용 솔루션이

세로 화면의 Scroll 진행률을 기본 제공합니다.

 

Click Heatmap의 로우 데이터를

직접 수집할 때에도

Scroll Depth Threshold 변수를

굳이 제외해서 얻을 이익이 없습니다.

 

 

마지막으로

아래의 5가지 기본 제공 변수는

컨테이터가 생성될 때 자동 추가됩니다.

3. 사용자 정의 변수 추가하기

 

방금 추가한 Click Element라는

기본 제공 변수와 연동하여

 

방문자가 페이지 상에서

클릭 이벤트를 발생시킬 때마다

 

여러분께서 해당 DOM에

sv-attr 속성을 추가했다면

그 값을 구글 태그 매니저로 불러오는

명령을 추가할 차례입니다.

 

이러한 작동은 아래의 캡처에서 보실 수 있는

맞춤 자바 스크립트 변수를 이용합니다.

 

구글태그매니저_사용자정의변수_추가.png

 

오른쪽의 [새로 만들기] 버튼을 클릭하면

팝업 화면이 나타납니다.

 

*.

변수명을 var_clicked_sv_attr이라고 입력하세요.

 

*.

변수 유형은 맞춤 자바 스크립트로 선택하세요.

 

*.

맞춤 자바 스크립트의 값은

아래의 코드를 복사하여 붙여넣으세요.

 

function() {
  var sClickEventLbl = jQuery({{Click Element}}).attr('sv-attr');
  if(!sClickEventLbl)
  {
    sClickEventLbl = 'sv_missed_object';
  }
  return sClickEventLbl;
}

 

위의 절차를 완료하셨다면

팝업 화면은 아래와 같습니다.

 

[저장]을 누르세요.

 

구글태그매니저_사용자정의변수_입력.png

 

4. 클릭 이벤트 트리거 새로 만들기

 

이제

방문자가 페이지 상에서

클릭 이벤트를 발생시킬 때마다

 

구글 태그 매니저가

신호를 전송하도록 명령해야 합니다.

 

그러한 기능은 트리거로 구성합니다.

 

좌측 메뉴에서 [트리거]를 선택하시고

[새로 만들기] 버튼을 클릭하세요.

 

*.

트리거 명은 trig_main_page_click라고 입력하세요.

여러분의 입맛에 맞게 바꾸셔도 되지만

처음 따라하며 익히실 때에는

사소한 변수명 차이로

전체 기능이 작동하지 않을 수 있으므로

가능한 그대로 복붙하세요.

 

*.

트리거 유형은 [클릭 - 모든 요소]를 선택하세요.

 

*.

이 트리거를 실행시키는 조건은

여러분의 상황에 맞게 선택하셔야 합니다.

 

모든 절차를 완료했다면

아래와 비슷한 화면을 확인하실 수 있습니다.

[저장]을 누르세요.

 

구글태그매니저_트리거_추가.png

 

5. 스크롤 이벤트 트리거 새로 만들기

 

Click Heatmap의 쌍두마차인

스크롤 진행율 보고서를 위한

데이터도 수집하면 더 좋습니다.

 

동일한 [트리거] 화면에서

[새로 만들기] 버튼을 클릭하세요.

 

*.

트리거 명은 trig_scroll_content_detail_page라고 입력하세요.

 

*.

트리거 유형은 [스크롤 깊이]를 선택하세요.

 

세로 스크롤 깊이를 선택하시고

비율 혹은 픽셀 값을 원하시는대로 입력하세요.

 

*.

트리거를 실행 조건은

창 로드(gtm.load)를 선탁하세요.

 

나머지 두 개의 조건인

을 선택하셔도

일반적으로 비슷한 결과가 발생하지만

미묘한 상황에서 미묘한 차이가 발생할 수 있습니다.

 

이 부분은 본 포스팅의 범위를

벗어나기 때문에 생략하겠습니다.

 

아무튼

모든 절차를 완료했다면

아래와 비슷한 화면을 확인하실 수 있습니다.

[저장]을 누르세요.

 

구글태그매니저_스크롤_트리거_추가.png

 

6. 클릭 이벤트 태그 새로 만들기

 

지금까지 변수와 트리거를 추가했습니다.

 

이제 추가한 변수와 트리거를 조합해서

마치 새로운 HTML 태그처럼 작동시키는

태그를 직접 생성할 차례입니다.

 

그러한 기능은 [태그]로 구성합니다.

 

클릭 태그는

방문자가 페이지 상에서 

클릭 이벤트를 발생시킬 때마다 작동합니다.

 

좌측 메뉴에서 [태그]를 선택하시고

[새로 만들기] 버튼을 클릭하세요.

 

*.

태그 명은 tag_click_event라고 입력하세요.

 

*.

태그 유형은 [Google 애널리틱스: GA4 이벤트]를 선택하세요.

 

*.

구성 태그는[GA4 Global tag]를 선택하세요.

 

만약 구성 태그 선택 박스에서

[GA4 Global tag]를 확인할 수 없다면

 

본 포스팅의 1항인

글로벌 태그 생성하기에서

뭔가 누락하셨을 것입니다.

 

*.

이벤트 이름은 우측의 + 아이콘을 누르시고

{{var_clicked_sv_attr}}를 선택하세요.

 

팝업창에서 이 변수명을 확인하실 수 없다면

3항에서 뭔가 누락하셨을 가능성이 높습니다.

 

*.

트리거는 trig_main_page_click을 선택하세요.

선택 박스에서 trig_main_page_click을 확인하실 수 없다면

 

4항 클릭 이벤트 트리거 새로 만들기에서

뭔가 누락하셨을 가능성이 높습니다.

 

위의 절차를 완료하셨다면

아래와 비슷한 화면을 보실 수 있습니다.

[저장]을 클릭하세요.

 

구글태그매니저_클릭_태그_추가.png

 

7. 스크롤 태그 새로 만들기

 

스크롤 태그는

방문자가 페이지 상에서 

스크롤 이벤트를 발생시킬 때마다 작동합니다.

 

정확히는 5항에서 설정하신

스크롤 이벤트 트리거에서 설정한

화면 높이 %나 픽셀 위치에서 작동합니다.

 

좌측 메뉴에서 [태그]를 선택하시고

[새로 만들기] 버튼을 클릭하세요.

 

*.

태그 명은 tag_scroll_depth_content_detail라고 입력하세요.

 

*.

태그 유형은 [Google 애널리틱스: GA4 이벤트]를 선택하세요.

 

*.

구성 태그는[GA4 Global tag]를 선택하세요.

 

*.

이벤트 이름은 우측의 + 아이콘을 누르시고

{{Scroll Depth Threshold}}를 선택하신 후

 

% scroll이라는 문자열을 추가로 복붙해 주세요.

 

팝업창에서 이 변수명을 확인하실 수 없다면

2항에서 뭔가 누락하셨을 가능성이 높습니다.

 

*.

트리거는 trig_scroll_content_detail_page을 선택하세요.

선택 박스에서 trig_scroll_content_detail_page을 확인하실 수 없다면

 

5항 스크롤 이벤트 트리거 새로 만들기에서

뭔가 누락하셨을 가능성이 높습니다.

 

위의 절차를 완료하셨다면

아래와 비슷한 화면을 보실 수 있습니다.

[저장]을 클릭하세요.

 

구글태그매니저_스크롤_태그_추가.png

 

 

8. 디버깅 하기

 

이제 Click Heatmap과 Scroll %를 측정하기 위한

변수, 트리거, 태그를 모두 추가했습니다.

 

아래와 같이 [개요] 메뉴를 선택한 후

[미리보기] 버튼을 누르세요.

 

구글태그매니저_미리보기.png

 

지금까지 구성한

태그가 작동하길 기대하는 URL을 입력하세요.

 

구글태그매니저_미리보기_url_입력.png

 

모든 설정이 정확하다면

여러분이 해당 URL의 페이지에서

클릭하고 스크롤을 움직일 때마다

아래와 화면에 태그된 이벤트들이

표시될 것입니다.

 

구글태그매니저_미리보기_결과출력.png

 

모든 설정을 정확히 완료하셨다면

[개요] 화면으로 돌아와서

[제출] 버튼을 클릭하세요.

 

그 이후의 버전 관리 절차는

구글 태그 매니저가

매우 직관적으로 제공하기 때문에

안내를 생략하겠습니다.

 

구글태그매니저_미리보기.png

 

여기까지 따라 오시느라 수고가 많으셨습니다.

 

그런데

데이터 수집은 분석을 위한 

기초 작업일 뿐이라는 점을

계속하여 기억하셔야 합니다.

 

분석없는 데이터 수집

다시 말해,

분석을 고려하지 않는 데이터 수집은

사실 시간과 집중력의 낭비일 뿐입니다.

 

다음 포스팅에서는

이렇게 수집한 클릭 Heatmap 데이터와

Scroll % 데이터를 활용하여

사이트 방문자의 UX를 평가하는

사례를 다루겠습니다.

 

다음 포스팅 보러 가기

" ["document_srl"]=> int(20320) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20230514115126" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(11) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [6]=> object(stdClass)#456 (17) { ["title"]=> string(74) "구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 4" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220423134936" ["readed_count"]=> int(988) ["content"]=> string(41485) "

구글 태그 매니저를 이용해서

Click Heatmap과 Scroll depth %의 로우 데이터를 

직접 더 정교하게 수집하는 방법을

지난 포스팅에서 자세히 알아보았습니다.

 

지난 포스팅 보러가기

 

이제 수집된 로우 데이터를 분석해서

시행 방안을 개선해야할 차례입니다.

 

이 단계부터는

여러분이 데이터 과학자가 되고 싶다면

지루할 수 밖에 없고

 

여러분이 온라인 마케터가 되고 싶다면

난해할 수 밖에 없습니다.

 

1.

여러분이 모든 것을 알아야 할 의무는 없습니다.

 

하지만

여러번 말씀드렸듯이

 

데이터 수집의 가치는 정교한 분석에 있고

데이터 수집의 최종 목표는 실행 개선입니다.

 

실행 개선을 고려하지 않은 수집과 분석은

그저 시간과 전기비를 낭비할 뿐입니다.

 

여러분께서

이 사실을 항상 기억하셔야 합니다.

 

왜냐하면

데이터 사이언스 전문가

교육 과정은 쏟아지지만

 

데이터 사이언스로 성과를 얻은 조직을

좀 처럼 찾기 힘들기 때문입니다.

 

실무 부서에서 적극적으로 실행에 관여할 수 있는

데이터 과학자 혹은 분석가는

모래밭에서 바늘 찾기보다 어렵습니다.

 

왜 그럴까요?

 

데이터 과학자 혹은 분석가는

데이터를 분석하는 여러가지 기술만

깊이 공부하는 데 전력을 기울이느라

 

마케팅이나 영업 부서의 실무를

경험할 시간이나 기회가 

당연히 없었기 때문입니다.

 

실무 부서의 책임자인 여러분께서

시장에서 살아남느라 전력을 다했는데

복잡한 통계학을 몰라서 무능하다고 하면

매우 억울하신 것과 동일한 입장입니다.

 

여러분께서 현재

데이터 과학자이던 혹은

실무 부서의 책임자이던

 

충분한 시간 동안 여러 분야를

체계적으로 경험하고 연구하시면

당연히 최강 분석력과 실행력을 

모두 갖추실 것입니다.

 

하지만

현실에서는 사장님께서

좀 처럼 여러분의 성장을

침착하게 기다려주시지 않습니다.

 

2.

여러분이 분석과 실행의 흐름을 알아야 할 의무는 있습니다.

 

그렇다면

유능한 데이터 과학자의 숫자가 훨씬 적으니

카리스마 넘치는 데이터 과학자를 영입해서

실무 부서를 지혜롭게 이끌기를 바래야 할까요?

 

현실에서는 불가능하고

필요한 구조는 정반대이기도 합니다.

 

시장을 깊이 이해하지만

분석력이 약한 실무 실행팀에서

시장을 전혀 모르고 분석 방법만 잘 아는

데이터 과학자가 검증할 가설을 제시해야 합니다.

 

모든 데이터를 수집하고 분석하는 과정은

시장에서 살아남기 위한 노력이기 때문입니다.

 

데이터를 수집하고 분석하기 위해

시장이 존재하는 것이 절대 아닙니다.

 

누군가에게는 서글픈 이야기라도

냉정한 생존의 논리입니다.

 

위와 같은 이유로

본 포스팅의 내용이

Click Heatmap 분석 도구에 대한

설명에서 잠시 벗어나야 합니다.

 

3.

전통 인쇄 매체사의 온라인 확장 성과 평가 사례

 

Click Heatmap이라는 단어만으로도

이 분석 도구의 특징은 쉽게 짐작할 수 있습니다.

 

그래서

Click Heatmap이라는 도구를 

언제 왜 어떻게 사용하느냐는 분석의 정황이

Click Heatmap이라는 도구의 상세 설명보다

훨씬 더 중요합니다.

 

여러분께서 실제 사례를 바탕으로

Click Heatmap이라는 도구의 의미를

더 깊게 이해하시길 바라기 때문에

 

출판 역사가 길어서

충분한 컨텐츠 전문성과 시장 인지도를 확보한

전통 매체사가 과거 수년간 시행해 온

온라인 인지도 확장 노력의 성과를

정량적으로 평가하는 실제 사례를

소개해 드리겠습니다.

 

카테고리_리더_잡지사.png

- 오랜 기간 매월 유명 인사가 등장하는 표지는 매체의 신뢰성을 더해 줍니다.

 

회사의 고민을 이해하셔야 

Click Heatmap 도구를 채택한 이유도

정확하게 이해할 수 있습니다.

 

4.

해야할 것을 모두 열심히 하는데 하락하는 온라인 성과?

 

인쇄 잡지의 매체력은 

Readership이라는 전통적인 측정 기준이 있습니다.

 

Readership이라는 단어가 어색하시다면

아래의 포스팅을 참고하세요.

 

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

 

인쇄 잡지의 Readership은

정확한 측정이 불가능하기 때문에

잡지사 내부에서는 매우 간단하게 정의하곤 합니다.

 

예를 들어,

잡지사 사장님께서 인쇄소와 배송 업체에

지불한 비용이 해당 잡지의

상대적인 Readership 추세일 수 있습니다.

 

그러나

이러한 인쇄 잡지 운영 경험을 

온라인으로 단순히 확장하면

온라인 Readership 확보와 강화에

무의미하거나 방해가 될 수 있습니다.

 

실제로

잡지사 경영진의 고민과 질문에

지난 수년간 누구도 답을 제시하지 못했습니다.

 

*.

해당 잡지사 홈페이지의 

명목 방문수와 노출수는 많지만

이 방문자들은 잡지사와 그 광고주에게 

재무 가치를 제공하고 있을까요?

 

*.

잡지사의 온라인 활동은 큰 문제가 없어보이는데

왜 온라인 매출은 계속하여 부진할까요?

 

수년간 방황하시다 싱글뷰를 찾아오셨습니다.

 

경영진에게 혜안을 드리려면

무엇을 어떻게 관찰해야 할까요?

 

5.

온라인에서도 근면하고 꾸준했지만...

 

그 동안 잡지사의 경영진은

자사 홈페이지 전체 방문수 위주로

온라인 성과를 점검했다고 말씀했습니다.

 

방문자수.png

 

방문자수만 보면 명확한 상승 추세가 아닐 뿐

아무런 문제도 없는 것 같습니다.

 

심지어는 해당 시장은 포화 상태여서

방문자수의 정체는 당연해 보입니다.

 

그런데

이 당연함에도 함정이 숨어있습니다.

 

잡지사의 메인 페이지 방문수는

유료 광고 비용을 증액하거나

무료 경품 행사를 강화하면

당연히 상승하기 때문입니다.

 

실제로 그러한 노력을 꾸준히

많이 하신 것으로 드러났습니다.

 

그래서 안타깝게도

장기간 관찰하신 경영 성과 지표는

경영진 스스로 왜곡하셔서

시장의 반응과 동떨어진 

허수일 가능성이 높아졌습니다.

 

하지만 

완전히 무의미하지도 않습니다.

 

유료 광고 비용이나

무료 경품 행사의 성과를

측정했다고 볼 수도 있기 때문입니다.

 

6.

자연 검색 방문수도 나쁘지 않은데?

 

저희는 단순 방문수가

경영 성과를 검증하는 KPI가 아니고

경영 성과 검증을 방해하는

잘못된 지표임을 증명하기 위해

 

잠재 고객들이 Organic search를 통해서

개별 컨텐츠 페이지에 직접 방문한 추이를

신중하게 살펴봤습니다.

 

해당 잡지사 측에서 자부심을 느끼시는

전문 컨텐츠 혹은 네이티브 광고에 대한

잠재 고객들의 태도를 추정할 수 있기 때문입니다.

 

그러므로

이와 관련된 지표가 꾸준히 하락한다면

온라인 성과 하락의 원인일 수 있습니다.

 

하지만

잡지사의 경영진은 자연 검색 방문수도

장기간 근면하게 관리하셨다고 합니다.

 

실제로

동기간 데이터를 살펴보면

45%의 자연 검색 방문 비중은

훈장을 받을 수준은 아니지만

부족하다고 할 수도 없습니다.

 

자연검색_방문수.png

- 자연 검색(45%)와 Social(33%)만 합쳐도 충분히 양호합니다.

 

교과서에서 가르치는 방법들을

장기간 모범생처럼 따르셨는데

왜 온라인 성과가 지속 하락했을까요?

 

정말 알쏭달쏭 수수께끼 같았습니다.

 

7.

잘못된 관찰이 잘못된 실행을 유도한다!

 

전체 방문자의 페이지뷰와 

자연 검색 방문자들의 합산 페이지 뷰 사이에

계속 확대되는 괴리를 나타내는 그래프를 시작으로

수 년간 숨어 있던 문제가 드러나기 시작합니다.

 

전체방문수_자연방문수.png

 

그저 매혹적인 프로모션에 이끌린 분들보다

전문 컨텐츠를 보러 오신 분들의

합산 PV가 더 클 가능성이 높습니다.

 

프로모션에 응모하는 단순하고 단일한 목적보다

컨텐츠를 둘러 보려는 행동이 

더 많은 PV를 유도하기 때문입니다.

 

그런데 

전체 방문자의 PV 총량은 증가하지만

자연 검색 방문자들의 PV 총량은 정체입니다.

 

잡지사 경영진께서 자부심을 느끼는 

컨텐츠 품질에 대한 온라인 고객의 평가가

실체를 드러내기 시작했습니다.

 

8.

핵심 역량인 전문 컨텐츠에 대한 Readership을 정량화하기 위해

 

이제

자연 검색 방문자들의 PV 총량이

정체하는 원인을 더 자세하게 살펴야 합니다.

 

개별 컨텐츠 페이지의 

평균 PV와 체류시간만으로는

온라인 방문 고객들이 컨텐츠를

어떻게 평가하는지 이해하기 어려운 이유가 있습니다.

 

*.

어떤 방문자가

첫 컨텐츠를 보니 매우 실망스러워서

만족스러운 컨텐츠를 찾기 위해

여러 페이지를 방문했다면

 

PV는 증가하지만 좋은 상황이 아닙니다.

 

*.

어떤 방문자가

컨텐츠 페이지를 클릭한 순간
중요한 전화가 와서
5분 정도 통화를 했다면
 
체류 시간은 증가하지만 좋은 상황이 아닙니다.
 
그래서
수십명의 잠재 고객을 초대해서
일일히 FGI를 시행하실 상황이 아니라면
 
아래의 두 가지 지표를 측정해서
컨텐츠 페이지에 대한 평가를
통계적으로 추정할 수 있습니다.

 

9.

비대면 조사에서 Readership을 측정하는 방법

 

*.

컨텐츠를 끝까지 볼수록 관심이 높다는 증거입니다.

 

일반적인 모바일 기기에서

View %는 뷰포트를 내려갈 때마다

약 50% 씩 급락하기 때문입니다.

 

대부분의 온라인 사업자가

첫 뷰포트에 사활을 거는 이유입니다.

 

*.

컨텐츠 주변 UI 요소에 반응할 수록

컨텐츠에 만족했다는 증거입니다.

 

컨텐츠 본문에 실망했다면

사이트를 나가 버리는 경우가 많습니다.

 

위와 같은

행동 심리학적인 가설을 바탕으로

컨텐츠 랜딩 페이지의 UX를 정의하고

 

자연 검색 방문자들의 열람 행태를 살피기 위해서

이제 Click Heatmap과

Scroll Depth Report을 활용하기로 결정했습니다.

 

핵심컨텐츠_열독률.png

 

방대한 온라인 컨텐츠에 대한 Readership을

Click Heatmap과 Scroll depth %를 활용하여

통계적으로 결정하는 과정은

매우 복잡하고 비약적이어서 까다롭습니다.

 

여기서 숨을 돌리지 않으면

너무 길어서 지루한 포스팅이

되어 버릴 것 같습니다.

 

다음 포스팅에서

잡지사의 경영진이 간과했던

온라인 컨텐츠에 대한 Readership 평과 결과를

여러분과 함께 살펴보겠습니다.

 

다음 포스팅 보러가기

" ["document_srl"]=> int(20414) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20220501160117" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(5) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [5]=> object(stdClass)#453 (17) { ["title"]=> string(74) "구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 5" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220501113225" ["readed_count"]=> int(2057) ["content"]=> string(11518) "

온라인으로 컨텐츠 서비스를 확장 중이지만

재무 성과가 기대에 미치지 못해서 고민에 빠진

전통 잡지사의 현황을 측정하기 위해

 

Click Heatmap과 Scroll Depth %라는 

측정 도구를 적용하기로 결정한 의사 결정 과정을

지난 포스팅에서 간단히 알아봤습니다.

 

지난 포스팅 보러 가기

 

Click Heatmap과 Scroll Depth %의

실제 데이터를 살펴보고

기존 시행의 문제점과 개선 방안을 도출하는

실제 사례를 살펴 보겠습니다.

 

1.

모바일 메인 페이지의 Readership 정량 평가

 

아래의 자동 스크롤 캡처 화면을 보시면

전문 컨텐츠 섹션이 첫뷰포트의 하단부부터

시작된다는 점을 이해하실 수 있습니다.

 

배너 광고 영업이 중요한 수익원이라서

첫 뷰포트에 자사의 전문 컨텐츠를

집중 배치하기는 어렵기 때문이었습니다.

 

이제 논쟁의 대상이었던

모바일 메인 페이지들의 주요 섹션을

간략히 살펴보겠습니다.

 

모바일_메인페이지_전체.png

 

*. 1번 동영상 섹션

 

그런데

동영상 매체 시대에 부응하여

의욕적으로 전진 배치한 1번 섹션에 대해서

방문자의 호응이 매우 낮은 것 같다는

논쟁만 장시간 지속되었을 뿐

 

내부의 어떤 부서도

이를 정량적으로 판단하지 못했습니다.

 

*. 2번 배너 광고 섹션

 

배너 광고를 이용한 수익을

더욱 확대하기 위해서

 

2번 섹션의 상단에는 3사 배너를 삽입하고

 

2번 섹션의 하단에는 잡지사의 자체 배너를

추가했다고 합니다.
 
그런데
이 배너의 섹션의 수익성이
전혀 없다는 의견과
 
수익성이 높지는 않지만
안하는 것보단 낫다는 의견이
장기간 대립하는 상태였습니다.

 

*. 3번 독자 참여 컨텐츠 섹션

 

3번 섹션은

독자들의 참여를 이끌기 위해서

의욕적으로 개설했습니다.

 

그런데

이 섹션만큼은 

모두가 중단해야 한다고 쉽게 합의했습니다.

 

정량적인 분석 도구가 없어도

매우 낮은 독자 참여율이 명확했습니다.

 

전통 잡지사의 임직원분들은

오랜 시간 논쟁과 망설임에 시달리셨지만

각 섹션에 대한 의구심을 밝히는 방법은

사실 매우 간단하고 직관적입니다.

 

의심이 가는 섹션을 없애고

방문자 행태를 비교해보면

빠르고 정확해서 논쟁도 급감합니다.

 

다만,

다른 대부분의 경우와 마찬가지로

전통 잡지사 부서에는

이 비교 테스트를 이해하고

실행할 수 있는 분들이 근무하지 않으셨고

 

그것이 무엇인지 모르는 상태에서 

쉽게 구하실 수 있었던

전문가 혹은 업체들도 한결같이

엉터리라는 문제에 시달리셨을 뿐입니다.

 

준비되지 않은 분들과 엉뚱한 만남으로

전통 잡지사는 이미

상당한 시간을 허비하셨기 때문에

조사와 분석의 시간을 최대한 단축해야 했습니다.

 

구글 옵티마이즈와 

구글 태그 매니저를 적절히 구성하여

 

원본 페이지와 대안 페이지의

목표 전환율에 대한 AB Split test를 진행하면서

Click Heatmap과 Scroll depth %도 동시에 측정했습니다.

 

이제 충격적일 정도로 허무한

결과를 살펴볼 차례입니다.

 

2.

방문 고객의 생각은 사이트 관리자와 다릅니다!

 

허무하게도

전통 잡지사의 임직원분들은

 

모바일 메인 페이지 방문 고객들은

애초에 보시지도 않는 섹션을 두고

고민을 지속하신 것으로 밝혀졌습니다.

 

여러분께서도

아래의 두 그래프를 보시면

허무해서 안타까운 수고를 공감하실 것 같습니다.

 

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

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

 

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

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

 

논란의 중심이었던 동영상 컨텐츠 섹션을 제거하니

25% 스크롤 진행률이 급등했습니다.

 

잡지사 임직원분들께서 고민하셨던 2번과 3번 섹션은

방문 고객들이 거의 안보는 것으로 나타났습니다.

 

방문자들이 매우 민감하게 변화에 반응한다는 점은

전통 잡지사의 경영진에게 희망적인 소식이었습니다.

 

하지만

1차 테스트 결과 해석은

또 다른 질문으로 이어졌습니다.

 

*.

단지 동영상 컨텐츠 섹션을 제거하니

스크롤 진행률이 급등한 이유가 뭔가?

 

동영상 컨텐츠가 혐오스러웠다는 뜻인가?

 

*.

스크롤 50% 이후는 다소 개선되었지만

여전히 급락하는 이유가 뭔가?

 

예리하신 분들은 이미 느끼셨듯이

Click Heatmap은 분석할 필요도 없는 

상황이 되어 버렸습니다.

 

3.

모든 부서가 최선을 다했지만 냉소적인 방문자

 

두 가지의 질문에 답을 찾기 위해

스크롤 진행률을 비교한 두 페이지를

나란히 놓고 살펴보겠습니다.

 

변경 페이지의 스크롤 높이가

절반 가까이 감소했습니다.

 

그래서

변경 페이지의 스크롤 25% 진행률이 급증한 것은

방문자의 긍정적인 태도 변화일 수도 있지만

 

방문자의 태도는 동일한데

그저 산술적인 높이가 짧아진 결과일 수도 있습니다.

 

모바일_메인페이지_비교_테스트.png

 

그래서

단지 동영상 컨텐츠 섹션을 제거하니

스크롤 진행률이 급등한 이유는

아래와 같이 정리했습니다.

 

동영상 컨텐츠 섹션을 제거하여

스크롤 진행률이 급등한 것이 아니고

 

전체적인 스크롤 높이를 급감시켜서

산술적으로 진행률의 착시효과이다.

 

이러한 답은 두번째 질문과 연결됩니다.

 

스크롤 50% 이후는 다소 개선되었지만

여전히 급락하는 이유가 뭔가?

 

대다수의 방문자들은

전통 잡지사가 제시하는 

메인 페이지에 대해서 냉소적입니다.

 

단지 산술적인 개선 착시 효과가 발생했고

동영상 컨텐츠 섹션 제거 여부와는 무관합니다.

 

모두의 긍지 혹은 바램과 정반대로

 

전통 잡지사의 임직원들께서

상대적으로 높은 가치라고 평가한

컨텐츠 섹션에 대해서도

대다수의 방문자들은 무관심하다는 가설에

힘이 실리게 되었습니다.

 

4.

인쇄 잡지용 원고 단순 복붙은 헛수고

 

스크롤 진행률이 개선됨 혹은

스크롤 높이가 단지 줄어든 상황은

엉뚱한 부작용을 경고했습니다.

 

AB_테스트_결과.png

 

Readership이 의심스러운

동영상 컨텐츠 섹션을 제거해보니

회원 가입 전환율이 오히려 하락했습니다.

 

사람의 건강에 비유하면

어깨에 붙어있는 사마귀를 제거했더니

혈압이 떨어져 버리는 상황이었습니다.

 

우연히 혹은 그냥 떨어질 리는 없고

분명히 숨어 있는 연관성이 있을 것입니다.

 

복잡하게 얽힌 채 숨어있던 뿌리깊은 문제는 

 

대안 페이지에서

2번 섹션의 상단에 추가한 3사 배너를 

제거하는 과정에서 아주 교묘하게

AB split test 결과에 영향을 미쳤습니다.

 

그리고

Click Heatmap과 Scroll Depth %를 측정하려던 시도는

홈페이지 유지 보수사의 위선적인 이중성과

 

이러한 상황을 전혀 감지하지 못하고

수년간 폭력적인 바보로 행동하신 전통 잡지사의

복잡 미묘한 관계의 문제까지 이어졌습니다.

 

다음 포스팅에서 

온라인 마케팅을 어색하시는 조직에서

악의없이 저지르는 적대적인 행동의

문제까지 살펴보겠습니다.

" ["document_srl"]=> int(20546) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20220508171527" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(5) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [4]=> object(stdClass)#455 (17) { ["title"]=> string(74) "구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 6" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220508175720" ["readed_count"]=> int(2052) ["content"]=> string(21429) "

지난 포스팅에서는

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

원본 페이지와 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 관련 질문들이 존재하기 때문입니다.

 

이와 같이

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

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

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

 

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

 

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

 

지금까지 클릭 히트맵을 

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

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

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

 

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

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

" ["document_srl"]=> int(20610) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20230514115644" ["comment_count"]=> int(2) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(5) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [3]=> object(stdClass)#454 (17) { ["title"]=> string(73) "Google Analytics 4의 Referral에서 특정 도메인 제외하는 방법" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220522111855" ["readed_count"]=> int(2794) ["content"]=> string(7600) "

구글 애널리틱스 4의 [획득=Acquisition] 보고서를 살펴보면

referral이라는 단어가 자주 보입니다.

 

referral 트래픽을 분석하다 보면

가끔씩 특정 도메인 주소가 referral로 분류되지 않아야 

분석 업무가 더 수월해 지는 경우가 있습니다.

 

유입 트래픽 분석 업무에 아직 익숙하지 않으시다면

특정 도메인을 referral로 분류되지 않게 해야 하는

이유가 궁금하실 수도 있습니다.

 

가장 직관적인 상황은 신용카드 PG 결제를 사용할 때입니다.

 

브라우저에 표시되는

결제 정보 입력 화면에서

별도로 표시되는 결제 플러그인을 작동시키면

PG 사에서 제공하는 웹서버에 방문해야 하는 경우가 많습니다.

 

그래서

PG사가 제공하는 결제 진행 과정을 완료하고

원래의 쇼핑몰 사이트로 복귀하면

PG사의 웹서버가 referral 리스트에 등록됩니다.

 

아래의 예시에서 보실 수 있는

xpay.lgdacom.net도 그러한 도메인 중에 하나입니다.

 

또 다른 예는 bit.ly와 같은 단축 URL 서비스입니다.

 

이번 포스팅에서는 

구글 애널리틱스 4에서도 이러한 상황을 해결하기 위해

특정 도메인을 referral로 분류하지 않고 

Direct로 분류하는 방법을 알아보겠습니다.

 

1. referral 트래픽이란?

 

referral은 다른 웹사이트의 페이지에 표시된 링크를 클릭해서

여러분의 웹사이트에 방문한 세션이라고 매우 간단하게 정의할 수 있습니다.

 

이와 같은 Referral을 포함한 트래픽 보고서는

아래의 메뉴 위치에서 확인할 수 있습니다.

 

구글_애널리틱스_4_트래픽_획득_보고서.png

 

만약 위의 캡처 화면과 같이
해당 보고서가 Session default channel grouping을
표시하도록 기본 설정되어 있는데
Universal Analytics의 source / medium 보고서가 익숙하시다면
바로 오른쪽의 + 아이콘을 클릭해서 익숙한 설정을 구성할 수 있습니다.
 
구글_애널리틱스_4_소스_매체_획득_보고서.png

 

트래픽 종류가 너무 많아서 referral 목록이 안보이면

위쪽의 검색 상자에서 [referral]을 입력해서 찾을 수 있습니다.

 
구글_애널리틱스_4_소스_매체_획득_보고서_1.png

 

참고로,

어떤 세션이 여러분의 웹사이트에 utm_medium paramter없이 방문했는데,

HTTP Header에 referral 정보도 없다면,

구글 애널리틱스 4는 해당 세션을 Referral 중에서 Direct 트래픽으로 분류합니다.

 

Organic은 당연히 referral로 분류되어야겠죠?

 

이 분류가 당연한 이유를 쉽게 떠올리실 수 없다면

댓글로 부담없이 문의해 주세요.

 

2. referral 트래픽에서 특정 도메인 제외하기

 

Universal Analytics를 자주 사용하셨다면

Referrals Exclusion List 메뉴를 이미 생각하셨을 것 같습니다.

 

universal_analytics_referral_exclusion_list.png

 

구글 애널리틱스 4에서는 

아래와 같이 여러 단계의 관리자 메뉴를 거쳐서

List Unwanted Referrals 설정에 접근할 수 있습니다.

 

구글_애널리틱스_4_list_unwanted_referrals.png

 

Google Analytics 4를 자주 사용하시다보면

왠만한 설정 메뉴는 일단 More Tagging Settings에서

찾아봐야 한다는 점을 기억하시게 됩니다.

 

List Unwanted Referrals 설정 화면에 입력한 도메인은

보고서에서 referral traffic으로 분류하지 않고 direct traffic으로 보고합니다.

 

구글_애널리틱스_4_list_unwanted_referral_설정.png

 

3. 구글 애널리틱스 4가 List Unwanted Referrals 설정 화면에 입력한 도메인을 처리하는 방식

 

예를 들어서,

여러분이 www.singleview.co.kr라는 쇼핑몰을 운영 중인데
구매자가 PG 결제를 완료하려면 xpay.lgdacom.net을 거쳐와야 합니다.
 
여러분이 xpay.lgdacom.net 도메인을
List Unwanted Referrals 설정 화면에 입력하지 않으면
 
www.singleview.co.kr 도메인의 Traffic Acquistion 보고서에서 
xpay.lgdacom.net / referral로 표시됩니다.
 
쇼핑몰의 PG 결제수가 증가할 수록
xpay.lgdacom.net / referral은
naver.com / referral과 같은 순위로 상승해서
여러분이 분석할 때 방해가 됩니다.
 
이러한 상황을 개선하기 위해

List Unwanted Referrals 설정 화면에

xpay.lgdacom.net을 입력하여

xpay.lgdacom.net / referral이 더 이상 표시되지 않게 합니다.

 

그런데

Google Analytics 4는

위의 화면에 입력한 예외 도메인이 포함된 이벤트를 발견하면
ignore_referrer 파라미터를 태깅하고 true 값을 설정합니다.
 
다음 포스팅에서는
구글 애널리틱스 4의 self-referral에 관해서 알아보겠습니다.
 
다음 포스팅 보러가기
" ["document_srl"]=> int(20631) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20220529085319" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(6) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [2]=> object(stdClass)#452 (17) { ["title"]=> string(61) "Google Analytics 4에서 self-referral을 처리하는 방식" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220529074512" ["readed_count"]=> int(2857) ["content"]=> string(20308) "

지난 포스팅에서는 

구글 애널리틱스 4에서

List Unwanted Referrals 항목을 설정하여

특정 도메인을 source = referral에서

제외하는 방법을 알아봤습니다.

 

지난 포스팅 보러가기

 

이번 포스팅에서는 밀접하게 연관되 주제인

Google Analytics 4의 self-referral을 살펴보겠습니다.

 

1. self-referral이란

 

매우 현실적인 GA 분석자 관점으로 정의하면

여러분의 획득 -> 사용자 획득 보고서의

소스 매체 항목에 여러분의 도메인 주소가 

표시되는 상황입니다.

 

신규 사용자는 여러분의 홈페이지 바깥에서 획득해야합니다.

 

이미 여러분의 홈페이지에 방문한 사용자를

신규 획득한 사용자라고 보고하면

그냥 뭔가 잘못되었다고 이해해도 충분합니다.

 

구글애널리틱스4_사용자획득_보고서.png

 

구글 애널리틱스 4는

Universal Analytics보다 더 똑똑해져서 

이러한 문제를 스스로 진단하는 기능도 있습니다.

 

구글애널리틱스4_self-referral_감지.png

 

위와 같이

트래킹 코드가 감지되지 않는 페이지 경고와 함께

Self-Referrals 감지 경고가 표시되는 경우도 있습니다.

 

2. GA4가 self-referral을 스스로 감지하는 경우는?

 

아래와 같은 조건이 충족된다면

Google Analytics 4는 1항의 상황이

발생하지 않도록 스스로 조정합니다.

 

*. 현재 페이지에 global site tag이 감지되는데,

   referrer에도 여러분의 홈페이지 주소가 포함된 경우

*. 현재의 referrer에 여러분이 cross-domain tracking을

   설정한 결과가 표시되고 현재 페이지에 "_gl" 인수가

   설정되었을 때

 

참고로,

여러분이 cross-domain tracking을 설정했다면

GA4가 발행한 쿠키가 _gl이라는 linker 인수를 통해서 

여러분이 설정한 여러 도메인으로 이전됩니다.

 

특히

첫번째 자동 수정 조건을 역으로 해석하면

여러분의 global site tag를 설치할 수 없는 페이지에

여러분의 사용자가 방문할 수 밖에 없는데

 

여러분은 그 도메인 주소가 

소스 매체 항목에 표시되지 않기를 바란다면

이전 포스팅에서 안내해 드린 

List Unwanted Referrals 항목에 등록해야 합니다.

 

이와 관련된 구글의 테크독을 살펴보고 싶으시다면

아래의 페이지를 방문하세요.

 

https://support.google.com/analytics/answer/10327750

 

동일한 논리로

여러분의 global site tag를 설치할 수 있는

페이지의 도메인 주소가

소스 매체 항목에 표시되지 않기를 바란다면
가능한 빨리 고쳐야겠죠?
 
이 오류를 방치하면 단순히
소스 매체 보고서의 문제로 끝나지 않기 때문입니다.
 
3. self-referral이 일으키는 연쇄 오류들

 

여러분의 도메인 주소가 

소스 매체 보고서에 표시된다면

 

세션, 획득, 전환, 행태 지표 등

모든 GA 4 데이터에 오류가 확산되었다는 증거입니다. 

 

*. 분석의 중요한 기반인 세션 지표가 오염됨

 

여러분의 홈페이지 중 일부가 

다른 홈페이지라는 착각을 일으키면

당연히 세션수가 과장됩니다.

 

모든 분석의 중요한 기반 지표인

세션수가 왜곡되면 그 이후의 고급 응용 분석은

모두 헛소리가 되버립니다.

 

*. 체류 행태 지표가 제멋대로 왜곡됨

 

세션은 그저 과장될 뿐이지만

전환 성과는 제멋대로 왜곡되서

전체 지표가 쓰레기가 되버립니다.

 

예를 들어 볼까요?

 

A라는 방문자가 utm_parameter가 

정확하게 설정된 네이버 CPC 키워드 광고를 클릭해서

여러분의 홈페이지에 방문해서 살펴보는 중입니다.

 

우연히,

self-referral 문제가 있는 페이지에도 방문한 순간,

A 방문자는 그저 동일 홈페이지를 계속 탐색할 뿐이지만

GA 4는 A 방문자가 여러분의 홈페이지를 떠나서

 

self-referral 문제가 있는 홈페이지(=여러분의 홈페이지)에 방문한 후

self-referral로 태그되어 여러분의 홈페이지로 재방문한 

A 방문자로 구분하여 집계하여 1 세션이 2세션으로 과장됩니다.

 

사이트 체류 시간이나 방문한 페이지 수 등도

동일 사용자가 self-referral 문제가 있는 페이지에

방문할 때마다 제멋대로 분할되게 됩니다.

 

*. 전환 성과가 심각하게 왜곡됨

 

A 방문자가 홈페이지의 전환 목표를 달성했다면

상황은 더욱 엉뚱해집니다.

 

A 방문자의 전환 성과는

네이버 CPC 키워드 광고의 공헌으로 집계해야 하지만

엉뚱하게도 여러분의 홈페이지가 그 기여를 차지합니다.

 

3. 대표적인 self-referral 발생 원인

 

이러한 상황은 일반적으로

아래와 같은 실수를 의심하셔야 합니다.

 

*. 일부 페이지에 GA4용 global site tag가 설치되지 않고

   Universal Analytics용 tag(=ga.js)가 남아있음

 

*. 일부 페이지에 GA4 property ID가 누락되었거나 잘못기재 됨

 

*. 일부 페이지에 java script run-time error 등으로 인해 

   global site tag가 작동하지 않음

 

*. cross-domain tracking 설정에서 실수가 발생함

 

*. 방문자가 같은 페이지에서 30분 이상 체류함.

 

마지막 상황은 주로

구직 사이트에서 이력서 작성, 혹은

여행 예약 사이트에서 일정표 작성과 같은

사용자가 매우 복잡한 내용을 입력해야 하는 경우입니다.

 

이와 관련하여 다음 포스팅에서는

Google Analytics 4의 세션 time out에 관해

자세히 살펴본 후

 

다소 복잡한 GA4 설정인

크로스 도메인 트래킹을 자세히 살펴보겠습니다. 

" ["document_srl"]=> int(20726) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20220529085225" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(2) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [1]=> object(stdClass)#451 (17) { ["title"]=> string(39) "[NCP] cloud search 기본 설정 방법" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20230731104703" ["readed_count"]=> int(1044) ["content"]=> string(12405) "

프로젝트의 필요에 의해서

PHP기반인 Xpress Engine의

사이트 전체 검색 성능을 강화하기 위해

네이버 클라우드 서치를 검토했습니다.

 

https://www.ncloud.com/product/analytics/cloudSearch

 

이번 포스팅에서는

네이버 클라우드 서치의 매력적인 성능을 

PHP 기반의 CMS에 적용하면 더 좋다고 판단하여

네이버 클라우드 서치의

최초 기본 설정법을 설명합니다.

 

다음 포스팅에서는

PHP 환경에서 API 구현 사례를 

자세히 기술하겠습니다.

 

본 포스팅의 내용은

네이버 클라우드 서비스에

회원 가입과 결제 수단을 등록했다는 전제입니다.

 

네이버 클라우드 메인 페이지에서

서비스 -> Big Data & Analytics -> Cloud Search의

순서로 서비스 메인 페이지에 방문하세요.

 

네이버 클라우드 서치 메인 페이지에서

[서비스 이용하기] 버튼을 클릭하세요.

 

네[이버_클라우드_서치_메인_화면.png

 

1. 도메인 생성하기


[서비스 이용하기] 버튼을 클릭하시면

네이버 클라우드 서치의 콘솔 메인인

[도메인 생성] 화면으로 자동 이동합니다.

 

네[이버_클라우드_서치_콘솔_메인_화면.png

 

[+도메인 생성] 버튼을 클릭하세요.
 
네[이버_클라우드_서치_도메인_생성_화면.png

본 포스팅에서는 문서 DB 서버에 socket 접속하여

테이블을 가져오는 예시를 설명합니다.

 

단, 

문서 DB 서버에 socket 접속하기 위해서는

아래의 NCP 매뉴얼에 근거하여

 

https://guide.ncloud-docs.com/docs/cloudsearch-managedomain#문서업로드

 

DB 서버의 네트워크 환경 및 사용자 설정이

다음의 Cloud Search 접속 IP를 통한 접속을 허용하는지 확인하셔야 합니다.

 

VPC 환경에서 같은 계정이 보유한 VPC 환경의 DB 서버에 연결하는 경우: 169.254.83.16, 169.254.83.17

DB 서버의 호스트 및 공인 IP를 통해 연결하는 경우: 115.85.176.%

 

모든 구성이 적절하게 완료되면

[데이터베이스 연결 확인] 버튼을 클릭하여

[테이블이 조회되었습니다.] 메세지를 확인하세요.

 

그리고

네이버 클라우드 서치에 로드할

대상 테이블명을 선택하신 후 [다음] 버튼을 클릭하세요.

 

2. 섹션 설정하기

 

네[이버_클라우드_서치_섹션_설정_화면.png

이전 화면에서 선택한 테이블에서 필요한 필드를 선택합니다.

 

화면에 표시된 메인 여부 체크 박스는

네이버 클라우드 서치 테이블의 PK와 같습니다.

 

3. 색인 추가하기

 

캡처 화면 입력값은 아래와 같습니다.

 

네[이버_클라우드_서치_색인_추가_화면.png

 

색인 이름: idx_ttl_content_tag (3~20자의 알파벳이어야 합니다.)

섹션 가중치: 1.0 * stw_2p(tf, 0.5, 0.25, 0., length / 128.0) <- 기본값

빌드 정보의 색인 이름: idx_ttl_cont_tag

생성 대상 섹션: title, content, tags

분석 옵션:

+korea +josacat +eomicat

+nounstem

+compsub

+compnoun3

+word

+token-all

 

참고로

동의어 사전을 추가하시면

아래와 같은 형식의 분석 옵션을 추가할 수 있습니다.

 

+syno=[도메인명]_alias, 동의어 사전([도메인명]_alias)

 

아래와 같이 색인을 추가한 화면을 확인하시면

다음 버튼을 클릭하세요.

 

네[이버_클라우드_서치_색인_추가_완료_화면.png

 

4. 최종 확인하기

 

아래의 화면에서 [생성] 버튼을 클릭하면

과금이 시작된다는 점을 주의하세요.

 

네이버 클라우드 서치 과금 방식에 관한

자세한 정보는 아래의 페이지에서 확인하세요.

 

https://www.ncloud.com/charge/calc/ko?category=analytics#cloudSearch

 

네[이버_클라우드_서치_최종_확인_화면.png

 

아래의 화면을 확인하셨다면 10분 이내에 인스턴스가 생성됩니다.

 

네[이버_클라우드_서치_도메인_생성대기_화면.png

 

5. 빈 인스턴스 확인하기

 

인스턴스 상태가 [운영중]으로 변경된 후

아래의 캡처 화면을 보시면

검색 가능 문서와 대기중 문서 수가

모두 0이라는 점을 발견하실 수 있습니다.

 

네[이버_클라우드_서치_생성_완료_화면.png

1항에서 입력한 DB 접속 정보는

그저 스키마를 가져올 뿐이고

문서 업로드는 아래의 메뉴로 수기 요청해야 합니다.

 

드네[이버_클라우드_서치_문서_업로드_화면.png

 

해당 메뉴를 클릭하시면 팝업 화면이 표시됩니다.

 

네[이버_클라우드_서치_문서_업로드_화면_1.png

 

DB 서버 접속 정보를 입력하고 업로드할 필드를 선택하면

수 분 내에 문서 업로드가 완료됩니다.

 

드네[이버_클라우드_서치_문서_업로드_결과.png

 

문서가 업로드된 것을 확인한 후에

검색 설정 메뉴를 클릭합니다.

 

네이버_클라우드_서치_문서_검색_테스트.png

 

위의 화면과 같이 검색 결과를 확인하셨다면

NCP 클라우드 서치의 기본 설정을 무사히 완료한 것입니다.

 

다음 포스팅에서는

PHP 환경에서 API 구현 사례를 

자세히 기술하겠습니다.

" ["document_srl"]=> int(20975) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20231019174245" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(13) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } } ["page_navigation"]=> object(PageHandler)#460 (7) { ["total_count"]=> int(48) ["total_page"]=> int(3) ["cur_page"]=> string(1) "3" ["page_count"]=> int(3) ["first_page"]=> int(1) ["last_page"]=> int(3) ["point"]=> int(0) } }

싱글뷰는 고객과 시장을 더 잘 이해하고 설득하게 도와드립니다. - 블로그 - 당신의 성장 파트너, 싱글뷰 실행 스튜디오

설득의 방법

고객을 설득하는 방법

Home 설득의 방법 고객을 설득하는 방법
T기본글꼴
✔ 게시물을 뷰어로 보기 검색 쓰기
List of Articles
번호 제목 글쓴이 날짜 조회 수
8 구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 2 file singleview.co.kr 2022.04.10 867
7 구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 3 file singleview.co.kr 2022.04.17 1042
6 구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 4 file singleview.co.kr 2022.04.23 988
5 구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 5 file singleview.co.kr 2022.05.01 2057
4 구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 6 2 file singleview.co.kr 2022.05.08 2052
3 Google Analytics 4의 Referral에서 특정 도메인 제외하는 방법 file singleview.co.kr 2022.05.22 2794
2 Google Analytics 4에서 self-referral을 처리하는 방식 file singleview.co.kr 2022.05.29 2857
1 [NCP] cloud search 기본 설정 방법 file singleview.co.kr 2023.07.31 1044
쓰기
Board Pagination Prev 1 2 3 Next
/ 3
SEARCH