데이터 레이어를 활용한 GA4 전자상거래 데이터 수집
데이터 레이어와 맞춤 이벤트로 구매 단계별 이벤트 수집하기
이전 글에서 데이터 레이어의 개념과 함께 스크립트가 어떻게 구성되어 있고 결과적으로 왜 써야 하는지에 대해 알려드렸습니다. 이번 글에서는 실제로 쇼핑몰에서 상품을 열람할 때 발생하는 이벤트 데이터를 데이터 레이어와 GTM 설정을 통해 직접 수집하는 과정을 보여드리겠습니다.
참고로 저는 제가 소유하고 있는 도메인이 카페24 임대형 쇼핑몰이라서 카페24에서 제공하는 상품 및 주문 관련 변수를 활용하였습니다. 동일한 플랫폼을 이용하지 않는 이상 각 쇼핑몰마다 변수명은 다를 것이므로 개발 담당자와 논의를 거쳐서 데이터 레이어를 설계하시면 되겠습니다.
혹시 이전 글을 읽어보지 않으셨다면 아래 글을 먼저 읽고, 이 글을 읽어주시면 감사하겠습니다.
우선 쇼핑몰에서 이벤트 트래킹 작업을 시작하기 전에 열어놔야 할 페이지가 있습니다. 아래에 있는 구글 애널리틱스 4 이벤트와 각 이벤트별 매개변수에 대한 설명이 나와 있는 문서인데요. 이게 왜 중요하냐면, 상품의 매개변수 이름을 잘못 입력하게 되면 데이터가 수집되지 않기 때문입니다. 예를 들어 상품의 카테고리 값을 수집할 때 'item_category' 변수에 카테고리 값을 수집해야 하는데, 변수명을 'item_category1'으로 정의하면 해당 카테고리 변수에 값을 넣어도 GA4에서 인식하지 못합니다. 특히 각 이벤트별 매개변수에 대해 여기보다 자세히 설명된 문서는 없으니 브라우저에 즐겨찾기 해두시면 좋아요.
상품조회 (view_item) 이벤트 수집하기
상품조회 이벤트를 수집하려면 우선 상품의 정보를 담기 위한 객체를 생성해야 됩니다. 일반적으로 상품의 정보를 담고 있는 변수명까지 알 필요는 없습니다. 이번 예시에서는 개발자의 도움 없이 혼자 트래킹을 수행한다는 가정 하에 상품정보에 해당하는 변수명과 그에 맞는 값이 매칭되는지 체크해보겠습니다.
상품상세 페이지에서 개발자 도구(F12)를 열고 콘솔(Console) Tab을 클릭한 뒤 상품코드, 상품명, 가격, 카테고리 번호에 해당하는 변수명을 입력하겠습니다. 값이 정상적으로 호출되네요.
일반적인 상황이라면 데이터 레이어에 담겨야 할 정보에 대해 개발 담당자를 대상으로 상세히 설명드리는 미팅을 갖고, 수집이 필요한 값들을 각각의 변수에 맞춰 데이터 레이어 안에 넣어달라고 요청하셔야 합니다. 화면에서는 상품 이름에 대한 변수명이 ‘product_name’이지만, 각 회사마다 상품 이름에 대한 변수명은 다를 것입니다.
이를테면 상품 이름 변수명이 ‘prod_name’ 일수도 있고 ‘p_name’ 일 가능성도 있습니다. 분석 담당자가 상품 DB를 직접 조회하지 않는 이상 상품 이름에 대한 변수명까지 알지는 못합니다. 따라서 개발자 분께 설명을 하면서 상품 관련 정보를 수집하는 상황이라면, 데이터 레이어의 각 변수 단위로 어떤 값이 호출되어야 하는지만 정확히 전달하시기 바랍니다. 그럼 GTM 설정으로 넘어가겠습니다.
GTM에서 변수(variable) 타입 중 맞춤 자바스크립트(Custom JavaScript) 유형을 선택하고 상품의 정보를 담는 함수를 생성합니다. 이 글에서 자바스크립트 문법을 구체적으로 말씀드리진 않겠습니다. GA4 이벤트 문서를 참고해서 상품 정보와 매칭되는 변수명과 그에 해당하는 값을 입력하고, 상품정보가 담긴 변수를 반환(return)합니다. 여기서 변수명에 명시된 'CJS'는 'Custom JavaScript'의 약자로, 변수 이름의 일관성을 지키고 변수 목록에서 다른 유형과 구분되게 하려고 이렇게 '네이밍 컨벤션'을 정의하였습니다.
'데이터 레이어' 스크립트 함수를 생성할 차례입니다. 원래 데이터 레이어 스크립트 함수는 개발팀에 요청해서 방문자의 특정 액션이 있을 때 소스 코드 상에서 호출되어야 하는 게 정석입니다. 하지만 저는 GTM 태그 중 '맞춤 HTML' 유형을 생성해서 소스 코드를 수정하지 않고 GTM으로 데이터 레이어 함수를 호출해보겠습니다. GA4 전자상거래 개발자 가이드 문서를 참고해서 데이터 레이어 스크립트를 설계합니다. 데이터 레이어 push가 발생할 때 이벤트(event) 변수가 먼저 나오고, 이후에 ecommerce 관련 이벤트 값들이 다음으로 배치되는 구조로 되어 있습니다.
데이터 레이어 안에는 'event, ecommerce' 변수가 있고 'ecommerce' 하위에는 'items, currency' 변수가 있습니다. items와 currency는 앞으로도 자주 사용될 예정이므로 변수로 생성해줍니다. GTM에서 한번 이상 재사용되는 값들은 무조건 변수로 만들어주는 게 좋습니다. 같은 일을 두 번 하지 않으려면 반드시 그렇게 해야 합니다.
데이터 레이어 변수 타입을 선택하고 데이터 레이어 변수 이름 필드에 'ecommerce.items'라고 입력합니다. 특정 변수의 하위 변수를 선택할 때에는 '.(마침표)'를 사용해서 원하는 값을 찾을 수 있습니다. 변수명을 'DLV'라고 명명한 이유는 'Data Layer Variable' 변수 유형의 앞글자만 딴 것이라고 이해하시면 됩니다.
이제 GTM 태그를 생성할 차례입니다. 태그명은 누가 봐도 어떤 내용으로 구성되었는지 알아볼 수 있게 정의합니다. 이벤트 이름을 'view_item'으로 입력하고, 이벤트 파라미터를 입력합니다. 그리고 앞에서 생성한 데이터 레이어 변수를 입력합니다. 이미 만들어진 변수를 호출할 때에는 중괄호를 두 번 '{{' 입력할 경우 선택 가능한 변수 목록이 뜹니다.
이제 변수가 실행되기 위한 트리거를 생성해야 합니다. 트리거 유형 중 맞춤 이벤트(Custom Event) 유형을 선택하고 이벤트 이름에 'view_item'을 넣어줍니다. 아까 데이터 레이어를 생성하면서 안에 'event : view_item'이라고 입력했기 때문에 dataLayer.push 함수가 정상 작동했다면 태그가 실행될 것입니다. 마찬가지로 트리거 이름 앞에 'CE'로 명명한 이유는 'Custom Event'의 앞글자를 딴 것입니다.
GTM 미리보기 모드를 켠 뒤 상품을 클릭해서 상품상세 페이지에 접속합니다. 미리보기 모드에 실행된 태그 목록을 보니 아까 생성했던 'GA4 - View item' 태그가 정상적으로 실행되었습니다. 좌측에 데이터 레이어가 실행된 순서를 보면 페이지가 열리고 'DOM(Document Object Model)'이 준비 상태가 된 후, 'view_item' 이벤트가 실행된 게 확인됩니다.
다시 말해, HTML의 각 요소(element)들에 대한 호출 준비가 완료된 이후 'view_item'이 실행되었다고 이해하시면 되겠습니다. 다음으로 데이터 레이어 안의 변수에 값이 제대로 들어왔는지 확인해보겠습니다. GTM 미리보기 모드 우측에서 Data Layer 탭을 클릭합니다.
'ecommerce' 하위에 item 관련 값들이 정상적으로 수집되었습니다. 이제 GA4로 가서 'debugView' 보고서에도 이벤트가 제대로 수집되었는지 확인할 차례입니다. GA4의 구성(Configure) 메뉴에서 debugView 보고서를 클릭합니다. 항상 GTM 미리보기 모드에서 값이 확인되었다고 컨테이너를 반영하지 마시고 GA debugView에서 데이터가 실시간으로 들어오는지 확인하는 습관을 기르시면 좋습니다.
실시간 debugView에서 확인해보니 'view_item' 이벤트와 그에 따른 매개변수가 확인됩니다. 다시 보니 'price' 매개변수 값에 '0'이 여러 개 붙은 게 보입니다. 이건 GA4의 버그입니다. 달러가 아닌 한국 원화로 설정할 때 나오는 오류로 보이는데 수정이 되었으면 좋겠네요. 나중에 GA 보고서에서 확인해보면 상품에 딸린 'price' 값이 정상적으로 잡히는 걸 확인할 수 있으실 겁니다.
GA debugView 보고서에서도 데이터에 이상이 없다면 작업한 GTM 컨테이너를 반영할 차례입니다. 반영할 때에는 어떤 작업이 있었는지 자세히 기술합니다. 그래야 나중에 다른 동료가 해당 히스토리를 확인할 때 빠르게 체크할 수 있습니다.
GTM에서 작업을 수행할 때에는 최대한 Workspace 단위로 작업을 진행하는 게 좋습니다. GTM 무료 버전에는 한 번에 최대 3개까지 Workspace를 생성할 수 있으며, 한 번에 여러 명이 동시에 GTM 안에서 태그 작업을 하더라도 구분된 Workspace는 독립적으로 운영됩니다. 이렇게 작업을 해야 추후 작업을 다시 되돌리는 경우에도 문제없이 깔끔하게 되돌릴 수 있습니다.
컨테이너 반영이 완료되면 '상품 상세' 페이지에서 상품을 조회했을 때, GA4 웹 스트림으로 'view_item' 이벤트와 그에 맞는 매개변수 값들이 수집됩니다. 굉장히 많은 단계에 걸쳐 데이터가 수집되지만, 이 과정을 반복하다 보면 GTM을 사용하지 않거나 dataLayer를 사용하지 않을 때와 비교해서 데이터 수집의 안정성을 높일 수 있고 훨씬 작업이 수월하다는 걸 느끼게 되실 겁니다. 나머지 전자상거래 이벤트들도 같은 방법으로 수집하면 됩니다. 데이터 레이어를 활용해서 GA 이벤트를 수집하는 과정을 6가지 단계에 따라 정리해보겠습니다.
1. 데이터 레이어에 담길 값들을 별도의 문서에 정의합니다. 이를 측정 전략 문서라고 부릅니다. 엑셀이 아니라 다른 동료와 협업이 수월한 구글 시트에 정리하는 걸 권장드려요. 데이터 레이어는 최대한 depth 구조를 띠는 게 보기에도 좋고, 나중에 GTM으로 해당 데이터를 변수로 불러오기도 수월합니다.
예를 들어 글로벌 서비스의 경우 데이터 레이어를 설계할 때 'site'라는 카테고리 안에 country, language와 같은 변수를 담을 수 있습니다. 'site'가 1 depth, 'country' 및 'language'가 2 depth 입니다. 데이터 레이어를 호출할 때에는 'site.country', 'site.language' 이렇게 호출하면 됩니다.
2. 정의된 문서에 기반하여 데이터 레이어를 GA4 개발자 가이드를 보고 설계한 뒤, 이를 개발팀에 전달하고 반드시 리뷰하는 자리를 갖습니다. 개발팀 입장에서는 데이터 레이어 자체를 처음보는 경우도 있을 수 있고 각 변수가 어떤 의미인지 모르기 때문에 친절한 리뷰는 결과적으로 작업 시간과 불필요한 커뮤니케이션 시간을 획기적으로 줄여줍니다. 대부분의 커뮤니케이션 오류는 내가 알고 있는 걸 상대방이 다르게 알고 있을 때 발생합니다.
3. 개발팀에서 데이터 레이어를 웹사이트에 반영하면, 요청자는 브라우저 개발자 콘솔에서 dataLayer 명령어를 입력해서 변수와 값을 직접 확인해보거나, GTM 미리보기 모드에서 이벤트 및 각 변수의 값들이 정상적으로 적용되었는지 확인합니다. 이때, 제대로 작업이 되지 않았다면 개발팀에 정중히 수정을 요청합니다.
4. 데이터 레이어가 정상 반영되었다면, GTM에서 '태그/트리거/변수'를 '네이밍 컨벤션'에 따라 정의하고, 각 구성에 맞는 설정을 진행합니다. 여기서 중요한 건 내부적으로 정한 네이밍 규칙을 따르는 것입니다. 한 번 네이밍 규칙이 망가지게 되면, 그 이후는 보지 않아도 뻔합니다. 데이터를 관리하는 팀에서 먼저 솔선수범 할 필요가 있고, 동료가 잘못하고 있으면 피드백을 줘서 바로 잡아야 합니다. 처음에 제대로 잡히고 습관이 되면 나중이 편합니다.
5. GTM 설정이 완료되면 GTM 미리보기 모드에서 값이 정상적으로 수집되는지 1차 데이터 QA를 진행하고, GA4 debugView에서 2차 데이터 QA를 진행합니다.
6. 데이터 QA 과정에서 이상이 없다면 GTM 컨테이너를 반영하는데, 이때 어떤 작업을 수행했는지 제목 만이라도 최대한 명료하게 기입합니다.
주문완료 데이터를 수집하는 과정도 위에서 말씀드린 6가지 단계에 걸쳐 작업을 수행하시면 됩니다. 데이터를 기획하고 설계하고 개발팀과 커뮤니케이션을 하고, GTM 설정 작업을 거쳐 데이터 QA까지 진행하는 건 굉장한 피로와 섬세함을 요구합니다. 하나의 데이터가 수집되는 과정은 이렇게 복잡하고 리소스가 많이 들기 때문에, 계속 강조드리지만 필요한 데이터만 분석의 우선순위에 의거해서 수집되어야 합니다.
지금까지 데이터 레이어를 통해 GA4 전자상거래 이벤트 데이터를 수집하는 과정과 주의사항에 대해 설명드렸습니다. 생각보다 만만하지 않은 작업이지만, 가장 안전하고 추후 운영에 대한 리소스가 적게 드는 방법입니다. 데이터를 수집하는 과정에서 데이터 레이어를 무조건 사용하시기 바랍니다.
모든 데이터를 기본적으로 데이터 레이어를 사용해서 수집한다는 원칙 아래, 개발팀의 리소스가 너무 부족하거나 간단히 내 손에서 자바스크립트를 함수를 짜서 해결할 수 있는 경우에만 예외로 두시길 바랍니다. 아무래도 기술적인 내용이 섞여있다보니 이전에 썼던 다른 글과는 다르게 익숙하지 않은 단어를 많이 사용하였습니다. 궁금하신 점이 있다면 댓글로 질문주세요. 긴 글 읽어주셔서 감사합니다.
입문자를 위한 GA4 온라인 강의를 출시했어요! 기초부터 실무에 유용한 팁까지 이론과 실습을 포함해서 전반적으로 학습하고 싶으신 분들은 아래 링크를 통해 온라인 강의를 수강해보세요 :)
구글 애널리틱스 4 온라인 강의 보러 가기
저의 두번째 책인 '구글 애널리틱스 4 실전 활용법'이 출간되었습니다. GA4를 이제 막 학습하시는 분들이나 현업에서 실전 활용이나 세팅을 어떻게 해야 할지 고민이 많으시다면 구매하시길 적극 추천드립니다. 제가 실제 GA4 프로젝트를 진행하면서 겪었던 노하우와 팁을 책에 담았어요.
'구글 애널리틱스 4 실전 활용법' 구매하러 가기
구글 애널리틱스 4 인증 시험을 통해 자격증을 취득하고 싶으시다면 아래 링크를 클릭해보세요
