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

by singleview.co.kr posted Apr 10, 2022
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

지난 포스팅에서는

현재 웹사이트의 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로 직접 접근하는 방식은

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

 

구글 태그 매니저의 구조 상

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

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

 

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

버전 추적 기능을 이용해서

매우 신속하고 정확하게

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

 

이러한 구글 태그 매니저의

장점을 활용하며

클릭 히트맵 데이터를

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

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

 

다음 포스팅 보러 가기


Articles

1 2 3