object(stdClass)#489 (13) { ["category_srl"]=> NULL ["order_type"]=> string(3) "asc" ["page"]=> string(1) "1" ["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)#456 (9) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(2) { ["_query"]=> string(612) "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` asc LIMIT 0, 20" ["_elapsed_time"]=> string(7) "0.00055" } ["httpStatusCode"]=> NULL ["total_count"]=> int(48) ["total_page"]=> int(3) ["page"]=> string(1) "1" ["data"]=> array(20) { [48]=> object(stdClass)#455 (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" } [47]=> 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" } [46]=> 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" } [45]=> object(stdClass)#453 (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" } [44]=> object(stdClass)#451 (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" } [43]=> object(stdClass)#450 (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" } [42]=> object(stdClass)#447 (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" } [41]=> object(stdClass)#449 (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" } [40]=> object(stdClass)#448 (17) { ["title"]=> string(74) "구글 태그 매니저로 웹 사이트 히트맵을 추출하는 법 - 1" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220403140708" ["readed_count"]=> int(1038) ["content"]=> string(13514) "

이번 포스팅부터 몇 회에 걸쳐

UX 평가에 매우 유용한 도구인

Click 혹은 Scroll 시각화를

구글 태그 매니저와 구글 애널리틱스를 활용하여

직접 측정하는 방법을 알아보겠습니다.

 

 

웹 사이트의 UI와 관련된 업무를 하다보면

UX에 관한 고민이 시작될 수 밖에 없기 때문입니다.

 

서비스 제공자가 방문 고객들에게

push 하고 싶은 서비스 혹은 컨텐츠와

 

방문 고객들이 선호하는 서비스 혹은 컨텐츠는

다른 경우가 매우 많습니다.

 

서비스 제공자가 push 하고 싶은 서비스 혹은 컨텐츠를

방문 고객들에게 자연스럽게 제시하는 방법을 찾는

유용한 도구 중에 하나가 Heatmap 시각화입니다.

 

히트맵_웹사이트.png

- Heatmap 시각화 도구의 강자 hotjar의 데모 화면

 

Heatmap으로 웹사이트 화면을 시각화하면

UX 관련 여러가지 시사점을 분석할 수 있습니다.

 

특히, 

처음에 결과 보고서를 보면 

기대 이상으로 자동화된 UI 측정 기술에 감탄하기도 합니다.

 

그런데

 

1.

Heatmap을 이용한 시각화 산출물을

반복 분석하다 보면 몇 가지 고민에 빠질 수 있습니다.

 

*. 번거로운 비용 지불 절차

 

흥미로운 결과가 나올 수도 있겠다는 느낌이 들어서

설명력이 충분한 데이터를 얻으려면 비용 결제를 해야 합니다.

 

상용 Heatmap 시각화 서비스를 무료 체험할 때는 간단하지만 

새로운 서비스의 비용을 결제하는 절차는
대부분의 회사에서 번거롭습니다.
 
*. 몇번 반복하면 뻔해지는 결론
 
최초에 Heatmap 시각화를 작동시켜 보면
그 동안 몰랐던 사용자의 마우스 행태를 이해해서
UX를 이전보다 현격히 개선하기도 합니다.
 
그런데
지구 행성에서 한글을 사용하는 사람들의 행동이
생각보다 다양하지 않기 때문에
몇 가지 주요 UX 시사점을 발견하고 이해한 후에는
고만고만한 결과들이 반복되곤 합니다.
 
그래서
비용 지불 절차가 더 번거롭게 느껴지곤 합니다.
 
매우 정교한 두 세번의 테스트로도
충분한 경우가 많기 때문에
아무리 살펴봐도 이해하기 어려운 부가 기능과
수 개월 약정 사용과 관련된 비용 집행을 위한
기안 작성 절차가 더 길고 복잡하게 느껴지곤 합니다.
 
일반 방문자의 사이트 체류 행태는
그 원리가 비슷하기 때문에
 
왠만큼 도전적인 UI가 아니라면
사실, 최초의 Heatmap 시각화를 통해 얻은 시사점으로
사용자 행태를 충분히 짐작하는 경우도 많습니다.
 
*. 다층 레이어나 반응형 Tile에서 애매해지는 결론
 
Heatmap 서비스 제공사들이
부지런히 시각화 기술을 개선하고 있지만
UI 기술의 발전 속도는 훨씬 더 빠릅니다.
 
복잡한 팝업 레이어 구조 혹은
브라우저의 화면 폭에 따라서 움직이는
동적인 Tile 구조의 레이아웃에 대해서
Heatmap이 제시하는 결론은
오히려 더 혼란스러울 뿐입니다.
 

레이어팝업_히트맵_시각화.png

- 모든 페이지에서 레이어 팝업 표시되는 사이트의 Heatmap 시각화 결론은 난해해집니다.

 
그래서
비용 지불 절차가 더 번거로워지곤 합니다.
 
Heatmap을 정확하게 시각화하려면
Heatmap이 잘 작동하는 UI 구조를 잡아야 하는데
 
애초에 Heatmap을 시각화 하려던 이유가
Heatmap이 정확하게 시각화되는 조건 확인이 아니고
현재 UI에서 방문 고객들의
UX를 이해하는 것이라는 역설에 빠지기 때문입니다.
 
*. 마우스 커서와 시선은 같이 움직인다?
 
Heatmap 시각화의 가치는 아래와 같은
학술적인 주장에 근거하는 경우가 많습니다.
 
"카네기 멜론 대학 교수가 2001년에 발표한 논문에 의하면,
마우스와 시선의 움직임은 84~88% 상관관계가 있다고 언급되고 있습니다."
- Source: https://sitest.jp/kr/heatmap/
 
얼핏보면 매우 설득력이 높은 연구 결과를 인용한 것 같습니다.
 
하지만,
위 인용의 근본적인 문제 중 하나는
2022년 기준으로 21년 전인 2001년의
UX 연구라는데 있습니다.
 
당시의 연구 대상이었을 가능성이 높은
Windows 98에 적용된 UI 프레임웍에서
아이트래커를 사용하지 않고
마우스 커서의 움직임을
Heatmap으로 시각화시키기만 해도
사용자 시선 이동 설명력이 높다는 발견은
 
윈도우즈98.png

- 이 화면이 익숙하시다면 X 세대일 가능성이 높습니다.

 
당시에는 매우 의미있는 연구 결과일 수 있습니다.
 
왜냐하면
당시에도 지금과 동일하게
아이트래커를 사용한 UX 평가는 
비용이 매우 비쌌기 때문입니다.
 
하지만
브라우저에서 사용성이 정교하게 검증된
수 많은 오픈 소스 UI 프레임웍이 존재하고
 
마우스를 아예 사용하지 않는 스마트폰 시대에서는
그 소중한 의미가 퇴색되었을 가능성이 있습니다.
 
2.
비용 지급 기안서 작성과 승인이 스크립트 설치보다 어려운 경우도 많습니다.
 
유료 Heatmap 서비스를 이용하면
간단한 스크립트만 삽입하여
렌더링된 웹 사이트 화면 위에
시각적으로 Heatmap을 확인할 수 있어서
훨씬 더 간단하고 직관적이지만
 
새로운 거래처에 비용을 지급하는 과정은
Heatmap 스크립트 설치보다 훨씬 더 복잡한데
 
테스트 상황에 따라 해석이 모호하거나
활용 가치가 빠르게 떨어지는 순간은
생각보다 일찍 찾아오는 경우가 많습니다.
 
저희 싱글뷰는 특히
의뢰하신 클라이언트 회사의 담당분들께서
기안서와 전표를 작성하는 업무에
상당한 시간을 보내시는 경우를 많이 봤습니다.
 
그래서
여러가지 내부 상황을 관리하느라
가뜩이나 머리가 아픈
발주처의 담당자분들께서
 
최첨단의 유명한 유료 Heatmap 솔루션으로
현재 웹사이트의 UX를 평가하는 것보다
훨씬 더 선호하시는 방법은
 
시각적으로 화려하지 않아도
부가 절차를 거치지 않고
비슷한 수준의 UX 평가 지표를
제공해 드리는 것이었습니다.
 
경영진에게 중간 보고할 때
화려한 Heatmap을 사용하면
화룡점정이라는 확신이 든다면
 
그까짓 수십만원의 비용을 
기안 처리하는 것은 전혀 망설여지지 않습니다.
 
이 비용을 왜 써야 하는지
모르는 상태에서 기안 처리를 하면
누구다 망설여질 뿐입니다.
 
3.
DOM + 구글 태그 매니저 + 구글 애널리틱스로 더 정확하게 관찰할 수 있습니다.
 
이러한 현실의 문제를
간단하게 해결하는 방법을 고민하던 중
 
구글 태그 매니저와 구글 애널리틱스를 이용하여
명시적으로 태깅된 모든 DOM 요소의
click 이벤트를 측정하여 보고하는 설정법을 구성했습니다.
 

구글태그매니저.png

 

구글 태그 매니저를 활용하면

Heatmap 시각화에 필요한 로우 데이터가

생각보다 간단하지만 매우 자세하게 추출됩니다.

 

사실,

구글 태그 매니저로 이러한 지표를 추출해야 했던 이유는

구글 애널리틱스 구버전에서 제공하던

In-Page Analytics 기능이

Google Analytics 4에서 중단된 것으로 보이기 때문입니다.

 

인페이지_애널리틱스.png

 

구글 측에서는

2023년 7월 1일부터 구글 애널리틱스 구버전인

Univeral Analytics는 데이터 수집이

중단될 것이라고 공지했습니다.

 

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

 

Universal Analytics가 무료로 제공하는

위의 Enhanced link attribution 화면을 보면

유료 Click Heatmap 서비스보다 못한 점이 없습니다.

 

오히려

link attribution에 정확히 CTR이 태깅되기 때문에

모호한 색상 강도로 표시되는 heatmap보다

더 정확하게 분석할 수도 있습니다.

 

하지만 안타깝게도

현재의 구글 애널리틱스 4를 살펴보면

유용한데 승계되지 않는 기능들이 꽤 있습니다.

 

더하여,

Universal Analytics는 신규 계정 생성도 중단되었기 때문에

2023년 7월 1일 이전에

구글 애널리틱스 4에 In-Page Analytics 기능이

추가되기만 기다릴 수도 없는 상황입니다.

 

뜻이 있는 곳에 길이 있다고 합니다.

 

Universal Analytics의 In-Page Analytics를

더 이상 사용할 수 없다고 해도

 

구글 태그 매니저로 

Universal Analytics의 In-Page Analytics를
흉내낼 수 있는 원리는

모든 요소 - 클릭 - 트리거를 적절히 활용하면 끝입니다.

 

다음 포스팅에서 하나씩 살펴보겠습니다.

 

다음 포스팅 보러가기

" ["document_srl"]=> int(20082) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20220410152415" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(7) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [39]=> object(stdClass)#446 (17) { ["title"]=> string(63) "Xpress Engine 1.11.6을 PHP 8.0으로 마이그레이션 완료" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20220327170238" ["readed_count"]=> int(526) ["content"]=> string(11062) "

프로젝트의 필요에 의해서 우연히

Xpress Engine 1.11.6을 PHP 8.0으로

마이그레이션하게 되었습니다.

 

xpress engine.png

 

아래의 페이지에서

PHP 8.0에 포팅된 Xpress Engine 1.11.6을

살펴보시고 다운로드하실 수 있습니다.

 

http://singleview.co.kr/appstore/20011

 

정확히는

저희 싱글뷰가 그 동안

별도의 브랜치 코드로 관리하던 기능들도

XE core에 이식하고 버전을 1.12로 변경했습니다.

 

하지만

주로 Xpress Engine의 약점이었던

쇼핑몰 관련 기능과

 

알려진 보안 취약점 패치이기 때문에

기존 사용 방식에서 달라진 것은 거의 없습니다.

 

1.

싱글뷰가 XE를 계속 사용하는 이유는?

 

결론부터 말씀드리면

한국인에게 익숙한 UI 구조 때문입니다.

 

한국의 CMS 관련 논의를 살펴보면

크게 두 가지 흐름인 것 같습니다.

 

Word Press가 최고! vs. Xpress Engine 지원 종료?

 

*.

확장성과 개발자 커뮤니티, 디자인 자원 기준에서는

Word Press가 절대적으로 우수합니다.

 

그런데

Word Press는 서양 문화권에서 설계했기 때문에

여러가지 UI 구조가 한국인의 습관과

다소 맞지 않는 문제가 있습니다.

 

그래서

Word Press로 만든 한국 사이트들은

매우 세련됬지만 사람 냄새가 나지 않는 경우가 많아 보입니다.

 

*.

Xpress Engine을 비난할 이유는

Word Press를 칭송할 이유만큼 많아 보입니다.

 

그럼에도 저희 싱글뷰가

국내 프로젝트를 성공시키기 위해

Xpress Engine을 반복하여 선택하는 이유는

 

네이버라는 한국 회사에서 설계했기 때문에

여러가지 UI 구조가 한국인에 매우 익숙하다는

딱 한 가지 장점 때문입니다.

 

xpress engine ck editor.png

- 지금은 낡은 감이 있지만 기본에 충실한 XE CK Editor입니다.

 

네이버가 Xpress Engine에 열심히 투자할 때에

네이버 블로그 에디터와 댓글 쓰레드 방식을

Xpress Engine과 매우 유사하게 유지했습니다.

 

네이버 블로그 댓글 스레드.png

 

그리고 지금까지도

많은 한국인들이 네이버 앱을

인터넷 브라우저 앱과 구별하지 않습니다.

 

그래서

네이버가 밑그림을 그려준 XE의 UI 구조는

한국인에게 절대적으로 익숙할 수 밖에 없고

 

특히,

사이트 방문자와 상호 작용을

최대한 이끌어 내야 하는 프로젝트에서는

Xpress Engine만한 CMS를 

저희는 아직 찾지 못했습니다.

 

Xpress Engine의 Core 유지 보수도

싱글뷰가 자체적으로 진행할 수 있기 때문에

공식 지원이 종료되었다 해도

현실적으로 답합할 이유는 없습니다.

 

하지만

뭔가 허전하고 서글픈 마음은 가시지 않습니다.

 

익스프레스 엔진 종료는 서글품.jpg

Fashion 사진는 cookie_studio - kr.freepik.com가 제작함

 

단지

네이버가 손을 떼서 XE 1.0이 좌초한 것일까요?

 

2.

싱글뷰가 마이그레이션한 XE core는 PHP 8.0까지만 지원합니다.

 

PHP 8.1부터는 $GLOBALS라는

특수한 전역 변수를 아예 없애 버렸는데

 

XE v1이 이 $GLOBALS라는 전역 변수에

매우 심하게 의존하여 작동하기 때문에

 

Xpress Engine이 이 전역 변수를

사용하지 않도록 하는 마이그레이션은

처음부터 재설계라고 해도 과언이 아닙니다.

 

php 8.jpg

 

그래서 만약

저희 싱글뷰가 우연히 필요에 의해

XE를 PHP 8 1로 포팅한다면

더 이상 Xpress Engine이라고

부르기 어려울 것 같습니다.

 

그런데 이런 방향의 작업은

네이버로부터 XE를 인수한 업체에서

이미 열심히 진행하는 것으로 보입니다.

 

3.

다른 모듈을 PHP 8.0으로 마이그레이션하는 작업도 어렵지 않습니다.

 

PHP 8의 요구는 간단합니다.

이해할 수 있고 명시적인 문법을

이제는 지키자는 것 뿐입니다.

 

PHP 7까지는 지극히 느슨한 문법 체계여서

혼란스럽거나 모호한 코드가 매우 많았습니다.

 

십수년전에는 사용자가 폭발적으로 증가했지만

이제는 낡고 비효율적인 언어의 상징이 대상이 되었습니다.

 

저희 싱글뷰가 애용하는 Xpress Engine조차도

$GLOBALS라는 모호한 전역 변수에 과도하게 의존하여

 

많은 복잡한 문제를 간단히 해결했지만

그 만큼 내부 처리가 비효율적이고 

동일 실행 환경에서 처리 속도가 매우 느리며

상대적으로 보안에 취약한 부분이 여전히 남아있습니다.

 

그래서

PHP 7 코드를 PHP 8로 마이그레이션하는 노력은

아래와 같이, 사실은 당연한 상식에 불과합니다.

 

관료적인 규약이 아니고

지키면 결국 개발자에게 더 좋은 코딩 습관입니다.

 

*.

클래스의 static 메소드를 명시적으로 사용하자.

 

*.

변수형은 명시적으로 정의해서 사용하자.

 

*.

create_function()은 이제는 쓰지 말자.

 

그래서

교과서적인 코딩의 표준을 준수했다면

PHP 7 이하에서 작성한 코드도

PHP 8에서 아무런 이상없이 작동하는 경우도 있습니다.

 

저희가 Xpress Engine 1.11.6을

PHP 8.0으로 마이그레이션 하면서

메모해 둔 주요 패턴들은 아래의 페이지에서

쉽게 확인하실 수 있습니다.

 

정말 별거 없기 때문에

마음만 먹으면 누구나 쉽게

Xpress Engine의 기존 모듈을

PHP 8.0으로 마이그레이션하실 수 있습니다.

 

물론,

여러가지 사정으로 부담스러우시면

저희 싱글뷰와 논의해 보시는 방법도 있습니다.

 

4.

Xpress Engine은 한국 CMS의 밝은 빛을 제시했습니다.

 

그런데 안타깝게도

2019년 10월 말에 1.11.6 버전을 발표한 후

사실 상 오픈소프 프로젝트를 종료했습니다.

 

Xpress Engine 운영진의 내부 사정이나

Xpress Engine Core의 장단점, 혹은 미래 방향성은

저희 따위가 함부로 논의할 문제가 아니지만

Xpress Engine을 버리기에는 왠지 서글픕니다.

 

저희 싱글뷰도

Xpress Engine을 기반으로 

여러 온라인 성과 개선 프로젝트를 진행하다보니

Xpress Engine에 의존적인 자체 개발 모듈을

상당히 많이 보유하게 되었습니다.

 

Xpress Engine에서 Fork된 쓸만한 CMS도 있지만

Fork CMS로 기존 모듈을 마이그레이션하는 노력이라면

이제는 Word Press가

더 가성비 높은 투자일 것 같습니다.

 

일부 Forked CMS는 Xpress Engine보다

기술적으로 더 진보했지만

자신들의 근간인 XE 1을 필요 이상으로 비난하며 적대시하고

기존 XE 1 운영진은 유능한 사용자 집단과

대화를 거부하는 것 같습니다.

 

기술적으로 더 진보한 Forked XE에서는

Xpress Engine 1에서 작동하던

다수의 창의적인 모듈과 사이트 레이아웃은

작동하지 않는 경우가 많습니다.

 

기존 XE 운영진이 버전업한 XE 3는

XE 1과 호환성을 전혀 고려하지 않았고

