?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

지난 포스팅에서는

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

Click Heatmap의 로우 데이터를 

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

 

저수준 자바스크립트 API로

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

자세히 알아봤습니다.

 

이전 포스팅 보러가기

 

이번 포스팅에서는

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

보다 체계적으로

Click Heatmap의 로우 데이터를 

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

 

1. 글로벌 태그 생성하기

 

*.

구글 애널리틱스 4의 

글로벌 태그 생성 방법은

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

기본 작동을 확인하세요.

 

*.

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

글로벌 태그 생성 방법은

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

기본 작동을 확인하세요.

 

단,

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

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

 

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

이제는 정말로

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

 

2. 기본 변수 추가하기

 

구글 태그 매니저는

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

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

기본 변수를 제공합니다.

 

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

 

위의 캡처 화면을 보시면

두 가지 데이터 영역 변수가

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

  • Click Element
  • Scroll Depth Threshold

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

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

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

 

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

 

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

Scroll Depth Threshold 변수까지

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

 

*.

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

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

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

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

 

그래서

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

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

 

동일한 이유로

 

*.

대부분의 Heatmap 상용 솔루션이

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

 

Click Heatmap의 로우 데이터를

직접 수집할 때에도

Scroll Depth Threshold 변수를

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

 

 

마지막으로

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

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

  • Event 
  • Page Hostname
  • Page Path
  • Page URL
  • Referrer

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)를 선탁하세요.

 

나머지 두 개의 조건인

  • 컨테이너 로드(gtm.js)
  • DOM 사용 가능(gtm.dom)

을 선택하셔도

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

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

 

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

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

 

아무튼

모든 절차를 완료했다면

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

[저장]을 누르세요.

 

구글태그매니저_스크롤_트리거_추가.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를 평가하는

사례를 다루겠습니다.

 

다음 포스팅 보러 가기

?

  1. 08
    May 2022
    17:57

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    이번 포스팅에서는 Google Analytics 4의 이벤트 추적과 수집 기능을 자세하게 알아 보겠습ㄴ다. 사실 이전의 두 포스팅은 Google Analytics 4의 이벤트 추적 기능을 본격적으로 살펴보기 위한 워밍업이었다 해도 과언이 아닙니다. 이전 포스팅 보러 가기 저희...
    Bysingleview.co.kr Views252
    Read More
  19. 21
    Aug 2021
    11:29

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

    이전 포스팅에서는 구글 애널리틱스의 가장 핵심적인 모델 중 하나인 구글 애널리틱스 이벤트 데이터 모델을 살펴보기 시작했습니다. 구글 애널리틱스의 이벤트 데이터 모델 알아보기 구글 애널리틱스 이벤트 데이터 모델을 충분히 이해하셨다면 이번 포스팅에...
    Bysingleview.co.kr Views244
    Read More
  20. 11
    Aug 2021
    17:49

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

    구글 애널리틱스 v4는 그 직전 버전인 유니버설 애널리틱스와 구조적으로 많이 다릅니다. 구글에서 일하는 개발자들에게도 서비스의 구조 변화는 달갑지 않은 도전이죠. 구글이 Urchin을 인수한 후에도 계속하여 개선했지만 현재의 인터넷 사용 방식과 기술은 ...
    Bysingleview.co.kr Views8968
    Read More
Board Pagination Prev 1 2 3 Next
/ 3
SEARCH