마이그레이션은 알아서 하라고 권고합니다.

 

그 결과,

XE 3와 Forked XE 양쪽의 사용자는 모두 다 감소하고

Wix나 아임웹과 같은 임대형 유료 CMS로 이탈한 분위기입니다.

 

이와 같은 분위기에서

XE 3와 Forked XE에서 모두

개발자와 디자이너 참여도 침체된 것 같습니다.

 

WordPress, Drupal 등과

어깨를 나란히 하는

K-CMS의 시작이었을지도 모르는

Xpress Engine은 그렇게 

사그러져 가는 것으로 보입니다.

 

저희 싱글뷰도

Xpress Engine은 PHP 8.0까지만 사용하고

Word Press에서 한국적인 UI를 구현하는 방법을

연구해야 할 때가 곧 올 것 같습니다.

" ["document_srl"]=> int(20036) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20220404210905" ["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" } [38]=> object(stdClass)#445 (17) { ["title"]=> string(104) "구글 데이터 스튜디오를 이용해서 애널리틱스 4의 구매 전환율 확인하는 방법" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20211113153022" ["readed_count"]=> int(1303) ["content"]=> string(18282) "

신버전인 구글 애널리틱스 4는

구버전인 유니서벌 애널리틱스에 비해서

데이터 모델을 근본적으로 혁신해서

더 강력하고 유연한 기능을 제공하지만

 

구버전인 유니버설 애널리틱스에 비해서 

의외의 약점이 있습니다.

 

이번 포스팅에서는

신버전인 구글 애널리틱스 4의 약점 중 하나인
전환율 보고서를 알아보고
구글 애널리틱스 4에서 직접 제공하기 전까지
이를 별도로 확인할 수 있는
구글 데이터 스튜디오 활용법을 간단히 알아보겠습니다.
 
1.
구글 애널리틱스 4에 익숙해지고
실무에 적극적으로 활용하려다 보면
처음으로 마주치게 되는 막막함 중에 하나가
바로 전환율 보고서입니다.
 
구글애널리틱스4_전환율_보고서_설정법_1.png

 

예를 들어,

저는 방문 Session 대비 구매 전환율을 알고 싶은데

기본 제공되는 보고서를 아무리 살펴봐도

 

각 상품별 상세페이지 열람수 대비

구매 전환율만 찾을 수 있었습니다.

 

급한대로 Acquisition -> User Acquisition 메뉴에서

아래와 같이 New User와 Conversion -> purchase 지표를 확인해서

계산기로 3.61%를 확인할 수 있습니다.

 

구글애널리틱스4_전환율_보고서_설정법_2.png

 

하지만

이런 식으로 구글 애널리틱스 4를 활용하는 것은

알파고와 가위바위보 놀이만 하는 것 같은 느낌입니다.

 

이런 상황에서 생각해볼 수 있는 도구가

구글 데이터 스튜디오입니다.

 

대시보드 및 데이터 시각화 도구: Google 데이터 스튜디오 보러 가기

 

구글애널리틱스4_데이터_스튜디오_사용법_1.png

 

[데이터 스튜디오에 로그인] 버튼을 클릭하시고

필요한 절차를 완료하시면 아래와 같은 화면을 보실 수 있습니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_2.png

 

빈 보고서를 클릭하세요.

 

구글애널리틱스4_데이터_스튜디오_사용법_3.png

 

Google 애널리틱스 탭을 클릭하세요.

 

구글애널리틱스4_데이터_스튜디오_사용법_4.png

 

전환율을 관찰하고 싶은

구글 애널리틱스 4 프로퍼티를 선택한 후 [추가]를 클릭하세요.

 

하지만

구글 데이터 스튜디오를 실습하기 위한 데이터는

필요한 모든 Snippet code를 에러없이 설치한 후

최소한 2~3주의 데이터 수집 기간이 필요합니다.

 

상황이 여의치 않거나 마음이 급하신 경우에는

Google Analytics 4 데모 계정을 연결해서

이러한 어려움을 쉽게 회피하실 수 있습니다.

 

Google Analytics 4 데모 계정을 연결하는 방법은

본 포스팅의 범위를 많이 벗어나기 때문에

아래의 애널리틱스 고객 센터 페이지에서

 

Google Analytics 4의 데모 계정 연결하는 법을 살펴보세요

 
구글애널리틱스4_데이터_스튜디오_사용법_5.png

 

아래와 같이 기본 생성된 보고서 설정 화면이 표시됩니다.
 
구글애널리틱스4_데이터_스튜디오_사용법_6.png

 

이번 포스팅은 그저 유입 세션수 대비 구매 전환율을

쌀집 계산기가 아닌 방법으로 추출하는 방법을

간략히 알아보는 것이기 때문에

 

세련되게 시각화를 꾸미는 작업을 생략하고

바로 본론으로 들어가겠습니다.

 

[차트 추가] 버튼을 클릭하면 나타나는 

[스코어 카드]를 2개 생성하세요.

 
구글애널리틱스4_데이터_스튜디오_사용법_7.png

 

왼쪽 [스코어 카드]의 측정 항목은 [세션수]를 선택하고

 

구글애널리틱스4_데이터_스튜디오_사용법_8.png

 

오른쪽 [스코어 카드]의 측정 항목은 [거래]를 선택하세요.

 

구글애널리틱스4_데이터_스튜디오_사용법_9.png

 

두개의 차트 위젯을 모두 선택한 후 우클릭하시면

[데이터 혼합]이라는 팝업 메뉴를 확인할 수 있습니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_10.png

 

[데이터 혼합]을 클릭하시면

구글 데이터 스튜디오가 눈치껏 전환율을 표시해 줍니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_11.png

 

구글 데이터 스튜디오가 눈치껏 해주기를

바랄 필요는 전혀 없습니다.

 
아래의 화면과 같이 원하시는 수식을 직접 입력해서
구매 전환율을 표시할 수도 있기 때문입니다.
 
구글애널리틱스4_데이터_스튜디오_사용법_12.png

 

아래의 캡처 화면과 같이

기간 선택 위젯을 추가해서

사용성을 조금만 더 개선하면 좋을 것 같습니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_13.png

 

구버전인 유니버설 애널리틱스에 익숙한 분들은

아래와 같은 전환율 시계열 그래프를 그리워하실 수도 있습니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_14.png

 

구글 애널리틱스 4의 전환율 시계열 그래프를 

구글 데이터 스튜디오에서 표시할 수 있습니다.

 

[차트 추가] 버튼을 클릭하면 나타나는 

[시계열]을 2개 생성하세요.

 
구글애널리틱스4_데이터_스튜디오_사용법_16.png

 

생성된 시계열 차트 위젯을 클릭하면

아래와 같이 차트 구성 미완료 메세지 박스가 표시됩니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_17.png

 

[확인]을 클릭하시면 아래와 같이
데이터 속성 편집창을 확인할 수 있습니다.
 
구글애널리틱스4_데이터_스튜디오_사용법_18.png

 

[데이터 소스] 입력란에 

관찰하고 싶으신 구글 애널리틱스 4 프로퍼티를 선택하세요.

 

참고로,

만약 유니버설 애널리틱스를 선택하면

[측정항목]에 표시되는 내용이 달라질 수 있습니다.

 

좀 더 근본적으로

유니버설 애널리틱스는 전환율 시계열 그래프를

기본 화면에서 제공하기 때문에 불필요합니다.

 

[측정 항목]에서 [세션수]를 선택하세요.

 

구글애널리틱스4_데이터_스튜디오_사용법_19.png

 

[데이터 소스] 입력란에 

관찰하고 싶으신 구글 애널리틱스 4 프로퍼티를 선택하세요.

 

[측정 항목]에서 [전자상거래 구매 횟수]를 선택하세요.

 

두 가지 시계열 그래프 위젯을 설정한 후

두 위젯을 동시에 선택하고 우클릭하시면

아래와 같이 [데이터 혼합]이라는 팝업 메뉴를 확인할 수 있습니다.

 

이제부터는 조금 전에 살펴보셨던

[스코어 카드]의 나눗셈과 매우 유사합니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_20.png

 

[데이터 혼합]을 클릭하시면

아래와 같이 두 시계열 데이터가

동시에 표시되는 그래프가 표시됩니다.

 

실망하지 마시고

오른쪽의 [데이터] 탭에서 [측정항목 추가]를 클릭하세요.

 

구글애널리틱스4_데이터_스튜디오_사용법_21.png

 

[필드 만들기]를 클릭하세요.

 

구글애널리틱스4_데이터_스튜디오_사용법_22.png

 

[이름] 입력란에 구매 전환율을 입력하시고

[수식]에 [전자상거래 구매 횟수] / [세션수]를 입력하세요.

 

참고로,

수식은 이 포스팅에서 텍스트를

복사하여 불텨넣기 하시면 안됩니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_23.png

 

구글 데이터 스튜디오에서

수식 검증을 완료하면 [적용]을 클릭하세요.

 

그러면 아래와 같이

구매 전환율을 파악하기 어려운

그래프 형태를 보실 수 있습니다.

 

구글애널리틱스4_데이터_스튜디오_사용법_24.png

 

이전과 동일하게

실망하지 마시고 [데이터] 탭에서

[측정항목] 중 [세션수]와

[전자상거래 구매 횟수]를 제거하세요.

 

구글애널리틱스4_데이터_스튜디오_사용법_25.png

 

이제 목표로 했던

세션 수 대비 구매 전환율의

시계열 그래프가 표시되었습니다.

 

그저 설정을 편리하게 진행하기 위해

위쪽에 생성했던 세션수 시계열 그래프와

전자상거래 구매 횟수 시계열 그래프는

제거하셔도 [혼합 데이터]의

시계열 그래프는 계속 표시됩니다.

 

여기까지 세심하게 살펴보셨다면

구글 애널리틱스 4에서

전환율 시계열 그래프를 

불친절하게도 직접 제공하지 않는 이유를

좀 더 공감하셨을지도 모르겠습니다.

 

 

다음 포스팅에서

구글 애널리틱스 4와 구글 데이터 스튜디오를

좀 더 다채롭게 활용하는 방법을 살펴보겠습니다.

" ["document_srl"]=> int(19835) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20211114085802" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(26) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [37]=> object(stdClass)#444 (17) { ["title"]=> string(80) "구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 마지막" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20211106112649" ["readed_count"]=> int(927) ["content"]=> string(38301) "

이번 포스팅에서는

Explorer 화면으로 접근하실 수 있는

FUNNEL 보고서를 활용하는 사례를 살펴보겠습니다.

 

지난 포스팅에서는

구글 애널리틱스 4의 Explorer 화면 중 

Tab Settings 탭을 자세히 알아봤습니다.

 

Explorer 화면 중 Tab Settings 탭 알아보기

 

그런데

 

여러분이 이 포스팅의 내용을 따라하기 위해서는

여러분께서 관리권한이 있는 쇼핑몰에

이미 Google Analytics 4와 관련 Snippet code가 

완전히 설치된 상태에서 한 달 이상 시간이 흘렀어야 합니다.

 

Google Analytics 4와 관련 Snippet code를 설치하는 방법은

아래의 포스팅을 보시면 어느 정도 이해하실 수 있습니다.

 

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

 

하지만

Funnel Exploration 보고서를 실습하기 위한 데이터는

필요한 모든 Snippet code를 에러없이 설치한 후

최소한 2~3주의 데이터 수집 기간이 필요합니다.

 

상황이 여의치 않거나 마음이 급하신 경우에는

Google Analytics 4 데모 계정을 연결해서

이러한 어려움을 쉽게 회피하실 수 있습니다.

 

Google Analytics 4 데모 계정을 연결하는 방법은

본 포스팅의 범위를 많이 벗어나기 때문에

아래의 애널리틱스 고객 센터 페이지에서

 

Google Analytics 4의 데모 계정 연결하는 법을 살펴보세요

 

1. FUNNEL EXPLORATION 보고서 설정하기

 

Google Analytics 4의 Funnel Explorer 보고서를

여러분과 함께 좀 더 깊이있게 이해하기 위해

 

Google Analytics 4의 데모 계정을 기반으로

Funnel 보고서를 처음부터 설정해 보겠습니다.

 

Google Analytics 4의 데모 계정이 제공하는

동일한 데이터를 사용하기 때문에

 

여러분도 기간까지 동일하게 설정하면

동일한 보고서를 확인하실 수 있습니다. 

 

이 예제 보고서를 만들면

아래와 같은 질문에 대해 

정량적인 답을 탐색할 수 있습니다.

 

*.

얼마나 많은 방문자가 카탈로그 페이지에서

최소한 한개 이상의 상품을 살펴보는가?

 

*.

얼마나 많은 사람들이

최소한 한개 이상의 상품을 장바구니에 담는가?

 

*.

결과적으로 얼마나 많은 사람들이 구매하는가?

 

Google Analytics 4의 Explorer 화면에서

Funnel exploration을 선택하시면

 

구글애널리틱스4_전자상거래_보고서_설정법_35.png

 

아래와 같은 기본 설정으로 Funnel explorer가 생성됩니다.

 

Technique: Funnel exploration 

Visualization: Standard Funnel

Breakdown: Device Category

 

만약 이러한 안내가 너무 짧거나 혼란스럽게 느껴지신다면

아래의 페이지를 먼저 확인하세요.

 

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

 

Tab settings 탭의 Steps 섹션

편집 아이콘을 클릭하면 아래와 같은

캡처 화면을 확인할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_36.png

 

이 화면을 확인하신 후

다른 설정값은 변경하지 마시고

아래와 같이 Funnel steps 설정을 바꾸세요.

 

구글애널리틱스4_전자상거래_보고서_설정법_37.png

 

설정 변경을 완료하시면

아래와 같은 유형의 그래프를 확인하실 수 있습니다.

 

2. FUNNEL EXPLORATION 보고서 살펴하기

 

참고로, 

이 예시 보고서의 기간은

Oct 7 2021 ~ Nov 4 2021로 설정되었습니다.

 

closed funnel이기 때문에

사용자는 catalog impression Step을 통해서만

Funnel에 진입할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_38.png

 

Open funnel로 변경해서 카탈로그 화면을 보지 않고

구매를 완료하는 사용자가 있는지 살펴보겠습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_39.png

 

3. 탐색적 조사에 대한 정량적인 답 확인하기

 

이제 조금 전에 설정했던 

질문에 대한 정량적인 답을 탐색하겠습니다.

 

*.

얼마나 많은 방문자가 카탈로그 페이지에서

최소한 한개 이상의 상품을 살펴보는가?

 

아래의 보고서를 살펴보면

Oct 7 2021 ~ Nov 4 2021기간 동안

약 39,330명의 사용자가 

카탈로그 페이지에 방문한 후

약 16,652명의 사용자가

최소한 한개의 상품 상세 페이지를 살펴봤습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_40.png

 

*.

얼마나 많은 사람들이

최소한 한개 이상의 상품을 장바구니에 담는가?

 

3,995명의 사용자가 상품을 장바구니에 담았습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_41.png

 

*.

결과적으로 얼마나 많은 사람들이 구매하는가?

 

1,341명의 사용자가 구매했습니다.

purchase step에서 New funnel entities가 5명 확인되므로 

정확히는 1,346명이 구매했다고 봐야합니다.

 

그런데 이 5명은

catalog impression과 item impression을 거치지 않고

뜬금없이 purchase step으로 진입했을까요?

 

구글애널리틱스4_전자상거래_보고서_설정법_42.png

 

4. Open funnel과 Closed funnel 더 정확히 해석하기

 

이 5명의 Funnel step을 정확하게 이해하려면

가상의 사용자 4명의 시나리오를 상상해서

Google analytics 4의 open funnel과 closed funnel을

매우 자세하게 이해해야 합니다.

 

4명의 가상의 사용자는 각각 아래와 같이 행동했습니다.

 

 
catalog imprssion
item impression
add to cart
purchase
사용자 1
O O O O
사용자 2
    O O
사용자 3
O     O
사용자 4
      O

 

사용자 1은 여러분이 설정한 Funnel explorer를 정확히 통과했습니다.

사용자 2는 add to cart에 진입하여 구매 완료했습니다.

사용자 3은 카탈로그 화면을 봤지만 중간 단계를 이탈하고 구매 완료했습니다.

사용자 4는 이전 단계를 모두 이탈하고 구매 완료만 했습니다.

 

먼저,

open funnel에서 각 사용자는 어떻게 집계될까요?

 

기본적으로 Google Analytics 4는

Funnel step의 중간을 건너뛰는 사용자는 무조건 제외합니다.

 

그래서

Open funnel 조건에서는

Funnel의 입구에서 진입하여 중간 단계를 이탈한 사용자 3을 제외합니다.

 

반면,

Funnel steps을 모두 거친 사용자 1은 당연히 집계하고

Funnel steps의 중간에서 진입하는 사용자2와 4는 집계합니다.

 

 
catalog imprssion
item impression
add to cart
purchase
사용자 1
O(집계) O(집계) O(집계) O(집계)
사용자 2
    O(집계) O(집계)
사용자 3
O(집계)     O(제외)
사용자 4
      O(집계)

 

Closed funnel 조건에서는

Funnel의 입구에서 진입한 사용자 1의 전체 과정과

Funnel의 입구에서 진입한 사용자 3의 catalog impression만 집계합니다.

 

 
catalog imprssion
item impression
add to cart
purchase
사용자 1
O(집계) O(집계) O(집계) O(집계)
사용자 2
    O(제외) O(제외)
사용자 3
O(집계)     O(제외)
사용자 4
      O(제외)

 

Google Analytics 4의 Open funnel 집계 방식을 기준으로

위의 그래프에서 표시된 purchase step에서

New funnel entities가 5명을 살펴보면

catalog imprssion, item impression, add to cart 단계를 건너뛰고

 

뜬금없이 purchase 단계로 진입했을 가능성이 높아 보입니다.

 

좀 더 정확하게 확인하기 위해

Closed funnel 보고서로 전환해 봅니다.

 

확실히 New funnel entities가 5명이 사라졌습니다.

 

catalog imprssion, item impression, add to cart 단계를 건너뛰고

뜬금없이 purchase에 진입하는 사용자가 존재하는 것 같습니다.

 

구글에서 제공하는 데모 사이트의 데이터이기 때문에

현황을 정확히 알 수 없지만

 

당연한 현상인지, 구매 프로세스에 문제가 있는지

세심하게 살펴봐야 한다는 의미일 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_43.png

 

5. FUNNEL EXPLORATION 보고서 더 잘 활용하기

 

오른쪽 상단의 4 가지 아이콘을 기억하세요.

 

*.

작업 되돌리기, 다시 실행하기는 직관적입니다.

 

*.

Explorer의 기본 설정은 공유를 허용하지 않는 상태입니다.

 

사람 모양의 아이콘은 이 Funnel Explorer를 

다른 사용자와 공유하겠다는 의미입니다.

 

이 아이콘으로 이미 공유된 보고서를

더 이상 공유하지 않을 수도 있습니다.

 

현재는 구글 애널리틱스의 데모 계정이라서

권한이 없기 때문에 공유 기능이 비활성 상태입니다.

 

*.

가장 오른쪽의 녹색 문서 아이콘은

표본 샘플링 없이 100%의 로우 데이터를 사용했다는 의미입니다.

 

마우스 커서를 올리면 아래와 같은 메세지가 표시됩니다.

 

"This report is based on 100.0% of available data."

 

반면,

보고서에 표본 샘플링이 적용되면 노란색으로 변경됩니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_44.png

 

*.

기본적으로 보고서에는 contextual한

우클릭 기능을 다양하게 제공하기 때문에

항상 호기심을 갖고 이것저것 눌러보시면 더 좋습니다.

 

만약 잘못 누르셨다면 undo 기능으로 되돌리세요.

 

6. 구글 애널리틱스 4는 계속 개발 중입니다.

 

구글 애널리틱스 4의 전자상거래 기능이

최초로 공개된 시점은 2020년 봄이었지만

2020년 하반기부터 보고서 관련 기능도

제대로 된 형태를 갖추기 시작했습니다.

 

그래서 

구글 애널리틱스 4를 출시 초기부터

실무에 사용하셨다면

 

구글 애널리틱스 4의 보고서 화면에서

매우 단순히 이벤트 수 보고서를 확인하거나

Google Cloud BigQuery에 연결해서 확인하는

난처함을 알고 계실 수도 있습니다. 

 

굳이 이와 같은 과거를 언급하는 이유는

구글 애널리틱스 4는 계속 개발 중이라는 사실을

항상 기억하셔야 하기 때문입니다.

 

구글 애널리틱스 4가 무모할 정도로

완전히 새로운 데이터 모델을 채택하여

유니버설 애널리틱스(=구버전)의 좋은 기능을

흡수 통합하고 진일보 하는 과정은 험난한 도전일 것입니다.

 

만약 

구글 애널리틱스 4의 데이터 모델이

완전히 새로워졌다는 정보가 어색하시다면

아래의 포스팅을 확인해 보세요.

 

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

 

물론,

2020년 초의 상태와 비교하면 일취월장했고

 

이제는

유니버설 애널리틱스에서 볼 수 있는

향상된 전자상거래 지표들과 유사한 정보를

손쉽게 확인할 수 있습니다.

 

아래와 같이 더 편리해진 view도 제공합니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_45.png

 

그래서

지금은 익숙하지 않고

유니버설 애널리틱스에서 쉽게 확인할 수 있는 지표가

엉뚱하게 어려워진 모습이 보여도 앞으로가 기대됩니다.

 

위와 같은 이유로

구글 애널리틱스 4에서

상식적으로 기대되는 기능을 확인하실 수 없다면

실망하시기 전에 개발 중일 가능성을

항상 염두에 두셔야 합니다.

" ["document_srl"]=> int(19763) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20211114084836" ["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" } [36]=> object(stdClass)#443 (17) { ["title"]=> string(72) "구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 2" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20211030150118" ["readed_count"]=> int(967) ["content"]=> string(16649) "

지난 포스팅에서는

구글 애널리틱스 4의 Explorer 화면 중 

Variables 탭을 자세히 알아봤습니다.

 

Explorer 화면 중 Variables 탭 알아보기

 

이번 포스팅에서는

Explorer 화면 중 Tab Settings 탭을 살펴보겠습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_12.png

 

1. Tab Settings 탭의 속성 이해하기

 

이 탭은 보고서의 외관을 조절합니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_13.png

 

가장 위에 Tequnique라는 드롭다운 메뉴가 있습니다.

아래와 같이 선택할 수 있는데

이 포스팅에서는 Funnel exploration만

살펴보는 중입니다.

 

공통된 구조를 이해하시면 나머지 explorer도

직접 설정하여 활용하실 수 있기 때문입니다.

 

그 아래에 Visualization이라는 메뉴가 있습니다.

 

Standard 항목이 여러분이 구글 애널리틱스에서

익숙하게 자주 보시던 Funnel explorer 형태입니다.

 

각 쇼핑 단계 별로 얼마나 많은 고객이 진행하거나

이탈하는지 살펴보기에 적합합니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_14.png

 

그런데

Standard Funnel은

시간이 지남에 따라 Funnel 흐름이

개선되는지 악화되는지 살펴보기는 어렵습니다.

 

그래서 구글 애널리틱스 4에서 새로 등장한

보고서 형태가 바로 Trended Funnel입니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_15.png

 

개별 Funnel 단계의 성과를 시계열로 확인하실 수 있습니다.

 

참고로

현재 Technique 드롭다운 메뉴가

Funnel exploration으로 선택되어 있기 때문에

 

Visualization 메뉴가 표시된다는 점을 이해하세요.

예를 들어,

만약 Path exploration을 선택하시면

이 항목이 SEGMENT로 변경됩니다.

 

여러분도 한번 해보세요.

 

2. MAKE OPEN FUNNEL

 

구글 애널리틱스 4는 폐쇄된 Funnel을 기본 선택합니다.

 

폐쇄된 Funnel이란

방문자가 Funnel의 시작점이 아니고

중간 단계에서 진입하는 상황은

고려하지 않는다는 의미입니다.

 

하지만 여러분의 필요에 따라

방문자가 Funnel의 어떤 지점에서

진입하던 고려하고 싶을 수 있습니다.

 

이때 MAKE OPEN FUNNEL을 활성화합니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_16.png

 

OPEN FUNNEL을 선택하면

동일한 그래프의 Organic visitors 부분과 같이

Funnel의 중간 단계에서 진입을 확인할 수 있습니다.

 

Open funnel에 관한 자세한 정보는

별도의 포스팅에서 논의하겠습니다.

 

3. SEGMENT COMPARISONS

 

이 선택 항목은

여러분이 Variables 탭의 SEGMENTS 섹션에서

이미 설정한 항목을 끼워 넣는 것입니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_17.png

 

여러분의 이해를 돕기 위해

Direct traffic과 Mobile traffic을 비교해 보겠습니다.

 

아래의 예시 화면을 살펴보면

Direct traffic의 funnel 과정에서

이탈이 매우 많아 보입니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_18.png

 

하지만 두번째 단계가 Organic visitors이기 때문에

Direct traffic segment는 당연히 0이라는 점을 떠올리시면

Explorer를 구성하실 때 논리적인 구조를

주의하셔야 한다는 점을 쉽게 공감하실 것 같습니다.

 

이런 상황이 전형적으로

OPEN FUNNEL이 필요한 때입니다.

MAKE OPEN FUNNEL을 활성화시키면

Organic vistitos 단계를 건너뛰고

진입하는 트래픽이 나타납니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_19.png

 

4. STEPS

 

STEPS은 구글 애널리틱스 4가 제공하는

Funnel exploration에서 가장 중요한 섹션입니다.

 

현재의 예시에서 Organic visitors가 순차적이지 않습니다.

 

Organic visitors를 삭제하고

Purchase는 설명을 위해 생성한 이벤트로 변경했습니다.

 

이 예제에서는 저희 싱글뷰 블로그에서

아래의  포스팅을 열람한 이벤트를 설정했습니다.

 

"UTM Parameter를 적용할 때 흔한 실수를 피하세요."

 

구글애널리틱스4_전자상거래_보고서_설정법_20.png

 

구글애널리틱스4_전자상거래_보고서_설정법_21.png

 

아래의 화면과 같이 설정하면

utm_mistake_interest라는 Custom Events 중에서

source에 naver라는 단어가 포함된 경우로

한정할 수도 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_22.png

 

아래의 화면과 같이

개별 STEP을 편집하기 쉽도록

아래와 같은 편집 메뉴도 사용하실 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_23.png

 

만약 혹시라도

여러분의 화면에서는 utm_mistake_insterest라는 

항목이 표시되지 않아서 당황스러우시다면

구글 애널리틱스 4의 Custom Events라는

개념을 반드시 이해하셔야 합니다.

 

아래의 포스팅을 꼭 살펴보시길 바랍니다.

 

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

 

Funnel step을 추가하려면 아래의 링크를 클릭하세요.

 

구글애널리틱스4_전자상거래_보고서_설정법_24.png

 

더하여,

위 캡처 화면의 왼쪽 상단에 is indirectly followed by와 

오른쪽 상단에 within 5 Minutes도 살펴보세요.

 

STEPS 설정을 완료하시면 아래와 같이 APPLY 버튼을 클릭하세요.

 

구글애널리틱스4_전자상거래_보고서_설정법_25.png

 

5. BREAKDOWN

 

Breakdown은 오른쪽 보고서에서

아래의 열에 표시되는 정보입니다.

 

Variables 탭의 DIMENSIONS에서 

원하는 항목을 드래그하세요.

 

구글애널리틱스4_전자상거래_보고서_설정법_26.png

 

5. SHOW ELAPSED TIME

 

이 기능을 활성화시키면

이전 Funnel Step에서 현재 Funnel Step으로 전진할 때까지

평균적으로 얼마의 시간이 소요되었는지 표시합니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_27.png

 

6. NEXT ACTION

 

특정 Funnel Step에 진입한 방문자가

다음 Funnel Step으로 전진하는 것 외에

다른 이벤트를 발생시킬 수도 있습니다.

 

이러한 상황을 관찰하고 싶다면

NEXT ACTION 섹션에 Event name을 설정하세요.

 

그리고 Funnel step을 나타내는

개별 막대 그래프에 마우스를 올리면

아래의 캡처 화면과 같이

다른 Action이 존재하면 주요 5개가 표시됩니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_28.png

 

Next Actions에서 scroll을 하지 않는

Funnel 흐름을 분리할 수도 있습니다.

 

Build new segment -> Create a customg segement -> Event segement를 선택하세요.

 

만약 위의 지시 사항이 어색하시다면

아래의 포스팅에서 5. Variable 탭의 속성 이해하기 챕터를

한번 더 살펴보세요.

 

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

 

- Untitled segement에 scroll 이벤트 제외를 입력하세요. 

- Include Events when 을 삭제하세요.

- + ADD GROUP TO EXCLUDE 를 클릭하세요.

- Add new condition 에 scroll을 입력하세요.

 

위의 지시를 순서대로 수행하시면

아래와 같은 설정 화면이 조성됩니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_29.png

 

- 이 화면을 확인하신 후에 SAVE 버튼을 클릭하세요.

- Variables 탭에 추가된 Event segment를 

- Tab Settings 탭의 SEGMENT COMPARISONS에 드래그하세요.

 

구글애널리틱스4_전자상거래_보고서_설정법_30.png

 

위의 화면과 같이 scroll을

Next Actions로 발생시키지 않은

Segment의 상황을 분리해서 관찰할 수 있습니다.

 

6. FILTERS

 

위와 같이 더 세분하여 관찰하기 위해서

별도의 Segment를 설정할 수도 있지만

FILTERS를 사용할 수도 있습니다.

 

기본적으로

Tab Settings 탭의 FILTERS 섹션은

Variables 탭의 DIMENSIONS와 METRICS 섹션의

항목을 참조한다는 점만 이해하시면

쉽게 다루실 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_31.png

 

7. 보고서 탭

 

보고서 탭에서 가장 직관적인 UI는 두 가지입니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_32.png

 

각 Funnel steps의 값 차이가 너무 커서

특히, Funnel steps 후단부의 상황이 잘 안보이면

 

그래프 섹션 오른쪽의 +- 버튼을 클릭하거나

마우스 스크롤러를 움직여서

아래의 캡처 화면과 같이 Y축 스케일을 조정할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_33.png

 

그래프 위에서 마우스를 우클릭하면

상황에 따라서 SEGMENTS를 편리하게 생성할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_34.png

 

SEGMENTS나 FILTERS와 보고서 섹션을 

활용하는 방법을 자세히 안내해 드리지 않는 이유는

개별 분석 시나리와 목적에

매우 의존적인 도구이기 때문입니다.

 

여러분의 분석 상황과 목적에 맞게 활용하시다

질문이나 의견이 있으시면 언제든지 알려주세요.

 

여기까지 살펴보시느라 수고가 많으셨습니다.

 

다음 포스팅에서 본 연재의 마지막인

Funnel 보고서 탭을 활용하는 방법을 다루겠습니다.

 

다음 포스팅 보러가기

" ["document_srl"]=> int(19636) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20211106185211" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(23) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [35]=> object(stdClass)#442 (17) { ["title"]=> string(72) "구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 1" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20211024063411" ["readed_count"]=> int(944) ["content"]=> string(15018) "

오늘은 구글 애널리틱스 4의

구매 전환 FUNNEL 보고서를

생성하는 방법을 살펴 보겠습니다.

 

지금까지

gaectk.js와 구글 태그 매니저를 이용해서

구글 애널리틱스 4(=신버전), 유니버설 애널리특스(=구버전)의

이커머스 데이터를 통합하여 수집하는 설정 방법을

충분히 살펴보았기 때문에

 
이제는
수집된 데이터를 구글 애널리틱스 4(=신버전)에서
효과적으로 활용하는 방법을 알아볼 차례입니다.
 

1. Monetization 기본 보고서

 

먼저,

구글 애널리틱스 4가 기본 제공하는 

전자상거래 관련 보고서를 간단히 훑어볼까요?

 

좌측 메뉴의 Monetization을 클릭하시면

구글 애널리틱스 4가 수집하는 

전자상거래 데이터를 위젯으로 구성된

대쉬보드를 통해 개괄적으로 확인할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_2.png

 

기본 제공되는 대쉬보드의 스크롤을 내리면

아래와 같은 정보가 매우 직관적으로 나열됩니다.

더 자세히 보기 링크를 제공하는 위젯을 클릭하면

아래와 같은 상세 화면을 확인할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_3.png

 

예를 들어, 위의 캡처 화면은 품목별 성과 보고서입니다.

 

그런데,

유니버설 애널리틱스 보고서에 익숙하신 경우에는

몇 번 클릭하면 실망하실 수 있습니다.

 

예전에 쉽게 확인할 수 있었던 보고서를

간단히 확인할 수 없기 때문입니다.

 

하지만

이러한 UI가 사실이라고 해도

구글 애널리틱스 4에 실망하시기엔 이릅니다.

 

구글 애널리틱스 4의 보고서 UI에 대한

첫 인상을 상징적으로 설명할 수 있는 예시는

바로 유니버설 애널리틱스의

구매 전환 FUNNEL 보고서입니다.

 

왜냐하면

유니버설 애널리틱스에서는

구글이 제공하는 Shopping행동 FUNNEL 보고서와

Checkout 행동 FUNNEL 보고서만

매우 편리하게 제공됬지만

 

구글 애널리틱스 4에서는

여러분이 원하는 대로 

FUNNEL 보고서를 생성하고

변경할 수 있기 때문입니다.

 

좀 더 사용하기 유연해져서

좀 더 사용하기 어려워지는 댓가를 치를 뿐입니다.

 

물론,

이 포스팅을 살펴보신 후에는

구글이 제공하는 Shopping행동 FUNNEL 보고서만

편리하게 사용하실 수도 있습니다.

 

2. 구매 전환 퍼넬은 어디서 확인할까요?

 

그래서

당황하실 이유가 없습니다.

 

구글 애널리틱스 4에서 필요한 보고서가

안보이면 직접 만들면 됩니다.

 

이것은 사실 새로운 개념도 아닙니다.

 

유니버설 애널리틱스에서도

아래의 화면과 같이 Metric과 Dimension을

매우 유연하게 설정하여

여러분의 분석 관점에 적합한 보고서를 생성할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_4.png

 

사용자 정의 보고서를 처음 생성할 때

유난히 혼란스러운 부분이

Metric과 Dimension입니다.

 

구글 애널리틱스의

Metric과 Dimension은 

별도의 포스팅에서 안내해 드리겠습니다.

 

더하여,

사용자 정의 대쉬 보드를 구성해서

필요한 지표를 직관적으로 요약할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_5.png

 

사용자 정의 보고서보다

사용자 정의 대쉬보드가 훨씬 직관적인 이유는

구글 애널리틱스가 제공하는

대쉬보드 갤러리가 있기 때문입니다.

 

갤러리를 살펴보시고 왠지 마음에 끌리는

대쉬보드 템플릿을 몇번 임포트해 보시면

구글 애널리틱스 고수들의 설정 방법도 

편하게 엿볼 수 있기 때문에

그야 말로 백문이 불여일견입니다.

 

3. 구글 애널리틱스 4에서 구매 전환 FUNNEL 보고서 생성하기

 

다소 긴 여정의 시작은

구글 애널리틱스 4 관리자 화면

좌측 메뉴의 Explore 탭에서 시작됩니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_6.png

 

사실,

Explore 탭만 클릭하시면

의문과 답답함은 한번에 해결됩니다.

 

유니버설 애널리틱스에서 쉽게 발견했지만

구글 애널리틱스 4에서는 안 보인 보고서들이

여기에 모여 있습니다.

 

다만,

구글 애널리틱스 4에서 열심히 창안한

새로운 보고서 개념을 정확히 이해하려면

약간의 노력이 필요하지만 

 

기본 제공되는 템플릿을 넘어서

더 유용하게 사용할 수 있어서

더 좋을 뿐입니다.

 

4. Explore 설정 화면 구성 이해하기

 

일단,

위의 화면에서 보실 수 있는

Funnel exploration을 클릭하세요.

 

여러분에게 좀 더 최적화된 보고서로 바꾸려면

두 가지 질문을 하셔야 합니다.

가장 오른쪽의 섹션은

여러분이 생각하며 시도하는 두 가지 질문의 답을

구글 애널리틱스가 실시간으로 예시해줍니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_7.png

 

5. Variable 탭의 속성 이해하기

 

Variables 탭은 4가지 영역으로 수직 분할됩니다.

가장 먼저,

보고서 이름을 바꿀 수 있다는 점을 기억하세요.

 

구글애널리틱스4_전자상거래_보고서_설정법_8.png

 

기간 선택 기능은 굳이 설명하지 않겠습니다.

 

주의를 기울여야 하는 부분은 SEGMENTS부터입니다.

기본 설정이 US이기 때문에 

여러분이 한국 시장에 관심이 있다면

이 설정을 KR로 바꾸셔야 합니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_9.png

 

그 외에도,

Direct traffic, Paid traffic, Mobile Traffic 등의 

직관적인 세그먼트를 확인하실 수 있습니다.

 

+ 아이콘을 클릭하면 SEGMENTS를 추가할 수 있습니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_10.png

 

3가지 종류의 사용자 정의 세그먼트를 보실 수 있습니다.

 

구글 애널리틱스에서 DIMENSIONS이라는 개념을

매우 간략히 정의하면

이벤트, 사용자, 상품, 거래 등에 속한

세부 속성을 의미합니다.

 

예를 들어, 거래라는 개념에는

(거래) 고유번호, (거래) 금액과 같은

세부 속성이 있습니다.

 

이 포스팅에서 DIMENSION을

자세하게 설명하지 않는 이유는

 

사실,

지금 개념을 이해하지 않으셔도

아래와 같이 구글 애널리틱스 4가 제시하는

직관적인 DIMENSIONS 옵션을 

선택할 수 있기 때문입니다.

 

구글애널리틱스4_전자상거래_보고서_설정법_11.png

 

유니버설 애널리틱스에서는

DIMENSIONS와 METRICS 개념을

정확히 이해하지 않으면

매우 난해한 경우가 많았는데

 

구글 애널리틱스 4에서 그러한 부분을

상당히 개선한 것 같습니다.

 

물론,

구글 애널리틱스 4에서도

사용자 정의 보고서를 심도있게 다루다보면

특정 DIMENSIONS와 METRICS의 상관성을

이해해야 하는 경우를 만나실 수 있습니다.

 

 

 

여기까지 살펴보셨다면

Variables 탭을 조절하여 보고서에 표시할 데이터를

선택한다는 점을 이미 이해하셨을 것 같습니다.

 

설정 과정이 정확해야 한다는 부담을 느끼지 마세요.

탭의 명칭 그대로 Explore, 살펴보시는 기능입니다.

 

구글 애널리틱스의 원본 데이터에

영향을 미치는 탭이 아니기 때문에

그냥 이것저것 눌러보시다 안되면

지워버려도 된다고 생각하셔도 큰 문제가 없습니다.

 

잠시 숨을 돌리신 후에

다음 포스팅에서 Tab Settings을 자세히 알아보겠습니다.

 

다음 포스팅 보러가기

" ["document_srl"]=> int(19576) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20211031062535" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(10) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [34]=> object(stdClass)#441 (17) { ["title"]=> string(116) "구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Google Analytics 4 + GTM + gaectk.js" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20211016094442" ["readed_count"]=> int(1047) ["content"]=> string(78780) "

이번 포스팅에서는

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

구글 애널리틱스 4(=신버전)의

이커머스 데이터 수집 설정 방법을

살펴보겠습니다.

 
동일한 상황에서

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

이커머스 데이터 수집 설정 방법이 궁금하시다면

전 포스팅을 확인해 주세요.

 

이전 포스팅 보러가기

 

이 포스팅의 목적은

구글 애널리틱스 4와 구글 태그 매니저를 설정해서

실무에 필요한 모든 이커머스 데이터 수집 기능을

즉시 정확하게 활성화하는 것입니다.

 

구글 애널리틱스 4와 구글 태그 매니저를

살펴보고 실습하는 정보가 필요하시면

더 좋은 정보를 찾아보시길 부탁드립니다.

 

1. 구글 태그 매니저 로그인 하기

 
이 포스팅에서 안내해 드리는 방법은
계속하여 소개해 드린 gaectk.js 라이브러리를 
사용한다는 전제입니다.
 
gaectk.js 라이브러리를 설치하지 않고
본 포스팅에 따라 GTM만 설정하시면
이커머스 데이터가 수집되지 않습니다.
 
이러한 안내가 어색하시면
아래의 페이지를 먼저 세심하게 살펴보셔야 합니다.
 
gaectk.js 라이브러리와 구글 애널리틱스 관계 알아보기
 
여기까지 모두 숙지하셨다면
구글 태그 매니저에 로그인 하세요.
 
구글 태그 매니저의 계정 설정 방법은
매우 읽기 쉽고 자세한 정보가 너무 많기 때문에
이 포스팅에서는 생략하겠습니다.
 
구글 태그 매니저에 로그인하시면
아래와 같은 혹은 비슷한 화면을 볼 수 있습니다.
 
구글태그매니저_구글애널리틱스4_설정법_1.png.png

 

이 화면을 확인하셨다면

모든 사전 준비가 완료된 것입니다.
 
이제
구글 애널리틱스 4(=신버전) 기준으로
쇼핑몰 구매 고객의 일반적인 행동 순서를 따라서

 

구글 태그 매니저 설정을 시작하겠습니다.

 

2. 글로벌 태그 생성
  

태그명: GA4 global tag

태그 유형: Google 애널리틱스: GA4 구성

측정 ID: G-XXXXXXX (구글 애널리틱스 4 관리자에서 확인한 Measurement ID입니다.)

트리거: All Pages (GTM이 이미 제공하는 트리거를 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_2.png

 

구글 애널리틱스 4의 측정 아이디는

아래의 화면에서 확인할 수 있습니다.

 

구글 애널리틱스 4 관리자 -> Data Stream -> Web stream details

 

구글태그매니저_구글애널리틱스4_설정법_3.png

 

구글태그매니저_구글애널리틱스4_설정법_4.png.png

 

이제 글로벌 태그를 생성하고 설정했습니다.

 

하나의 태그을 설정할 때마다

Tag Assistant라는 구글 태그 매니저의

독특한 디버거를 사용해서

게시하려는 사이트에서 문제없이 작동하는지

쉽게 확인할 수 있습니다.

 

Tag Assistant 사용법은

아래의 포스팅에서 3항을 살펴보세요.

 

Tag Assistant 사용법 보러가기

 

3. 카탈로그(=상품목록) 조회 태그 생성
 

이제

일반적인 쇼핑몰 구매 고객의 행동 순서를 따라서

카탈로그 조회 태그를 생성할 차례입니다.

 

사이트 방문자의 쇼핑 행동이

구글 애널리틱스 4를 사용했다고 변할 수 없어서

설정 내용은 유니버설 애널리틱스와 동일하고

세부 사항이 조금 다른데,

 

구글 애널리틱스 4가 유니버설 애널리틱스에 비해

설정 내용이 좀 더 직관적이고 간단합니다.

 

DLV.ecommerce.items 변수 생성

 

좌측 메뉴에서 [변수] 탭을 클릭합니다.

 

변수명: DLV.ecommerce.items (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.items (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

참고로,

DLV는 저희 싱글뷰가 정한

DataLayer Variable의 약자일 뿐입니다.

 

구글태그매니저_구글애널리틱스4_설정법_5.png

 

ga4_view_item_list 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_view_item_list (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: view_item_list (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_6.png

 

ga4_view_item_list.png

 

아래의 배경 지식을 참고하세요.

 

{{DLV.ecommerce.items}}는

방금 전에 생성한 변수를 사용하겠다는 예약어입니다.

 

스크롤을 내리면 트리거 설정 화면이 표시됩니다.

 

구글태그매니저_구글애널리틱스4_설정법_8.png

 

이 섹션을 클릭해서 트리거를 생성합니다.

좌측 메뉴에서 [트리거] 탭을 클릭해서 접근할 수도 있습니다.

 

ga4_view_item_list 트리거 생성

 

트리거명: ga4_view_item_list (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: view_item_list (텍스트를 복사하여 붙여넣으세요)

 

ga4_view_item_list_trig.png

 

4. 카탈로그(=상품목록)에서 개별 상품 클릭 태그 생성
 

카탈로그에서 상품 목록을 보던 중

어떤 상품의 상세 페이지 링크를 클릭하는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_select_item 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_select_item (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: select_item (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_10.png

 

ga4_select_item 트리거 생성

 

트리거명: ga4_select_item (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: select_item (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_11.png

 
5. 상품 상세페이지 조회 태그 생성
 

어떤 상품의 상세 페이지를 조회하는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_view_item 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_12.png

 

ga4_view_item 트리거 생성

 

트리거명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_13.png

 

6. 장바구니 담기 태그 생성
 

어떤 상품의 상세 페이지에서

해당 상품을 장바구니에 담는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_add_to_cart 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_add_to_cart (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: add_to_cart (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수1 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수1 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

이벤트 매개변수2 - 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수2 - 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

참고로, value를 정확하게 전송하지 않아서 event value가 0으로 기록되면 이후에

add_to_cart 이벤트를 Goal로 설정하여 추적하는 작업이 원활하지 않을 수 있습니다.

 

구글태그매니저_구글애널리틱스4_설정법_28.png

 

ga4_add_to_cart 트리거 생성

 

트리거명: ga4_add_to_cart (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: add_to_cart (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_15.png

 

8. 지금 구매하기 태그 생성
 

어떤 상품의 상세 페이지에서

해당 상품을 지금 구매하는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_begin_checkout 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_begin_checkout (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: begin_checkout (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수1 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수1 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

이벤트 매개변수2 - 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수2 - 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

참고로, value를 정확하게 전송하지 않아서 event value가 0으로 기록되면 이후에

begin_checkout 이벤트를 Goal로 설정하여 추적하는 작업이 원활하지 않을 수 있습니다.

 

구글태그매니저_구글애널리틱스4_설정법_29.png

 

ga4_begin_checkout 트리거 생성

 

트리거명: ga4_begin_checkout (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: begin_checkout (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_17.png

 

8. 장바구니 목록 조회하기 태그 생성
 

장바구니 목록 페이지를 조회하는

이벤트를 처리하는 태그를 생성합니다.

 

유니버설 애널리틱스에서

구글 애널리틱스 4로 버전업 되면서

Recommended Events로 변경되었습니다.

 

이러한 안내가 어색하시면

아래의 페이지에서 관련 정보를 살펴보세요.

 

구글 애널리틱스 4의 Recommended Events 알아보기

 

그런데

유니버설 애널리틱스와 병행하시는 경우에도

이 태그를 생성하면

구글 애널리틱스 버전과 무관하게

gaectk.js와 연동하여 필요한 태그를 실행합니다.

 

실제로 gaectk.js 라이브러리에서는

구글 애널리틱스 버전과 무관하게

gaectkCart.viewCart()라는

동일한 인터페이스를 제공합니다.

 

ga4_view_cart 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_view_cart (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: view_cart (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_18.png

 

ga4_view_cart 트리거 생성

 

트리거명: ga4_view_cart (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: view_cart (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_19.png

 

9. 장바구니 품목 삭제하기 태그 생성
 

장바구니 목록 페이지에서

개별 품목을 삭제하하는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_remove_from_cart 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_remove_from_cart (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: remove_from_cart (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_20.png

 

ga4_remove_from_cart 트리거 생성

 

트리거명: ga4_remove_from_cart (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: remove_from_cart (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_21.png

 

10. 결제 완료 태그 생성
 

결제 완료 페이지가 표시되는

이벤트를 처리하는 태그를 생성합니다.

 

구글 애널리틱스 4와 GTM 설정 과정에서

유일하게 변수 설정이 까다롭습니다.

 

DLV.ecommerce.transaction_id 변수 생성

 

변수명: DLV.ecommerce.transaction_id (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.transaction_id (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_22.png

 

동일한 방식으로 아래의 변수를 생성합니다.

 

변수명: DLV.ecommerce.tax (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.tax (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

변수명: DLV.ecommerce.shipping (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.shipping (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

변수명: DLV.ecommerce.value (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.value (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

변수명: DLV.ecommerce.affiliation (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.affiliation (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

변수명: DLV.ecommerce.currency (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.currency (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

변수명: DLV.ecommerce.coupon (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.coupon (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

ga4_purchase 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_purchase (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: purchase (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

이벤트 매개변수 - 매개변수 이름: transaction_id (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.ecommerce.transaction_id}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

이벤트 매개변수 - 매개변수 이름: tax (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.ecommerce.tax}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

이벤트 매개변수 - 매개변수 이름: shipping (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.ecommerce.shipping}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

이벤트 매개변수 - 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

이벤트 매개변수 - 매개변수 이름: affiliation (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.ecommerce.affiliation}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

이벤트 매개변수 - 매개변수 이름: currency (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.ecommerce.currency}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

이벤트 매개변수 - 매개변수 이름: coupon (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.ecommerce.coupon}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

ga4_purchase 트리거 생성

 

트리거명: ga4_purchase (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: purchase (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_24.png

 

11. 사용자 정의 이벤트 전송 태그 생성
 
GTM API를 사용할 때에도 아래의 세 가지 함수를 이용해서
사용자 정의 이벤트를 GA4로 전송할 수 있습니다.
 

checkNonEcConversionGaectk(sVirtualUrl, sPageTitle)

sendClickEventGaectk(sCategory, sEventLbl, sLocation, sWindow)

sendDisplayEventGaectk(sDisplayedObject)

 

필요한 변수를 추가합니다.

 

변수명: DLV.sv_event_info.page_location (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: sv_event_info.page_location (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

GTM_사용자_정의_이벤트_2.png

동일한 방식으로 아래의 변수를 생성합니다.

 

변수명: DLV.sv_event_info.page_title (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: sv_event_info.page_title (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

변수명: DLV.sv_event_info.value (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: sv_event_info.value (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

변수명: DLV.sv_event_info.label (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: sv_event_info.label (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

checkNonEcConversionGaectk(sVirtualUrl, sPageTitle)를

실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.

 

ga4_virtual_pv 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)

이벤트 이름: page_view (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 매개변수 이름: page_title (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.sv_event_info.page_title}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

이벤트 매개변수 - 매개변수 이름: page_location (텍스트를 복사하여 붙여넣으세요)

 

이벤트 매개변수 - 값: {{DLV.sv_event_info.page_location}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

GTM_사용자_정의_이벤트_1.png

ga4_virtual_pv 트리거 생성

 

트리거명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: virtula_pv (텍스트를 복사하여 붙여넣으세요)

 

GTM_사용자_정의_이벤트_3.png

동일한 방식으로

sendClickEventGaectk()를

실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.

 

ga4_clicked 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_clicked (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)

이벤트 이름: {{DLV.sv_event_info.label}} (텍스트를 복사하여 붙여넣으세요)

 

ga4_clicked 트리거 생성

 

트리거명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: clicked (텍스트를 복사하여 붙여넣으세요)

 

동일한 방식으로

sendDisplayEventGaectk()를

실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.

 

ga4_displayed 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_clicked (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)

이벤트 이름: {{DLV.sv_event_info.label}} (텍스트를 복사하여 붙여넣으세요)

 

ga4_displayed 트리거 생성

 

트리거명: ga4_displayed (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: displayed (텍스트를 복사하여 붙여넣으세요)

 

수고하셨습니다.

 

이제

사이트에 이미 설치하신 gaectk.js 라이브러리와

GTM 연결 작업이 완료되었습니다.

 

12. GA4 폴더 생성

 
이 단계는 구글 애널리틱스 4를
유니버설 애널리틱스와 병행 사용하시려는
경우에 더욱 신경쓰셔야 합니다.
 
GTM을 열심히 활용하다보면
수 십가지 태그가 혼란스럽게
뒤섞인 상태가 될 수 있기 때문입니다.
 
물론,
GTM의 버전 관리 로그를 세심하게 살펴보시면
뒤엉킨 태그 무더기 속에서도
필요한 부분을 찾으시겠지만
틈틈히 정리를 해두시면 칼퇴는 일상이 됩니다.
 
구글태그매니저_구글애널리틱스4_설정법_25.png

 

언제나 칼퇴를 향한 노력은 계속되어야 합니다.

 

위의 캡처 화면과 같이

Google Analytics 4 폴더를 생성하신 후

이번에 생성한 변수, 태그, 트리거를 모두

Google Analytics 4 폴더로 이동하세요.

 

13. 게시하기

 

Tag Assistant를 사용하여

설정 과정에서 오류가 없었는지 확인하신 후에

[제출] 버튼을 클릭하여

GTM이 목표 홈페이지에 태그를 게시하도록 허락합니다.

 

구글태그매니저_구글애널리틱스4_설정법_26.png

 

게시하시는 버전을 식별할 수 있는

자세한 정보를 자세히 기록해 두시는 습관이

항상 더 좋다는 점을 명심하세요.

 

구글태그매니저_구글애널리틱스4_설정법_27.png

 

GTM으로 여러가지 이벤트를 추적하다보면

GTM 관리자가 태그 무더기가 뒤섞인 상태일 수 있고

 

이번에 설정하신 후에 전혀 손대지 않으신다 해도

한참 후에 다시 보면 아무것도 기억이 안날 수도 있습니다.

 

여러 개의 복잡한 시스템을 관리하실 때에는

기록은 기억을 지배한다는 격언을

항상 잊지 않으셔야 합니다.

 

수고가 많으셨습니다.

 

지금까지

gaectk.js 라이브러리를 이용하여

유니버설 애널리틱스,

구글 애널리틱스 4을 JS API로 직접 연결하거나

GTM과 연동하는 방법을 알아봤습니다.

" ["document_srl"]=> int(19485) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20231112134837" ["comment_count"]=> int(4) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(28) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [33]=> object(stdClass)#440 (17) { ["title"]=> string(117) "구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Universal Analytics + GTM + gaectk.js" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20211005112847" ["readed_count"]=> int(653) ["content"]=> string(45552) "

지금까지 구글 애널리틱스의

이커머스 데이터 수집 방식에서

 

유니버설 애널리틱스와 구글 애널리틱스 4

구글 태그 매니저의 복잡한 상호 관계에 대해서

정확히 이해하기 위해

상당히 많은 시간을 할애했습니다.

 

이제

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

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

이커머스 데이터 수집 설정 방법을

살펴 볼 차례입니다.

 

한번 더 말씀드리면 이 포스팅의 목적은

유니버설 애널리틱스와 구글 태그 매니저를 설정해서

실무에 필요한 모든 이커머스 데이터 수집 기능을

즉시 정확하게 활성화하는 것입니다.

 

유니버설 애널리틱스와 구글 태그 매니저를

단순히 살펴보고 실습하는 정보가 필요하시면

다른 더 좋은 정보를 찾아보시길 부탁드립니다.

 

1. 구글 태그 매니저 로그인 하기

 
이 포스팅에서 안내해 드리는 방법은
이전 포스팅에서 설명한 gaectk.js 라이브러리를 
사용한다는 전제입니다.
 
gaectk.js 라이브러리를 설치하지 않고
본 포스팅에 따라 GTM만 설정하시면
이커머스 데이터가 수집되지 않습니다.
 
이러한 안내가 어색하시면
아래의 페이지를 먼저 세심하게 살펴보셔야 합니다.
 
gaectk.js 라이브러리와 구글 애널리틱스 관계 알아보기
 
여기까지 모두 숙지하셨다면
이제 구글 태그 매니저에 로그인 하세요.
 
구글 태그 매니저의 계정 설정 방법과 같은
기본적인 부분은 매우 읽기 쉽고 자세한 정보가
너무 많기 때문에 이 포스팅에서는 생략하겠습니다.
 
구글 태그 매니저에 로그인하시면
아래와 같은 혹은 비슷한 화면을 볼 수 있습니다.
 
구글태그매니저_유니버설애널리틱스_설정법_1.png.png

 

이 화면을 확인하셨다면

설정 작업에 필요한 
모든 사전 준비가 완료되었습니다.
 
이제
유니버설 애널리틱스(=구버전) 기준으로
쇼핑몰 구매 고객의 일반적인 행동 순서를 따라서
구글 태그 매니저 설정을 시작하겠습니다.
 
2. 글로벌 태그 생성
 
UA Tracker 변수 생성
 

변수명: UA Tracker

추적 ID: UA-XXXXXXX (유니버설 애널리틱스 관리자에서 확인한 Tracking ID입니다.)

 
구글태그매니저_유니버설애널리틱스_설정법_2.png

 

UA global tag 태그 생성

 

태그명: UA global tag

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 페이지뷰

Google 애널리틱스 설정: {{UA Tracker}} (방금 전에 생성한 변수입니다.)

Trigger: All Pages (GTM이 이미 제공하는 트리거를 선택하세요.)

 

구글태그매니저_유니버설애널리틱스_설정법_3.png

 

구글태그매니저_유니버설애널리틱스_설정법_4.png

 

이제 글로벌 태그를 생성하고 설정했습니다.

 

하나의 태그 설정을 완료할 때마다

구글 태그 매니저는 Tag Assistant라는

독특한 디버거를 제공하기 때문에

게시하려는 사이트에서 문제없이 작동하는지

쉽게 확인할 수 있습니다.

 

이 포스팅을 작성한 2021년 10월 기준

Tag Assistant는 beta 버전입니다.

 

3. 미리보기 실행하기

 

구글 태그 매니저 관리자 화면 상단의

[미리보기] 단추를 클릭하세요.

 

구글태그매니저_유니버설애널리틱스_설정법_5.png

 

Your wetsite's URL 입력란에 GTM을 적용하려는

사이트 주소를 입력한 후 Connect를 클릭하세요.

 

구글태그매니저_유니버설애널리틱스_설정법_6.png

 

[Continue]를 클릭하시면 아래와 같은 화면이 나타나면서

 

구글태그매니저_유니버설애널리틱스_설정법_8.png

 

특별한 문제가 없다면

입력한 URL의 페이지가 새창에서 표시되고

아래와 같은 화면으로 전환됩니다.

 

구글태그매니저_유니버설애널리틱스_설정법_7.png

 

[Continue]를 클릭하시면 아래와 같은 화면이 표시됩니다.

 

[Tags Fired] 섹션에 UA global tag가 표시되었다면 축하드립니다!

 

현재 여러분의 화면이 아래의 캡처 화면과

조금 달라도 신경쓰실 필요가 없습니다.

 

저희가 캡처한 Tag Assistant 화면은 당연히,

모든 설정을 이상없이 완료한 상태이기 때문에

여러분도 모든 순서를 따르시면 

결국 동일한 Tag Assistant 화면을 볼 것입니다.

 

구글태그매니저_유니버설애널리틱스_설정법_8.png

 

지금은

[Tags Fired] 섹션에 UA global tag가

표시되었으면 성공입니다!

 

태그 한개를 완성하실 때마다

Tag Assitant를 실행시켜서

이상없이 작동하는지 확인하세요.

 

물론,

모든 태그를 생성한 후에

한번에 검토하는 방법도 가능하지만

 

구글 애널리틱스의 이커머스 태그는

암시적인 상호 의존 관계가 있어서

전단계의 태그를 생성할 때 사소한 실수가

후단계의 태그 실행에 악영향을 미칠 수 있습니다.

 

더하여,

아직은 사이트에도 gaectk.js 라이브러리를

문제없이 설치되었다고 확신하시면 안됩니다.

 

상호 의존성이 있는 오류가

복잡하게 뒤엉킨 상황을 피하시는 것이

GTM 설정 시간을 훨씬 더 단축시킵니다.

 

4. 카탈로그(=상품목록) 조회 태그 생성
 

이제

일반적인 쇼핑몰 구매 고객의 행동 순서를 따라서

카탈로그 조회 태그를 생성할 차례입니다.

 

DLV.ecommerce.actionField.list 변수 생성

 

좌측 메뉴에서 [변수] 탭을 클릭합니다.

 

변수명: DLV.ecommerce.actionField.list (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.actionField.list (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

참고로,

DLV는 저희 싱글뷰가 정한

DataLayer Variable의 약자일 뿐입니다.

 

구글태그매니저_유니버설애널리틱스_설정법_9.png

 

eec_add_impression 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: eec_add_impression (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 이벤트 (선택 상자에서 선택하세요.)

이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 작업: add_imp (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 라벨: Catalog:{{DLV.ecommerce.actionField.list}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 값: 공란

비 상호작용 조회: 참 (선택 상자에서 선택하세요.)

Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)

이 태그의 설정 재정의 사용: 체크박스 선택

기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)

기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택

 

구글태그매니저_유니버설애널리틱스_설정법_10.png

 

참고로,

두 가지 배경 지식을 이해하셔야 합니다.

 

{{DLV.ecommerce.actionField.list}}는

방금 전에 생성한 변수를 사용하겠다는 예약어입니다.

 

이벤트 추적매개변수에 입력한

카테고리, 작업, 라벨의 값은

GTM 설정이 성공적으로 완료되면

아래의 캡쳐 화면과 같은

유니버설 애널리틱스 보고서에서

확인하실 수 있습니다.

 

구글태그매니저_유니버설애널리틱스_설정법_16.png

 

EEC 카테고리를 클릭하시면

하위 수준의 액션과 라벨을

직관적으로 살펴보실 수 있습니다.

 

다시

GTM 관리자 화면으로 돌아와서

태그를 설정하면서 스크롤을 내리면

트리거 설정 화면이 표시됩니다.

 

구글태그매니저_유니버설애널리틱스_설정법_12.png

 

이 섹션을 클릭해서 트리거를 생성합니다.

이후에 좌측 메뉴에서 [트리거] 탭을 클릭해서 접근할 수 있습니다.

 

eec.impressionView 트리거 생성

 

트리거명: eec.impressionView (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: eec.impressionView (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_유니버설애널리틱스_설정법_11.png

 

5. 카탈로그(=상품목록)에서 개별 상품 클릭 태그 생성
 

카탈로그에서 상품 목록을 보던 중

어떤 상품의 상세 페이지 링크를 클릭하는

이벤트를 처리하는 태그를 생성합니다.

 

DLV.sv_event_lbl 변수 생성

 

좌측 메뉴에서 [변수] 탭을 클릭합니다.

 

변수명: DLV.sv_event_lbl (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: sv_event_lbl (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_유니버설애널리틱스_설정법_13.png

 

eec_click_item 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: eec_click_item (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 이벤트 (선택 상자에서 선택하세요.)

이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 작업: click_item (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 라벨: {{DLV.sv_event_lbl}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 값: 공란

비 상호작용 조회: 참 (선택 상자에서 선택하세요.)

Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)

이 태그의 설정 재정의 사용: 체크박스 선택

기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)

기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택

 

구글태그매니저_유니버설애널리틱스_설정법_14.png

 

eec.impressionClick 트리거 생성

 

트리거명: eec.impressionClick (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: eec.impressionClick (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_유니버설애널리틱스_설정법_15.png

 

6. 상품 상세페이지 조회 태그 생성
 

어떤 상품의 상세 페이지를 조회하는

이벤트를 처리하는 태그를 생성합니다.

 

DLV.ecommerce.detail.actionField.list 변수 생성

 

4항에서 이미 생성한 

DLV.ecommerce.actionField.list와 혼동하지 마세요.

 

좌측 메뉴에서 [변수] 탭을 클릭합니다.

 

변수명: DLV.ecommerce.detail.actionField.list (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.detail.actionField.list (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_유니버설애널리틱스_설정법_17.png

 

eec_view_detail 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: eec_view_detail (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 이벤트 (선택 상자에서 선택하세요.)

이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 작업: view_detail (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 라벨: {{DLV.ecommerce.detail.actionField.list}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 값: 공란

비 상호작용 조회: 참 (선택 상자에서 선택하세요.)

Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)

이 태그의 설정 재정의 사용: 체크박스 선택

기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)

기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택

 

구글태그매니저_유니버설애널리틱스_설정법_18.png

 

eec.detail 트리거 생성

 

트리거명: eec.detail (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: eec.detail (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_유니버설애널리틱스_설정법_19.png

 

7. 장바구니 담기 태그 생성
 

어떤 상품의 상세 페이지에서

해당 상품을 장바구니에 담는

이벤트를 처리하는 태그를 생성합니다.

 

DLV.sv_event_lbl 변수 생성

 

5항에서 이미 생성헸습니다.

 

eec_add_cart 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: eec_add_cart (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 이벤트 (선택 상자에서 선택하세요.)

이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 작업: add_cart (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 라벨: {{DLV.sv_event_lbl}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 값: {{DLV.sv_event_val}} (텍스트를 복사하여 붙여넣으세요)

비 상호작용 조회: 참 (선택 상자에서 선택하세요.)

Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)

이 태그의 설정 재정의 사용: 체크박스 선택

기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)

기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택

 

구글태그매니저_유니버설애널리틱스_설정법_20.png

 

eec.add 트리거 생성

 

트리거명: eec.add (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: eec.add (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_유니버설애널리틱스_설정법_21.png

 

8. 지금 구매하기 태그 생성
 

어떤 상품의 상세 페이지에서

해당 상품을 지금 구매하는

이벤트를 처리하는 태그를 생성합니다.

 

DLV.ecommerce.checkout.actionField.step 변수 생성

 

좌측 메뉴에서 [변수] 탭을 클릭합니다.

 

변수명: DLV.ecommerce.checkout.actionField.step (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.checkout.actionField.step (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_유니버설애널리틱스_설정법_22.png

 

DLV.sv_event_val 변수 생성

 

변수명: DLV.sv_event_val (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: DLV.sv_event_val (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_유니버설애널리틱스_설정법_23.png

 

DLV.sv_event_lbl 변수 생성

 

5항에서 이미 생성헸습니다.

 

eec_checkout_step_N 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: eec_checkout_step_N (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 이벤트 (선택 상자에서 선택하세요.)

이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 작업: checkout_step_{{DLV.ecommerce.checkout.actionField.step}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 라벨: {{DLV.sv_event_lbl}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 값: {{DLV.sv_event_val}} (텍스트를 복사하여 붙여넣으세요)

비 상호작용 조회: 참 (선택 상자에서 선택하세요.)

Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)

이 태그의 설정 재정의 사용: 체크박스 선택

기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)

기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택

 

구글태그매니저_유니버설애널리틱스_설정법_24.png

 

eec.checkout 트리거 생성

 

트리거명: eec.checkout (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: eec.checkout (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_유니버설애널리틱스_설정법_25.png

 

9. 장바구니 목록 조회하기 태그 생성
 

장바구니 목록 페이지를 조회하는

이벤트를 처리하는 태그를 생성합니다.

 

이 이벤트는 유니버설 애널리틱스에서는

그저 일반 이벤트라서 무시하실 수 있습니다.

 

하지만

구글 애널리틱스 4로 이전을 준비하거나

구글 애널리틱스 4와 병행하시는 경우에 

이 태그를 생성해서

구글 애널리틱스 버전과 무관하게

동일한 구조를 조성하는 것이

추후의 유지보수 업무에서 더 효율적입니다.

 

실제로 gaectk.js 라이브러리에서는

구글 애널리틱스 버전과 무관하게

gaectkCart.viewCart()라는

동일한 인터페이스를 제공합니다.

 

DLV.sv_event_val 변수 생성

 

8항에서 이미 생성했습니다.

 

DLV.sv_event_lbl 변수 생성

 

5항에서 이미 생성헸습니다.

 

eec_view_cart 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: eec_view_cart (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 이벤트 (선택 상자에서 선택하세요.)

이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 작업: view_cart (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 라벨: {{DLV.sv_event_lbl}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 값: {{DLV.sv_event_val}} (텍스트를 복사하여 붙여넣으세요)

비 상호작용 조회: 참 (선택 상자에서 선택하세요.)

Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)

이 태그의 설정 재정의 사용: 체크박스 선택

기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)

기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택

 

구글태그매니저_유니버설애널리틱스_설정법_26.png

 

eec.viewCart 트리거 생성

 

트리거명: eec.viewCart (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: eec.viewCart (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_유니버설애널리틱스_설정법_27.png

 

10. 장바구니 품목 삭제하기 태그 생성
 

장바구니 목록 페이지에서

개별 품목을 삭제하하는

이벤트를 처리하는 태그를 생성합니다.

 

DLV.ecommerce.remove.actionField.list 변수 생성

 

변수명: DLV.ecommerce.remove.actionField.list (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.remove.actionField.list (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_유니버설애널리틱스_설정법_28.png

 

DLV.sv_event_val 변수 생성

 

8항에서 이미 생성했습니다.

 

eec_remove_cart 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: eec_remove_cart (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 이벤트 (선택 상자에서 선택하세요.)

이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 작업: remove_cart (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 라벨: {{DLV.ecommerce.remove.actionField.list}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 값: {{DLV.sv_event_val}} (텍스트를 복사하여 붙여넣으세요)

비 상호작용 조회: 참 (선택 상자에서 선택하세요.)

Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)

이 태그의 설정 재정의 사용: 체크박스 선택

기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)

기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택

 

구글태그매니저_유니버설애널리틱스_설정법_29.png

 

eec.remove 트리거 생성

 

트리거명: eec.remove (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: eec.remove (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_유니버설애널리틱스_설정법_30.png

 

11. 결제 완료 태그 생성
 

결제 완료 페이지가 표시되는

이벤트를 처리하는 태그를 생성합니다.

 

DLV.ecommerce.purchase.actionField.id 변수 생성

 

변수명: DLV.ecommerce.purchase.actionField.id (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.purchase.actionField.id (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_유니버설애널리틱스_설정법_31.png

 

DLV.ecommerce.purchase.actionField.revenue 변수 생성

 

변수명: DLV.ecommerce.purchase.actionField.revenue (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.purchase.actionField.revenue (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_유니버설애널리틱스_설정법_32.png

 

eec_purchase 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: eec_purchase (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: 유니버설 애널리틱스

추적 유형: 이벤트 (선택 상자에서 선택하세요.)

이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 작업: purchase (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 라벨: OrderID:{{DLV.ecommerce.purchase.actionField.id}} (텍스트를 복사하여 붙여넣으세요)

이벤트 추적매개변수 - 값: {{DLV.ecommerce.purchase.actionField.revenue}} (텍스트를 복사하여 붙여넣으세요)

비 상호작용 조회: 참 (선택 상자에서 선택하세요.)

Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)

이 태그의 설정 재정의 사용: 체크박스 선택

기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)

기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택

 

구글태그매니저_유니버설애널리틱스_설정법_33.png

 

eec.purchase 트리거 생성

 

트리거명: eec.purchase (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: eec.purchase (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_유니버설애널리틱스_설정법_34.png

 

수고하셨습니다.

 

이제

사이트에 이미 설치하신 gaectk.js 라이브러리와

GTM 연결 작업이 완료되었습니다.

 

12. Universal Analytics 폴더 생성

 
이 단계는 유니버설 애널리틱스를
구글 애널리틱스 4와 병행 사용하시려는 경우에
더욱 신경쓰셔야 합니다.
 
GTM을 열심히 활용하다보면
수 십가지 태그가 혼란스럽게
뒤섞인 상태가 될 수 있기 때문입니다.
 
물론,
GTM의 버전 관리 로그를 세심하게 살펴보시면
뒤엉킨 태그 무더기 속에서도
필요한 부분을 찾으시겠지만
틈틈히 정리를 해두시면 칼퇴는 일상이 됩니다.
 
구글태그매니저_유니버설애널리틱스_설정법_37.png

 

언제나 칼퇴를 향한 노력은 계속되어야 합니다.

 

위의 캡처 화면과 같이

Universal Analytics 폴더를 생성하신 후

이번에 생성한 변수, 태그, 트리거를 모두

Universal Analytics 폴더로 이동하세요.

 

13. 게시하기

 

Tag Assistant를 사용하여

설정 과정에서 오류가 없었는지 확인하신 후에

[제출] 버튼을 클릭하여

GTM이 목표 홈페이지에 태그를 게시하도록 허락합니다.

 

구글태그매니저_유니버설애널리틱스_설정법_35.png

 

게시하시는 버전을 식별할 수 있는

자세한 정보를 자세히 기록해 두시는 습관이

항상 더 좋다는 점을 명심하세요.

 

구글태그매니저_유니버설애널리틱스_설정법_36.png

 

GTM으로 여러가지 이벤트를 추적하다보면

GTM 관리자가 태그 무더기가 뒤섞인 상태일 수 있고

 

이번에 설정하신 후에 전혀 손대지 않으신다 해도

한참 후에 다시 보면 아무것도 기억이 안나는 상태일 수도 있습니다.

 

여러 개의 복잡한 시스템을 관리하실 때에는

기록은 기억을 지배한다는 격언을

항상 잊지 않으셔야 합니다.

 

수고가 많으셨습니다.

 

다음 포스팅에서는

gaectk.js 라이브러리를 기반으로

구글 애널리틱스 4와 GTM을 연결하겠습니다.

 

다음 포스팅 보러가기

" ["document_srl"]=> int(19352) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20230514101341" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(41) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [32]=> object(stdClass)#439 (17) { ["title"]=> string(81) "구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - 2" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20210926200116" ["readed_count"]=> int(508) ["content"]=> string(20090) "

이전 포스팅에서는

이커머스 데이터 수집 기능과 관련된

유니버설 애널리틱스와 구글 애널리틱스 4의

같은 점과 다른 점을 개략적으로 살펴봤습니다.

 

이전 포스팅 보러 가기

 

더하여,

유니버설 애널리틱스와 구글 애널리틱스 4의

이벤트 데이터 모델을 충분히 이해한다는 전제를

항상 기억하셔야 합니다.

 

구글 애널리틱스 4의 이벤트 데이터 모델을

충분히 이해한다고 생각하지 않으신다면

아래의 포스팅부터 살펴보세요.

 

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

 

현실적으로는

저희가 안내해 드리는 기본 정보를 

모두 살펴보시는 것이 쉽지 않다는 점을

저희도 잘 알고 있습니다.

 

방대하고 난해한 GTM API를 완전히 이해하는 것은

여러분의 매출이나 연말 성과급과

무관한 경우가 대부분이기 때문입니다.

 

무관한 경우라라면 더욱

이 포스팅을 끝까지 살펴보셔야 합니다.

 

지금 자바스크립트가 무엇인지 모르셔도

GTM을 들어만 보셨어도 

구글 애널리틱스로 가능한 최고의 정확도로

이커머스 데이터를 정량분석할 수 있다는 점을

공감하실 것으로 기대합니다.

 

 

1. 구글 애널리틱스의 이커머스 데이터 수집 방식

 

이전 포스팅에서도 말씀 드렸듯이

현재 공식적으로

구글 애널리틱스 개발팀에서는

 

유니버설 애널리틱스와 구글 애널리틱스 4를

병행하라고 권고하기 때문에

 

수집 방식을 결정하는 것이

더 복잡하고 어려워졌습니다.

 

그럴수록

전체 구조를 조망하는 것이 중요합니다.

 

이커머스 데이터 수집 방식은

크게 아래와 같이 구분해 볼 수 있습니다.

 

  유니버설 애널리틱스 구글 애널리틱스 4
JS API 초기 버전의 Event Data Model을 통해 유연한 이벤트 추적이 가능함. Recommended events만 사용해도 일반적인 쇼핑몰의 Shopping behavior를 더 자세히 추적할 수 있음.

GTM

dataLayer

 쇼핑몰 페이지에 Snippet Code를 구현하는 것 만큼 GTM Tag와 변수를 설정하는 작업이 번거로움.

Recommended events와 Item Data model이 더 체계적으로 정리되어 유니버설 애널리틱스에 비해 Snippet Code를 구현하는 것보다 GTM Tag와 변수를 설정하는 작업이 간단함.

 

JS API와 GTM은 각각의 장단점은

위의 표에서 제시된 것보다 훨씬 더 많습니다.

 

그런데

JS API와 GTM의 장단점을 비교하다보면

근본적으로 구글 애널리틱스 4가 신 버전이기 때문에

구글 애널리틱스 4와 GTM dataLayer 방식이

더 사용하기 편리해 보일 가능성이 높습니다.

 

더하여,

편리함은 유연함과 반비례한 경우가 많기 때문에

유니버설 애널리틱스와 JS API 방식은 불편하다는 단점이

더 유연하다는 역설적인 장점으로 해석할 수도 있습니다.

 

이러한 모호함과 복잡함을

실무자들의 입장에서 극단적인 예를 들면,

유니버설 애널리틱스는

GTM을 이용하여 데이터를 수집하고

 

구글 애널리틱스 4는 gtag API를 이용하여

데이터를 수집할 수도 있습니다.

 

하지만

이러한 중구난방 상태에서는

Snippet code 유지보수가 매우 어려워지기 때문에

 

결국

JS API와 GTM 방식 중 하나를 선택해야만 합니다.

 

저희가 여러 프로젝트를 진행해보니

 

조직에 내부 개발팀이 있어도 없어도

Snippet Code 최적화는 고양이 목에

방울 걸기와 같은 문제이기 때문에

 

매우 중요한 의사 결정임에도

결론을 내리지 못하는 경우를 자주 목격했습니다.

 

이런 상황이 발생하면

저희는 외부 전문팀이라는 입장 때문에

무기력한 데드락에서 시간만 지체하게 됩니다.

 

그래서

GAECTK라는 JS Library를 개발했습니다.

 

2. 싱글뷰가 오픈소스로 제공하는 GAECTK JS Library는?

 

몇년 전에는 분석적인 온라인 마케팅이

일종의 신비로운 마술로 과대 평가되며

그로스 해커라는 지극히 낭만적이지만

현실성이 전혀 없는 단어까지 등장했습니다.

 

다행히 최근에는

구글 애널리틱스나 퍼포먼스 마케팅 강의는

차고 넘치는 상황에 접어 들었습니다.

 

창의적이고 도전적이지만 매우 저렴한

그로스 해킹 인강까지 차고 넘치는 이유는

 

실무자_거부감.jpg

 

역설적으로

"정말 배우고 싶지 않다!"는

거부감의 반증이라는 냉정한 현실을

 

저희는

수 년간 고가의 OJT를

제공해 드리면서 알게 되었습니다.

 

실제로

조직의 경영진이 싱글뷰의 전문 역량을

실무진이 열심히 학습해서 내부화시키길 기대해서

경영진이 파격적인 인센티브를 약속한다 해도

 

실무진 입장에서는 

당장 지금부터 시작되는 OJT 과정에서

분명히 업무 범위가 방만해지고 퇴근은 늦어지지만

 

본인이 열심히 싱글뷰의 방대한 전문 역량을 학습하여

몇달 뒤에 인센티브 조건을 달성할

가능성은 매우 불분명하다는

 

입장 차이와 갈등이 OJT 시작 3일 이내에

발생할 확률은 99%였습니다.

 

저희가 아무리 교육 방식을 고민해도

근본적으로 어렵고 방대한 지식을

적은 노력으로 모든 것을 이해하도록

압축할 방법은 찾을 수 없었고

 

학습 부담을 느끼는 실무진들은

오늘의 칼퇴근이 내일의 승진보다

훨씬 더 달콤하고 중요할 수 밖에 없습니다.

 

그래서 저희는

 

구글 애널리틱스의 JS API 규격을 설명하고

구글 태그 매니저 설정법을

더 체계적으로 혹은 더 빠르게 교육시키는 것보다

 

실무진들이 복잡한 라이브러리 관련 지식을

아예 공부하지 않아도 수집과 분석을 통한

성과 개선, 그리고 인센티브 달성 업무를

가능한 빠르게 시작하는 방법을 제공하는 것이

 

분석적 온라인 마케팅 프로젝트를

더 높은 수익률로 성공시키는

가장 중요한 요인이라는 사실을 발견했습니다.

 

그래서

GAECTK라는 JS Library를 개발했습니다.

 

아래의 페이지에서 한국의 전형적인

쇼핑몰 UI에 최적화된 라이브러리

사용법을 확인하실 수 있습니다.

 

GAECTK 사용법 보러 가기

 

저희는 백억 단위의 광고비를 집행하며

수 년에 걸친 필드 테스트로 어렵게 개발했지만

여러분은 쉽게 사용하시길 바라기 때문에

2021년 8월부터 오픈소스 체제로 전환했습니다.

 

GAECTK.js Github 보러 가기

 

직접 구현 혹은 코드 최적화에 관심이 있으시면

Github에서 소스 코드만 살펴보시면

수년에 걸쳐 필드에서 검증된 

유니버설 애널리틱스용 Snippet Code와

 

기존의 노하우를 토대로 신속하게 테스트 중인

구글 애널리틱스 4의 JS API와 GTM dataLayer 연동 방법을

매우 직관적으로 비교하실 수 있습니다.

 

3. GAECTK JS Library는 한국의 낙후된 임대형 쇼핑몰에서도 유용합니다.

 

만약 여러분의 학구적인 열정이 매우 강해서

신뢰도 높은 해외 개발자들의 블로그를 방문하시면

구글 애널리틱스와 GTM에 관한 방대한 전문 지식을

얼마든지 찾아보시고 공부하실 수 있습니다.

 

영미권의 매우 유명한 테크 그루들은

구글에서 베타 테스터 등으로 활동하는 경우가 많아서

일반 개발자보다 먼저 더 많은 정보를

더 자세히 살펴볼 수 있습니다.

 

더하여,

매우 박학다식한 영미권 테크 그루들의 설명을 

아무리 살펴보고 이해해도 적용하기 어려운 이유는

한국의 유명 임대형 쇼핑몰 서비스들은

 

애초에 유니버설 애널리틱스가 요구하는

아이템 데이터 모델도 충족시키지 못하는

경우가 대부분이기 때문입니다.

 

쇼핑 행동 흐름 전 과정에 걸쳐서

더 다양하고 일관된 아이템 정보를 요구하는

구글 애널리틱스 4는 말할 것도 없습니다.

 

그래서 저희는

한국 이커머스 인프라의 현실은

전혀 고려하지 않은 영미권의 기술 정보를 

그저 한국어로 풀어서 안내해 드리는 노력은

한국 시장의 실무자들에게는

의미가 거의 없다는 점을 매우 잘 알고 있습니다.

 

더하여,

GAECTK JS Library의 근본적인 설계 목적은

이미 안내해 드렸듯이

 

개발팀과 기획팀, 혹은 마케팅팀이

Snippet code 설치 문제로 끝없는 

요청과 외면하기의 줄다리기로 괴로워할 때

 

저희가 간단하게 설치해 드리고

정량적 측정과 평가라는

프로젝트의 본래 목표에 빠르게 집중하도록

유도하는 것이기 때문에

 

여러분께서도

GAECTK JS Library를 사용하시면

최소한 구글 애널리틱스의

이커머스 데이터 수집과 관련된 작업은

GTM dataLayer보다 더 간단합니다.

 

그래서 

GTM dataLayer를 사용하지 않으시고

JS API를 선택하시면 살펴보셔야 하는 정보는

아래의 페이지가 전부입니다.

 

GAECTK 사용법 보러 가기

 

4. GAECTK JS Library는 한 번만 설치하면 유니버설 애널리틱스와 구글 애널리틱스 4를 모두 처리합니다.

 

이전 포스팅을 살펴보셨다면

어중간하게 달라진 

유니버설 애널리틱스와 구글 애널리틱스 4의

이벤트 데이터 모델 때문에

 

유니버설 애널리틱스와 구글 애널리틱스 4를

모두 작동시키는 Snippet code 관리는

매우 난해해 졌다는 점도

쉽게 공감하실 것 같습니다.

 

GAECTK JS Library를 사용하시면

최소한 구글 애널리틱스의

이커머스 데이터 수집과 관련된 작업은

동일한 호출 함수가 처리하기 때문에

그 이면의 문제를 고민하실 이유가 없습니다.

 

스킨 명령어를 이용하여

호출 함수의 파라미터만 정확히 입력하시면

유니버설 애널리틱스와 구글 애널리틱스 4 계정에 동시에

완전히 동일한 데이터를 전송합니다.

 

5. GAECTK JS Library는 GTM dataLayer를 지원합니다.

 

물론,

GAECTK JS Library를 사용하시면

GTM dataLayer를 사용하셔야만 하는 경우도

매우 간단하게 대응하실 수 있습니다.

 

실무적으로

구글 애널리틱스의 JS API를 사용하시다

GTM dataLayer로 전환하시는 과정은

초기화 함수의 인자를 바꾸시는 것이 전부입니다.

 

다만,

사용하시는 GTM 계정에

GAECTK JS Library가 전송하는 데이터를 처리할

태그, 트리거, 변수를 설정하는 추가 작업은

 

구글 GTM의 특성이기 때문에

저희 싱글뷰가 이 과정을 더 압축시킬 수 없다는

한계는 양해해 주시길 부탁드립니다.

 

물론,

최근에 GTM API를 자세히 살펴보면서

설정 업무의 부담을 조금이라도 더 줄일 수 있는

방법이 있는지 고민하고 있습니다.

 

다음 포스팅에서

GAECTK JS Library가 전송하는 데이터를 처리할

태그, 트리거, 변수를 설정하는 방법을 안내해 드리겠습니다.

 

매우 피곤해서 정말 중요한 업무를 처리하기 힘든 시간에

아무 생각없이 저희가 표시해 드리는 캡처 화면대로 클릭하고

저희가 표시해 드리는 문자열을 복붙하시는 것 뿐입니다.

 

gaeckt.js 라이브러리를 이용하여

유니버설 애널리틱스와 GTM 연결하는 방법 보러가기

" ["document_srl"]=> int(19314) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20211006132705" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(1) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [31]=> object(stdClass)#438 (17) { ["title"]=> string(81) "구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - 1" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20210922125918" ["readed_count"]=> int(1024) ["content"]=> string(22909) "

지금까지 유니버설 애널리틱스와 구글 애널리틱스 4의

이벤트 데이터 모델을 자세히 살펴 본 이유는

 

결국 이커머스 데이터를 수집하고 분석하기 위한

기초 지식이었다고 해도 과언이 아닙니다.

 

구글 애널리틱스의 버전과 무관하게

이커머스 데이터도 이벤트를 기반으로

수집되기 때문에 그러한 이벤트의 개념을

정확하게 이해해야 정확한 분석이 가능하기 때문입니다.

 

그런데

계속 명심해야 하는 주의 사항은

새로운 버전이 라이브되었기 때문에

이제는 더 발전할 가능성이 없는 유니버설 애널리틱스와 달리

 

구글 애널리틱스 4의 이커머스 수집 기능은

계속 개발 중인 것으로 보이고

구글 태그 매니저와 연동 기능도

다소 의아하거나 기대에 미치지 못하는 부분을

발견하실 수 있다는 점입니다.

 

쉽게 말해,

구글 애널리틱스의 이커머스 수집을 위해

어떤 버전의 구글 애널리틱스를 사용하시던

JS API를 사용하시던 GTM dataLayer를 사용하시던

이를 정확하게 구현하는 책임은

전적으로 여러분에게 있습니다.

 

저희가 짐작하기에는

구글 애널리틱스 개발팀도 클릭 한번으로

모든 데이터를 손쉽게 수집해서

완벽하게 분석할 수 있기를 원하겠지만

 

불행히도

전자 상거래 환경은 획일화되지 않았기 때문에

불가능한 희망입니다.

 

그래서

이번 포스팅에서는 

여러분께서 운영하시는 전자 상거래 환경에서

유니버설 애널리틱스와 구글 애널리틱스 4를 이용하여

이커머스 데이터를 정확히 수집하기 위해

반드시 숙지해야 하는 중요한 문제들을 다루겠습니다.

 

여러 번 반복하여 말씀드리듯이

구글 애널리틱스는 

구 버전인 유니버설 애널리틱스와

신 버전인 구글 애널리틱스 4를

당분간 함께 사용하라고 공식적으로 권고하고 있습니다.

 

설령

위와 같은 공식적인 권고가 없다해도

수년간의 소중한 데이터는

구 버전인 유니버설 애널리틱스에 쌓여있고

신 버전인 구글 애널리틱스 4는

이 데이터를 소급하여 적용해 주지 않습니다.

 

그래서

두 버전의 비교는 선택이나 취향이 아닌 필수입니다.

 

이를 통해서,

구글 애널리틱스의 이커머스를

좀 더 역사적인 관점에서 살펴봐야 하는 이유는

충분히 이해하셨을 것 같습니다.

 

이제

처음에는 안개 속을 헤매야 해서 더디고 지루하지만

목적지에 도착할 즈음에는 맑고 청명한 하늘이 기다리는

여행을 시작해 볼까요?

 

구글애널리틱스_이커머스_여정.jpg

Pixabay로부터 입수된 Ana_J님의 이미지 입니다.

 

 

1. 유니버설 애널리틱스! 그리고 구글 애널리틱스 4!

 

구글 애널리틱스 4의 이커머스 관련 기능을 

명쾌하게 이해하는 노력의 시작은

구 버전인 유니버설 애널리틱스가 제공하는

향상된 전자상거래(=Enhanced Ecommerce)를

살펴보는 것에서 시작해야 합니다.

 

구글 애널리틱스 4 전자상거래 보고서의

설정 방법, UI와 같은 구성이

유니버설 애널리틱스의 향상된 전자 상거래와

많이 다르게 보여서 당황스러우시다면

 

사실은

유니버설 애널리틱스가 제공하는 향상된 전자 상거래의

데이터 모델과 구성을 충분히 이해하지 못한 것이 아닌지

진지하게 검토해야 할 증거일 수 있습니다.

 

구 버전과 신 버전의 다른 점보다

같은 점이 더 많기 때문입니다.

 

두 버전의 다양한 이벤트/속성 명칭을

나란히 놓고 살펴볼까요?

 

2. 이커머스 액션 비교하기

 

구글 애널리틱스를 활용해서

수집할 수 있는 이벤트 유형은 아래와 같습니다.

 

유니버설 애널리틱스와 

구글 애널리틱스 4가 개별적으로 제시하는

각각의 이벤트 명칭은 일반적인 쇼핑몰에서 발생하는

구매 전환 과정과 대응합니다.

 

구글 애널리틱스 4가

일반적인 쇼핑몰에서 발생하는

구매 전환 과정을 좀 더 

충실히 재현했다고 평가할 수 있습니다.

 

구글 애널리틱스가 제시하는 API 모델은

아래의 표에서 구체적으로 살펴보실 수 있습니다.

 

예를 들어

GA4 이벤트명은

여러분이 JS API 혹은 구글 태그 매니저를 통해서

입력해야 하는 이벤트 명칭에 해당합니다.

 

이 표에서

유니버설 애널리틱스의 향상된 전자상거래 태그에 대응하는

구글 애널리틱스 4의 이벤트 명칭도 확인할 수 있습니다.

 

GA4 이벤트명 UA 이벤트명 설명
view_promotion promoView 프로모션 정보 열람 행위.
select_promotion promoClick 프로모션 정보 클릭 행위.
view_item_list impressions 제품 카탈로그 목록 열람 행위.
select_item click 카탈로그에서 특정 제품 클릭 행위.
view_item detail 제품 상세 페이지 열람 행위.
add_to_cart add 장바구니 담기 행위.
add_to_wishlist 없음 찜하기 행위.
view_cart     없음 장바구니 목록 열람 행위.
remove_from_cart  remove 장바구니 삭제 행위.
begin_checkout checkout 결제 과정 시작 행위.
add_shipping_info checkout_option 배송 정보 입력 행위.
add_payment_info checkout_option 지불 정보 입력 행위.
purchase purchase 결제 완료 행위.
refund refund                     구매한 제품 환불 행위.

 

특히 노란색으로 강조한 구글 애널리틱스 4의 결제 과정인

begin_checkout, add_shipping_info, add_payment_info는

유니버설 애널리틱스의 중요한 차이점입니다.

 

유니버설 애널리틱스와 다르게 

구글 애널리틱스 4는 더 이상

checkout step 옵션을 허용하지 않고

사전 정의된 가장 일반적인

check out 과정을 제공하기 때문입니다.

 

더하여,

분석 가치가 있지만

유니버설 애널리틱스에서는

명시적으로 제공하지 않았던

이커머스 이벤트인

view_cart와 add_to_wishlist가 

 

구글 애널리틱스 4에서

명시적으로 추가되어

관련 지표를 살펴보는 작업이

한결 수월해 졌습니다.

 

유니버설 애널리틱스에서는

view_cart와 add_to_wishlist 이벤트를

추적하고 분석할 수 없는 것이 아니고

 

구글 애널리틱스 4에서 좀 더

그 절차가 간단해졌다고

이해하시는 것이 더 정확합니다.

 

3. 제품 정보 속성 비교하기

 

구글 애널리틱스 4의 제품 정보 속성을

유니버설 애널리틱스와 비교하면

두 버전 간의 차이점은 다소 어중간합니다.

 

구글 애널리틱스 4에서

제품 카탈로그가 노출된 지점을 정확하게 명시하는

item_list_name, item_list_id 속성을 추가했고

 

item_category1~5 속성을 추가하여

계층적인 제품 카테고리 정보를

유니버설 애널리틱스에서보다

더 편리하게 혹은 명시적으로 적재할 수 있습니다.

 

GA4 속성명 UA 속성명 설명
item_id id 진열 상품의 고유 아이디.
item_name name 진열 상품의 명칭.
item_list_name list 진열 카탈로그의 명칭.
item_list_id 없음 진열 카탈로그의 고유 아이디.
index position 카탈로그에서 상품 진열 순서 번호(숫자형).
item_brand brand 상품의 브랜드.
item_category category 상품 1단계 카테고리.
item_category2 category 상품 2단계 카테고리.
item_category3 category 상품 3단계 카테고리.
item_category4 category 상품 4단계 카테고리.
item_category5 category 상품 4단계 카테고리.
item_variant variant 상품 옵션 명칭.
affiliation 없음 판매촉진 제휴사 코드/명칭.
discount 없음 적용된 할인액(숫자형).
coupon coupon 적용된 쿠폰 코드/명칭.
price price 상품 정상 판매가(숫자형).
currency 없음 상품 판매가의 통화기호.
quantity quantity 제품 구매 수량(숫자형).

 

유니버설 애널리틱스와 마찬가지로

구글 애널리틱스 4에서도 

item_id 혹은 item_name 중에 하나는

반드시 명시되어야 합니다.

 

구글 애널리틱스 4가 제시하는

제품 속성 정보를 모두 채우는 노력은

 

개발자와 분석자 모두에게 의외로

상당히 부담스러운 도전 과제일 수 있습니다.

 

하지만

속성을 가능한 많이 채워넣을 수록 

구글 애널리틱스 4에서

살펴볼 수 있는 분석 보고서가

풍부해 진다는 점과

 

여러분의 쇼핑몰에서 발생하는 이벤트를

더 쉽고 다양하게 살펴볼수록

재무 성과는 급증할 가능성이 높기 때문에

 

쇼핑몰의 낡은 Transaction Engine을

개선하는 작업을 수 년간 망설이며 미루셨다면

이번에 근본적으로 개선하는 계기로

삼으실 수도 있습니다.

 

4. 프로모션 정보 속성 비교하기

 

구글 애널리틱스 4에서도 

판촉 배너의 성과를 측정할 수 있는

데이터를 수집할 수 있습니다.

 

안타깝게도 저희는 실무적으로

큰 필요성을 발견할 수 없었던 기능입니다.

 

다양한 기간 범위와 대상 품목으로

복수의 판촉 행사가 진행되는

상당한 규모의 종합몰이나 오픈 마켓에서는

활용가치가 있을 것으로 예상합니다.

 

저희가 아직까지 발견하지 못했던 필요를

아시는 분들을 위해서 표를 정리했습니다.

 

GA4 속성명 UA 속성명 설명
promotion_id id 판촉 배너 ID.
promotion_name name 판촉 배너 명칭.
creative_name creative 크리에이티브 명칭.
creative_slot position 크리에이티브 개재 위치.
location_id 없음 판촉 배너의 개재 위치.

 

유니버설 애널리틱스와 마찬가지로

구글 애널리틱스 4에서도 

promotion_id 혹은 promotion_name 중에 하나는

반드시 명시되어야 합니다.

 

5. 여러가지 정보 속성 비교하기

 

전송되는 액션의 종류에 따라서

함께 전송되어야 하는 속성들의 필수성은 

판이하게 달라집니다.

 

그런데

이전 포스팅에서 살펴보셨듯이

구글 애널리틱스 4에서는

온라인 마케팅 기획자나 마케팅 팀이

개발자에 의존하지 않아도

매우 다양한 이벤트를 수집할 수 있게 개선하면서

 

역설적으로

구글 애널리틱스 4의 이벤트 모델은

유니버설 애널리틱스보다 훨씬 복잡해 졌습니다.

 

GA4 속성명 UA 속성명 설명
transaction_id id 주문 고유 번호. purchase와 refund 이벤트에서 필수.
affiliation affiliation 제휴 상점 코드/명칭.
value revenue 이벤트의 재무적 가치.
currency currencyCode 재무 가치의 통화 기호. purchase 이벤트에서 필수.
tax tax 총 결제 금액에 포함된 세액.
shipping shipping 배송비. 저희는 총 매출액과 구분합니다.
items

products

impressions

promotions

 특정 이벤트와 연관된 상품 정보
shipping_tier option 배송 정보.
payment_type option 지불 정보.
coupon coupon 특정 이벤트와 연관된 쿠폰 정보.
promotion_id 없음 특정 이벤트와 연관된 판촉 배너 ID.
promotion_name 없음 특정 이벤트와 연관된 판촉 배너 명칭.
creative_name 없음 특정 이벤트와 연관된 크리에이티브 ID.
creative_slot 없음 특정 이벤트와 연관된 크리에이티브 개재 위치.
location_id 없음 페이지의 배너 개재 위치
item_list_name 없음 특정 이벤트와 연관된 제품 카탈로그 명칭.
item_list_id 없음 특정 이벤트와 연관된 제품 카탈로그 ID.

 

그래서 결과적으로는 

유니버설 애널리틱스에서는

 

온라인 마케팅 기획자나 마케팅 팀에서

코딩 지식이 없다면

아무리 살펴봐도 이해할 수 없었기 때문에

개발팀만 살펴봐야 했던 기술 정보를

 

구글 애널리틱스 4에서는

 

온라인 마케팅 기획자나 마케팅 팀에서

살펴보면 이해할 수 있는

상황으로 변했을 뿐이라고 이해하시는 것이

 

더 현실적일 것 같습니다.

 

구글 애널리틱스 4 개발팀에서는

개발팀과 마케팅팀은 혹은 기획팀의 호흡이

이전보다 덜 중요해 지기를 기대하면서

 

구글 애널리틱스 4의 데이터 모델을 

개선한 것 같습니다.

 

하지만

문법적으로 동일한 snippet code로

유니버설 애널리틱스와 구글 애널리틱스 4의

데이터를 비교해 보면

구글 애널리틱스 4의 수치가 다소

불안정 혹은 부정확해 보입니다.

 

유니버설애널리틱스_구글애널리틱스4_데이터차이.png

 

테스트 상품이 구글 애널리틱스의 각 버전에

전송한 상품 가격은 ₩456,700입니다.

 

위의 표를 보시면

이 상품을 3개 구매한 이벤트 전송 결과가

위 쪽의 유니버설 애널리틱스는

정확히 ₩1,370,100인데

 

구글 애널리틱스 4는 ₩1,371,151로

표시하는 상황을 보실 수 있습니다.

 

구글 애널리틱스 4가 보고하는 차액인

₩1,051은 어디서 왜 왔는지

저희도 아직은 잘 모르겠습니다.

 

이와 같은 여러 가지 현실적인 제약 때문에

구글 애널리틱스 4 개발팀의

의도대로 개선된 세상을

언제 경험할 수 있을지는

저희는 도저히 모르겠습니다.

 

6.

지금까지

구글 애널리틱스 4를 기준으로

유니버설 애널리틱스와 구글 애널리틱스 4의

다양한 이벤트/속성 명칭을 살펴봤습니다.

 

이미 말씀드렸듯이

구글 애널리틱스 4가 제시하는

방식이 다소 낯설고 어색하게 느껴지신다면

유니버설 애널리틱스의 구조를

명확하게 이해하지 못했을 가능성을

의심해 보셔야 합니다.

 

위에서 제시해 드린 표를 천천히 살펴보시면

구글 애널리틱스 4에서 변한 것은 주로

명칭일 뿐이라는 점을 쉽게 공감하실 것 같습니다.

 

최소한 이커머스 데이터 추적 관점에서

구글 애널리틱스 4는 오히려

유니버설 애널리틱스의 다소 산만했던

구조와 명칭이 좀 더 직관적으로 정리되었을 뿐입니다.

 

다음 포스팅에서는 본격적으로 

유니버설 애널리틱스와 구글 애널리틱스 4의

이커머스 데이터를 동시에 혹은 하나만 전송하기 위해

구현해야 하는 여러가지 사항을 살펴보겠습니다.

 

다음 포스팅 보러 가기

" ["document_srl"]=> int(19288) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20230403085234" ["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" } [30]=> object(stdClass)#437 (17) { ["title"]=> string(75) "구글 애널리틱스 4의 이벤트 측정 방식을 알아보세요. - 5" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20210912093430" ["readed_count"]=> int(863) ["content"]=> string(20956) "

이제 Google Analytics 4의

Custom event를 살펴볼 차례입니다.

 

만약

Recommended Events의 개념을

머리속으로 정확히 떠올리실 수 없다면

이전 포스팅을 확인하셔야 합니다.

 

이전 포스팅 보러 가기

 

Universal Analytics에 익숙한 개발자라면

Google Analytics 4의 event model이

더 불편하고 장황하다고 느끼실 수도 있습니다.

 

왜냐하면

Universal Analytics에서는

Google Analytics 4의 Custom event만

단순하게 제공했기 때문입니다.

 

저희가

Universal Analytics의 event model부터

장황한 논의를 시작한 이유도

 

결국 

Google Analytics 4의 event model이

Universal Analytics의 event model을

개선한 것이기 때문입니다.

 

현재 구글에서도

Google Analytics 4와 Universal Analytics를

병행하라고 권고하기 때문에

 

구버전과 신버전을 비교하여 이해하는 것이

각 GA 보고서를 정확하게 분석하기 위해

매우 중요합니다.

 

1. 드디어 Google Analytics 4의 Custom event의 시간!

 

여러분이 수집하고 싶은 이벤트를

아래의 세 가지 분류에서 찾을 수 없다면

마침내,

Google Analytics 4의 마지막 event 모델인

Custom Event를 살펴봐야 합니다.

 

이제서야 말씀드릴 수 있는 사실은,

Custom Events를 설정하는 방법은

Recommended Events 방법과

거의 동일하다는 것입니다.

 

Evnet Name을 여러분 뜻대로 정하는 것이

단 한가지 차이점입니다.

 

다르게 말하면,

Recommended Events와 Custom Events의

기술적인 차이는 전혀 없고

 

단지,

Google Analytics 4가 정해준 Evnet Name을 선택하면

Google Analytics 4가 Machine Learning 등의 첨단 기술로

여러분의 분석 혹은 예측 업무를 도와줄 것이라고

기대할 수 있다는 정도입니다.

 

예를 들어,

여러분의 사이트에 문의 신청 button을

클릭하는 event를 수집하고 싶다면

Event Name은 아래와 같을 수 있습니다.

GA4의 규칙만 준수하시면

그 외의 다른 이름도 얼마든지 가능합니다.

 

더하여,

단일 프로퍼티에서 최대 500개의 

Custome Event Name만 등록할 수 있습니다.

 

2. gtag API로 Google Analytics 4 Custom Events 구현하기

 

여러분의 GA4 기본 snippet code가 설치된 사이트에서

테스트 HTML 페이지를 생성하고

아래와 같은 코드를 작성합니다.

 

<a href="#" onclick="sendGa4Click();">GA4 CTA click custom event</a> <script>
function sendGa4Click()
{
    console.log('sv_custom_click link clicked');
    gtag('event', 'click', {
        click_text: 'sv_custom_click'
    });
}
</script>

 

위와 동일한 코드로 

본 페이지에 아래의 링크를 표시했습니다.

 

GA4 CTA click custom event

 

3. Google Analytics 4 DebugView에서 Custom Event 확인하기

 

이전 포스팅의 마지막에 다룬

Google Analytics 4 DebugView를 활성화하세요.

 

이 단계가 어색하시다면

아래의 포스팅에서 확인하실 수 있습니다.

 

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

 

Google Analytics 4 DebugView를 활성화한 후

위의 코드로 생성하신 링크를 클릭하면

아래와 같이 click이라는 이벤트가 나타납니다.

 

구글애널리틱스4_커스텀이벤트_실습_1.png

 

실시간 타임라인에 [click]으로 표시된 이벤트를 클릭하시면

아래의 화면과 같이

click_text: sv_custom_click 이라는 값이

위의 코드에서 구현한 대로 표시됩니다.

 

구글애널리틱스4_커스텀이벤트_실습_2.png

 

여기까지 완료하셨다면

Custom Events가 성공적으로 전송된 것이지만

Google Analytics 4의 Report > Engagement > Events

화면에는 아래와 같이 click 이라고만 표시됩니다.

 

구글애널리틱스4_커스텀이벤트_실습_3.png

 

왜냐하면 

아래의 코드와 같이

gtag('event', 'click', {params});

click 이라는 명칭의 custom event를 

전송했기 때문입니다.

 

하지만

보고서에서 보고 싶은 것은

click이라는 Custom Events 명칭보다는

 

click_text라는 값이 sv_custom_click인

Custom Events입니다.

 

이제 Custom Events를 직관적으로 

보고서에 표시하는 설정을 할 차레입니다.

 

4. Google Analytics 4 DebugView에서 Custom Event 확인하기

 

Google Analytics 4의 Configure 화면에서 

 

구글애널리틱스4_커스텀이벤트_실습_4.png

 

보고서에서 확인하려는 Custom Event를

아래와 같이 매치시켜 줘야 합니다.

 

Custom event name은

보고서에서 표시하는 이변트명입니다.

 

Matching Conditions 영역의

빨간 테두리로 표시된 입력값은

위의 JS 코드에서 입력한 값과 동일합니다.

 

구글애널리틱스4_커스텀이벤트_실습_5.png

 

쉽게 말해,

전송한 Custom Event를 잡아채서

sv_cta_clicked라는 명칭으로 전환하라는 명령입니다.

 

여기까지 성공적으로 완료하신 후

위에서 작성한 CTA 링크를 클릭하시고

Google Analytics 4의 Report > Realtime 화면으로 이동하면

click과 sv_cta_clicked Custom Events가 

동시에 표시되는 것을 확인하실 수 있습니다.

 

구글애널리틱스4_커스텀이벤트_실습_6.png

 

Custom Events가 성공적으로 전송된 다음 날부터

Google Analytics 4의 Report > Engagement > Events

화면에서도 sv_cta_clicked를 확인하실 수 있습니다.

 

5. Google Analytics 4 Conversion으로 확인하기

 

사실, 

Google Analytics 4의 Report > Engagement > Events

화면에는 이미 최소한

Automatically Collected Events와

Enhanced Measurement에 속한

여러 종류의 이벤트가 쌓이기 때문에

 

애써서 작성한 sv_cta_clicked를

확인하기 어려울 수도 있습니다.

 

그런 경우에는

아래의 그림과 같이

sv_cta_clicked라는 Custom Events를

Conversion으로 설정하면 

 

구글애널리틱스4_커스텀이벤트_실습_7.png

 

Google Analytics 4의 Report > Engagement > Conversions

화면에서 따로 확인할 수 있어서 더 편리합니다.

 

구글애널리틱스4_커스텀이벤트_실습_8.png

 

Google Analytics 4의 Conversion은

별도로 확인할 수 있는 Event 이상의 개념이지만

그 논의는 본 포스팅의 범위를

많이 벗어나기 때문에 일단 생략하겠습니다.

 

이제

Google Analytics 4의 Event Model을 모두 살펴봤습니다.

 

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

 

그런데 사실,

여기까지 오신 이유는

Google Analytics 4의 Ecommerce purchases 보고서를

작동시키기 위한 기초 정보를 이해하기 위해서 였습니다.

 

한숨 돌리신 후

Google Analytics 4의 Ecommerce 세팅의 세계로

모험을 시작하겠습니다.

 

조금만 더 힘을 내세요!

이제 정말 최종 목적지에 거의 다 왔습니다.

 

대부분의 온라인 마케팅 실무자분들께서

Google Analytics 4를 공부하는 이유는

Google Analytics 4의 Event Model을 

전문가 강사 수준으로 이해하고

누군가를 가르치시려는 목적이 아니고

 

Google Analytics 4를 이용해서

데이터 수집과 분석을 정확히 하고

본인의 업무 목적을 달성하기 위해서일 것입니다.

 

그렇기 때문에

Google Analytics 4의

Ecommerce 세팅까지 충분히 이해하셔야

Google Analytics 4를 이해했다고

말할 수 있습니다.

" ["document_srl"]=> int(19209) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20220314164704" ["comment_count"]=> int(0) ["trackback_count"]=> int(0) ["uploaded_count"]=> int(8) ["status"]=> string(6) "PUBLIC" ["title_bold"]=> string(1) "N" ["title_color"]=> string(1) "N" } [29]=> object(stdClass)#436 (17) { ["title"]=> string(75) "구글 애널리틱스 4의 이벤트 측정 방식을 알아보세요. - 4" ["nick_name"]=> string(16) "singleview.co.kr" ["regdate"]=> string(14) "20210904204403" ["readed_count"]=> int(1031) ["content"]=> string(39115) "

Universal Analytics는

session base의 Analytics였습니다.

 

하지만

Google Analytics 4는

event base의 Analytics로 변신했습니다.

 

그래서

Google Analytics 4를 이해하는 노력은

Google Analytics 4가 제공하는

다양한 기본 혹은 사용자 정의 이벤트를

이해하는 것과 거의 동일합니다.

 

오늘은 Google Analytics 4의

Recommended Events를 다루는 방법을

함께 알아 보겠습니다.

 

만약

Google Analytics 4의

Recommended Events와

Enhanced measurement의 차이를

정확히 설명하실 수 없다면

 

이전 포스팅을 한번 더

살펴보시는 것을 추천해 드립니다.

 

이전 포스팅 보러가기

 

1. Recommended Events는?

 

매우 쉽게 말해,

Google Analytics 4가

여러분이 따르기를 바라며

권고하는 이벤트 명칭 목록입니다.

 

그래서

Automatically collected events와

Enhanced measurement를 살펴봐도

여러분의 의도에 맞는 이벤트 이름과

파라미터 값을 찾을 수 없는 경우에는

 

바로 Custom events를 선택하시지 말고

Google Analytics 4가 제공하는

Recommended Events 목록을 살펴봐야 합니다.

 

알파벳 순서로 정렬된

간략한 이벤트 설명을 살펴보세요.

 

아래의 목록에서 여러분의 의도에 맞는

Recommended Events를 찾을 수 없는 경우에만

Custom Events를 사용하셔야 하기 때문입니다.

 

add_payment_info (결제 수단 정보를 입력함).

파라미터: coupon, currency, items, payment_type, value.

 

add_shipping_info (배송 정보를 입력함).

파라미터: coupon, currency, items, shipping_tier, value.

 

add_to_cart (상품을 장바구니에 넣음).

파라미터: currency, items, value.

 

add_to_wishlist (상품을 찜함).

파라미터: currency, items, value.

 

begin_checkout (결제 절차를 시작함).

파라미터: coupon, currency, items, value.

 

earn_virtual_currency (포인트, 코인, 점수 등의 가상화폐를 취득함).

파라미터: virtual_currency_name, value.

 

generate_lead (문의를 등록함).

파라미터: value, currency.

 

join_group (그룹 가입함).

파라미터: group_id.

 

level_end (게임의 특정 레벨을 완료함).

파라미터: level_name, success.

 

level_start (게임의 특정 레벨을 시작함).

파라미터: level_name.

 

level_up (게임의 특정 레벨로 승급함).

파라미터: character, level.

 

login (로그인함).

파라미터: method.

 

post_score (자신의 점수를 등록함).

파라미터: level, character, score.

 

purchase (상품을 구매함).

파라미터: affiliation, coupon, currency, items, transaction_id, shipping, tax, value.

 

refund (환불 요청함).

파라미터: affiliation, coupon, currency, items, transaction_id, shipping, tax, value.

 

remove_from_cart (장바구니에서 상품 삭제함).

파라미터: currency, items, value.

 

search (사이트내 검색 기능을 실행함).

파라미터: search_term.

 

select_content (컨텐츠를 선택함).

파라미터: content_type, item_id.

 

select_item (상품 카탈로그에서 상품을 선택함).

파라미터: items, item_list_name, item_list_id.

 

select_promotion (할인 프로모션을 선택함).

파라미터: items, promotion_id, promotion_name, creative_name, creative_slot, location_id.

 

share (컨텐츠를 공유함).

파라미터: content_type, item_id.

 

sign_up (회원 가입함).

파라미터: method.

 

spend_virtual_currency (포인트, 코인, 점수 등의 가상화폐를 사용함).

파라미터: item_name, virtual_currency_name, value.

 

tutorial_begin (온라인 교육 과정을 시작함).

파라미터 없음.

 

tutorial_complete (온라인 교육 과정을 종료함).

파라미터 없음.

 

unlock_achievement (특정 아이템을 취득함).

파라미터: achievement_id.

 

view_cart (장바구니 목록을 확인함).

파라미터: currency, items, value.

 

view_item (상품 상세 정보를 확인함).

파라미터: currency, items, value.

 

view_item_list (상품 카탈로그를 확인함).

파라미터: items, item_list_name, item_list_id.

 

view_promotion (프로모션 정보를 확인함).

파라미터: items, promotion_id, promotion_name, creative_name, creative_slot, location_id.

 

2. Google Analytics 4는 event base의 Analytics입니다.

 

본 포스팅의 시작 문장을 반복하는 이유는

이것이 Universal Analytics와 가장 큰 차이점이기 때문입니다.

 

쉽게 말해,

여러분의 의도에 가장 가까운 이벤트 정의를 먼저 찾도록

Google Analytics 4가 미리 준비해 놓은 목록에서

Recommend하는 것입니다.

 

예를 들어,

Universal Analytics에서

회원가입 이벤트를 추적하고 싶다면

여러분께서 아래의 ga()를 호출하고

Universal Analytics에서 전송한 문자열을

자유롭게 검색할 수 있습니다.

 

universal_analytics_events_model.png

 

Java Script만 능숙하게 다룰 수 있다면

매우 간단하고 직관적이죠.

 

ga('send', 'event', {

    'eventCategory': sEventCategory,   // Required.

    'eventAction': sEventAction,      // Required.

    'eventLabel': sEventLabel,

    'nonInteraction': boolean // true indicates that the event hit will not be used in bounce-rate calculation.

});

 

그러나 

Google Analytics 4에서는 1항에서 안내해 드린

Recommended Events 목록에서

여러분의 의도에 가장 가까운 이벤트 정의를 먼저 찾도록

Google Analytics 4가 Recommend하는 것입니다.

 

예를 들어,

Google Analytics 4에서

구매완료 이벤트를 추적하고 싶다면

 

Google Analytics 4에서 

Recommended Events를 활용하는 방법 중 하나는

아래와 같은 형식으로 gtag()를 호출하는 것입니다.

 

gtag('event', 'purchase', {

    currency: 'KRW',

    transaction_id: nOrderSrl,

    value: nRevenue,

    affiliation: _g_sAffiliation,

    coupon: sCoupon,

    shipping: nShippingCost,

    tax: nTaxAmnt,

    items: aProductInfo

});

 

위와 같은 방식으로 전송한 후에

Engagement -> Events 보고서를 확인하면

 

Automatically collected events와

Enhanced measurement와 같이

Recommended event가 표시됩니다.

 

GA4_recommended_events_table.png

 

Google Analytics 4의 데이터 모델이 매우 유연하기 때문에

여러분이 원한다면 예를 들어,

purchase라는 recommended 명칭을 무시하고

purchased 라는 명칭을 전송할 수도 있습니다.

 

하지만

Google Analytics 4는

자신들이 제공하는 Recommended Events 목록에서

여러분의 의도에 가장 가까운 이벤트 정의를 먼저 찾고

발견했다면 임의로 만들지 말고

Recommended Events를 사용하라고

Recommend하는 것입니다.

 

이제 

Recommended Events 라는 명칭의 의미를

정확하게 이해하셨을 것입니다.

 

구글 테크독을 읽어보면

이벤트 명칭을 Recommend하는 이유가

머신러닝 등에 활용하기 위해서라는데...

뭘 어떻게 활용할지는 아직 모호합니다.

 

참고로,

Google Tag Manager로 

Recommended Events를 구현하는 방법은

본 포스팅에서는 일단 생략하겠습니다.

 

3. Recommended events부터는 디버깅도구를 활용해야 합니다.

 

사이트에 기본적으로 전송되는

Automatically collected events와

Enhanced measurement가 매우 다양하고 많다면

 

Google Analytics 4의

이번에 처음 혹은 매우 가끔 전송되는

Recommended events는

여러가지 다양한 이유로 인해

Realtime 보고서에 누락될 수도 있기 때문입니다.

 

그래서

Google Analytics 4의

DebugView를 이해하시면

 

다음 포스팅에서 다룰 Custom event에서도

유용하게 활용하실 수 있습니다.

 

Google Analytics 4의 DebugView를 이용하려면

기본적으로 Chrome 브라우저와 

Chrome 확장 프로그램인

Google Analytics Debugger가 필요합니다.

 

Chrome 브라우저를 통해

아래의 페이지에 접근하시면 간단하게 설치할 수 있습니다.

 

Google_Analytics_Debugger_extension.png

 

크롬에서 Google Analytics Debugger 설치하러 가기

 

여러분의 크롬 브라우저에 설치하면

아래와 같이 상단의 태스크 바에

확장 프로그램 실행 아이콘이 표시됩니다.

 

확장 프로그램을 활성화한 후

 

Google_Analytics_Debugger_extension_activated.png

 

Google Analytics 4의 Recommended event를

trigger 하는 페이지에 접속해보세요.

 

event trigger가 잘 작동한다면

전송한 Recommended event가 실시간으로 표시됩니다.

 

해당 event를 클릭하면

함께 전송된 param 값도 자세하게 확인할 수 있습니다.

 

event trigger를 실행시켜도

DebugView에 표시되지 않으면

뭔가 잘못된 것이라는 증거입니다.

 

GA4_DebugView.png

 

DebugView의 타임라인을 보시면

EEC_Purchase_Order ID:20 과

EEC_Chceckout Stop2_setl o... 라는

지금까지 보셨던 적이 없는

event가 표시되어 있습니다.

 

이 독특한 명칭의 event가

바로 Custom events입니다.

 

본 연재의 시작인 아래의 포스팅에서 다루었던

 

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

 

Universal Analytics에서 아래와 같이 

ga()를 사용하여 전송한 user defined event와

기능적으로 가장 비슷한 event입니다.

 

ga('send', 'event', {

    'eventCategory': sEventCategory,   // Required.

    'eventAction': sEventAction,      // Required.

    'eventLabel': sEventLabel,

    'nonInteraction': boolean // true indicates that the event hit will not be used in bounce-rate calculation.

});

 

안타깝게도 동일하지는 않습니다.

 

다음 포스팅에서

Google Analytics 4의 Custom event를 자세히 알아보겠습니다.

 

Google Analytics 4의 event model을 이해하기 위해서

Universal Analytics의 event model부터

장황한 논의를 시작한 이유는

 

현재 구글에서도

Google Analytics 4와 Universal Analytics를

병행하라고 권고하기 때문입니다.

 

서로 완전히 다른 지표라면 차라리 안 헷갈리겠지만

조금씩 다른 지표들을 원리를 모르고 관찰하시면

지옥의 야근 주간을 맞이하실 수 밖에 없습니다.

 

어쨌든 이제 중반부를 넘어섰습니다.

 

조금만 더 힘을 내세요.

 

다음 포스팅 보러가기

" ["document_srl"]=> int(19115) ["module_srl"]=> int(160) ["category_srl"]=> int(0) ["lang_code"]=> string(2) "ko" ["member_srl"]=> int(4) ["last_update"]=> string(14) "20210913062904" ["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" } } ["page_navigation"]=> object(PageHandler)#457 (7) { ["total_count"]=> int(48) ["total_page"]=> int(3) ["cur_page"]=> string(1) "1" ["page_count"]=> int(3) ["first_page"]=> int(1) ["last_page"]=> int(3) ["point"]=> int(0) } }

신생 브랜드의 담당자 입장에서 알아야 하는 온라인 매체 특성 - 싱글뷰는 고객과 시장을 더 잘 이해하고 설득하게 도와드립니다. - 블로그 - 당신의 성장 파트너, 싱글뷰 실행 스튜디오

신생 브랜드의 담당자 입장에서 알아야 하는 온라인 매체 특성

by singleview.co.kr posted May 05, 2021
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

이전 포스팅에서는

온라인 브랜딩 자체의 정의와

온라인 브랜딩 성공의 정의를

아래의 도표와 함께 자세히 살펴보았습니다.

 

이전 포스팅 보러 가기

 

온라인_브랜딩_성공.jpg

 

온라인 브랜딩의 관점에서 구분할 수 있는 

온라인 매체는 여러 가지입니다.

 

또한,

모든 매체는 개별적으로 

매우 다양한 측면을 갖고 있습니다.

 

이러한 매체들을 계속 반복하여

조금씩 다른 내용을 언급하는 이유는

중언부언 횡설수설이 아니고

 

다면적인 특성을 가진 개별 매체들을

더 잘 이해하기 위해서는

매우 여러 가지 관점에서

살펴봐야 하기 때문입니다.

 

1.

신생 브랜드 담당자가 적은 예산을 관리하며

초기에 실행할 수 있는 매체는

크게 CPC와 바이럴로 나눠 볼 수 있습니다.

 

일단 Cost Per Click이라는

전통적이고 공식적인 광고 매체부터 살펴보겠습니다.

 

CPC에 관해 좀 더 자세히 알고 싶으시면

아래의 페이지를 살펴보실 수 있습니다.

 

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

 

CPC는 여러가지 합법적인 신고와 절차를 밟은

당당한 오프라인 매장으로 비유할 수 있습니다.

 

오프라인 매장의 입지를 결정할 때도

사람이 많이 다녀서 붐비는
핵심 상권은 임대료가 비쌉니다.

 

유동 인구가 거의 없는 외딴 지역이라면

임대료가 아무리 싸도

그저 임대료를 매월 탕진하는 것입니다.

 

똑같은 원리로 온라인 입지를 보실 수 있습니다.

 

네이버, 구글, 페이스북, 카카오가

사람이 많이 다녀서 붐비는 핵심 상권입니다.

 

위에서 말씀드린 매체의

광고 상품은 그래서 대부분 비쌉니다.

 

그래서

낯선 영업 사원이 소개시켜 준 후에야 알게된 매체는

대체로 나만 누릴 수 있는 절호의 특가 찬스가 아닙니다.

 

오프라인 매장으로 비유면

우선 유동 인구가 거의 없는

외딴 지역으로 구분하셔야 합니다.

 

광고 매체 영업 사원을 돌려보낸 후

혁신적인 신생 매체의 특가 찬스를

나만 누릴 수 있는 행운인지를 신중하게 살펴 보셔야 합니다.

 

2.

블로그 바이럴 캠페인은 한약으로 비유하면 비상같은 존재입니다.

 

그래서

잘 쓰면 명약이지만 부주의하게 사용하면 독약입니다.

 

여러가지_바이럴_매체.png

 

공식적이고 합법적인 CPC와 같은

온라인 유료 광고 매체의 가장 큰 장점은

 

오직

시스템 정책으로 운영되는

매체이기 때문에 입찰 관리만 잘하면 되고 

개별 광고에 매우 세밀하게 

추적 코드를 부여할 수 있다는 것입니다.

 

추적 코드는

신생 브랜드가 부족한 예산에도 불구하고

온라인 브랜딩을 더 높은 확률로 성공시키기 위해

매우 중요한 IT 도구이기 때문에

별도의 포스팅에서 매우 자세히 살펴보겠습니다.

 

하지만

공식적이고 합법적인 CPC와 같은

온라인 유료 광고 매체의 가장 큰 단점은

 

짤막한 배너 이미지나 광고 문구만을 표시할 수 있어서

제품의 특장점을 광고주가 원하는 만큼

풍부하게 표시할 수 없다는 특성입니다.

 

그래서

CPC에만 의존하면 고만고만한 상품군에서

부지불식간에 저가 경쟁에 내몰릴 수 있습니다.

 

그에 반해

공식적이고 합법적인지가 늘 애매한

블로그 바이럴 캠페인의 가장 큰 단점은

일반 소비자인지 블로거인지가 늘 애매한

개인=블로거와 복잡한 의사소통이 필요하고

개별 광고 소재에 매우 세밀하게 

추적 코드를 부여할 수 없다는 것입니다.

 

이러한 특성을 단순히 단점으로 이해하셔도 안됩니다.

 

왜냐하면

블로거의 의지와 감정에 따라 

제품의 특장점을 광고주가 예상했던 것보다 더

풍부하고 우호적으로 표시할 수도 있어서

제품과 브랜드의 차별성을 명확하게

이해시킬 수도 있는 특징도 분명하기 때문입니다.

 

3.

블로그 바이럴 홍보는 고위험 고수익으로 이해하셔야 합니다.

 

위험도의 기준에서만 두 매체를 살펴보면

CPC는 저위험 저수익으로 분류하시고

바이럴 캠페인은 고위험 고수익으로

구분하시는 것이 더 안전합니다.

 

그 이유는 아래와 같습니다.

 

CPC 캠페인은 광고주가 원한다면 언제든지

운영을 중지하고 비용을 통제할 수 있습니다.

 

하지만

블로그 등의 바이럴 캠페인은

애초에 상당한 금액을 선지급해야 일이 시작되고

광고주가 원할 때 중단하거나 개입하기도 매우 어렵습니다.

 

실제로

블로거와 개별 광고주가 계약 단계에서는

모호하게 좋은 말만 주고 받은 후에

실행 단계에 가서야 견해 차이를 발견하고 

감정적 갈등이 심각하게 발생할 수 있습니다.

 

하지만

절대로 요란한 뉴스만 보시고 

블로그 바이럴 매체를 부정적으로 단정지으시면 안됩니다.

 

다른 분들과 똑같은 비용을 받으신 블로거 분께서 

광고주의 기대와 예상을 넘어서

제품을 매우 세심하게 자발적으로 살펴본 후 

긍정적인 결론으로 마무리하셔서

블로그 바이럴 광고비의 수백배 수익률을 달성하는 경우도

블로그 바이럴 매체에 회의를 느낄만 하면 생기기 때문입니다.

 

바이럴_매체_고위험_고수익.png

이미지 출처

 

4.

바이럴 캠페인이 고위험인 또 다른 이유는 정량 평가가 어렵기 때문입니다.

 

매우 애를 써서 바이럴 캠페인을 집행해도

어떤 포스팅을 보고 광고주의 자사몰에 방문해서

구매했는지를 세밀하게 식별할 수 있는

추적 코드를 부여하기 어려운 경우가 많습니다.

 

저희가 온라인 매출 확대라는 주제를 거론하면서

추적 코드라는 개념이 매우 중요하다고 언급했던 이유입니다.

 

여러 가지 애매하고 부정적인 측면에도 불구하고

일반 잠재 고객들이 여전히 블로그를

상품 정보를 이해하기 위해 참고하는 경우가 많기 때문에

단기 혹은 직접 수익률 기준으로 바이럴 매체를 외면해서도 안됩니다.

 

그러나

바이럴 캠페인이 투자한 비용만큼

효과가 있었는지 확인할 방법은

시간이 갈수록 더 어렵고 복잡해지고 있습니다.

 

심지어는

블로그나 인스타그램 운영자가

추적 코드를 거부하는 경우도 많습니다.

 

신생 브랜드의 담당자가

이런 어려움에도 불구하고

블로그 바이럴 캠페인을 해야 한다면

어떻게 시작해야 할까요?

 

5.

시작도 결론도 바이럴 대행사와 블로거 분을 내 편으로 만드시는 것입니다.

 

마케팅은 결국 설득을 위한 의사 소통 기술입니다.

 

다른 브랜드의 홍보를 도와주기 위해서

블로그를 운영하시는 분도

블로그 편집창만 닫으면 일반 소비자입니다.

 

블로거_아르바이트.png

 

광고주 분들께서는 다른 업무로 바쁘시기 때문에

개별 블로거분에게 제품만 보내주면 알아서

잘 평가해 줄 것이라고 기대하실 수도 있습니다.

 

하지만

어떤 경우에도

돈을 주고 일을 시킨 단순 아르바이트라고 생각하시면 안됩니다.

 

실제로

아래와 같은 최소한의 설명을 제공하시는 것이

그러지 않으시는 것보다 훨씬 더

개별 블로그 분께서 우호적으로 느끼실 가능성이 높습니다.

 

내가 판매하는 제품의 특장점을

나보다 잘 아는 사람은 없기 때문입니다.

 

그래서

조금이라도 좋은 결과를 원하신다면

최소한 바이럴 대행사의 담당자가 제품의 특성을 쉽게 이해하고

개별 블로거 분들과 좀 더 정확히 의사소통하도록 노력하셔야 합니다.

 

바이럴_가이드라인.png

 

바이럴 대행사 사무실에서 몇 일 함께 지내보시면

바이럴 대행사의 직원들은 하루에도 수 많은 광고주와 제품을 들고

그 만큼 많은 수의 개별 블로거, 인플루언서들과 자질구레한 문제를

조율해야 하는 상황을 금새 이해하실 수 있습니다.

 

바쁜_광고_대행사_직원.jpg

Business 사진는 Racool_studio - kr.freepik.com가 제작함

 

위와 같이 복잡한 이유 때문에

광고 캠페인이 고품질로 개재되어서

구매 의도가 분명하고 구매 가능성이 높은 잠재 고객이

충분히 방문할 때까지, 그리고 한참 뒤까지

홍보 혹은 광고 매체가 갑이라고 생각해야 합니다.

 

시장에 대해 겸손한 태도는

전환율 개선 책임자만 특별히 갖춰야 하는 덕목이 아닙니다.

 

사실은

일반적인 홍보 업무의 책임자에게 필요한 기본 업무 역량입니다.

 

이와 관련되어 좀 더 자세한 정보가 궁금하시면

아래의 페이지를 살펴보실 수 있습니다.

 

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

 

다음 포스팅에서는

신생 브랜드가 온라인 브랜딩을 더 성공시키기 위해

블로그 바이럴 매체를 이용하여

잠재 고객에게 더 설득력이 높은

브랜드 메세지를 탐색하는 방법을 알아보겠습니다.

TAG •
위로 아래로 댓글로 가기 인쇄

Articles

1 2 3