(3) GPT로 GA4 전자상거래 설정하기
GTM으로 'view_item' 이벤트 삽입하기
"구매 전환 추적? 일단 개발자부터 부르시죠."
많은 마케터가 데이터 드리븐을 위해 구글 애널리틱스4를 활용하고 있지만, 구매전환을 추적하기 위한 전자상거래 설정에 어려움을 겪고 있습니다. 대부분의 마케터는 개발 지식이 전혀 없는 상태로 커리어를 시작하는 데 반해, 전자상거래는 불러와야 할 데이터 레이어와 변수가 너무나 많기 때문이죠.
때문에 GA4 전자상거래 이벤트를 설정하기 위해서는 일정 수준의 개발 지식과 HTML, 자바스크립트 코딩이 필요했습니다. 그래서 마케터가 GA4에서 전자상거래 이벤트를 수집하려면 '(1)코딩을 배운다 (2)프리랜서에게 의뢰한다 (3)개발자를 찾아간다' 세 가지 방법뿐이었는데요.
요즘 크몽에 의뢰하면 약 10만 원 선으로 설치할 수 있습니다GPT가 코딩의 천재(?)라는 것이 밝혀진 지금. 우리는 전자상거래의 구조만 알아두면, 복잡하고 어려운 코딩은 GPT에게 던지고 전자상거래 이벤트를 설정할 수 있는 시대가 되었습니다.
이번 글은 아래의 내용을 담고 있습니다.
전자상거래의 이벤트 종류와 데이터 구조
view_item 데이터 레이어 만들기
GPT로 자바스크립트 변수 만들기
view_item데이터 이벤트 호출하기
데이터 구조 및 개요
(1) 이벤트 종류
GA4에서 구매전환을 추적하기 위해 가장 많이 사용하는 전자상거래 이벤트는 'view_item', 'add_to_cart', 'begin_cheakout', 'purchase'까지 총 네 가지가 있습니다. 물론 대부분의 마케터는 'purchase'를 가장 중요하게 다루지만, 구매에 이르기까지 다양한 데이터를 점검할 때 유용하게 활용할 수 있어 꼭 전부 설치해 두시는 것을 권장드립니다(어차피 purchase를 설정하기 위해서는 각 이벤트 프로세스를 모두 거칩니다).
(2) 데이터 구조
GTM에서 1개의 태그로 1개의 이벤트를 발생시키는 기존의 구조와 달리, 전자상거래는 하나의 이벤트 당 두 개의 태그가 필요합니다. 예를 들어 'view_item(상품조회)'이라는 이벤트는 하나지만, 해당 이벤트에 들어가야 하는 변수는 '상품명, 상품코드, 가격' 등 다양한 요소이기 때문인데요.
하나의 이벤트에 많은 변수를 담아야 하기 때문에 '데이터를 구조화하는 태그(데이터 레이어)'가 필요하고, 이렇게 구조화된 데이터에 따라 '데이터를 호출하는 태그(이벤트)'가 필요합니다.
데이터 레이어 태그 : 다양한 상품 정보를 선택하고, 상품에 따라 값을 변수로 적재하는 태그
데이터 호출 태그 : 데이터 레이어에 적재된 변수를 GA4 이벤트로 호출하는 태그
따라서 이번 글에서는 view_item 이벤트의 '데이터 레이어' 태그/트리거, '이벤트 호출' 태그/트리거까지 총 2개의 태그와 2개의 트리거를 설정합니다.
데이터 구조 살펴보기
(1) 데이터 레이어 태그
비개발자 마케터의 영원한 친구인 GTM에서 태그를 만들어줍니다. 클릭 이벤트가 아니라, 데이터를 적재하는 역할을 수행하는 태그이기 때문에 [맞춤 HTML] 유형을 선택해야 합니다. 이제 이 광활한 코드 작성란에 상세페이지를 조회(view_item)할 때 어떤 데이터를 불러와야 하는지 정의할 예정입니다.
태그 - 새로 만들기 - 태그 유형 : 맞춤 HTML
태그명 : [데이터레이어] view_item
(2) 구글 예시 사이트 접속하기
티셔츠 우측에 있는 ' i ' 버튼을 클릭해 주세요.코드를 작성하려면, 우선 GA4에서 어떤 구조로 데이터를 적재하는지 알아야겠죠? 아래 링크의 구글 전자상거래 예시 사이트에 접속하여 전자상거래에 필요한 HTML 코드를 알아보겠습니다.
https://enhancedecommerce.appspot.com/item/b55da
티셔츠 정보 버튼을 누르면 팝업이 나타나는데, 우리는 구글 태글 매니저를 활용할 예정이기 때문에 'Google Tag Manager Code (GA4)' 탭을 클릭해 줍니다.
스크롤을 내리다 보면, 우리가 찾던 view_item 코드가 입력된 영역을 발견할 수 있습니다. 해당 코드의 위/아래 영역은 '상품목록'과 '프로모션' 코드이기 때문에 제외하고, 우리에게 필요한 "view_item" 데이터 레이어만 가져올 겁니다. 해당 영역을 드래그하여 통째로 복사해 주세요.
(3) 맞춤 HTML 구성요소
HTML은 우리가 활용하려는 코드의 위/아래에 명령어를 삽입하여, 해당 단락이 어떤 역할인지 지정해야 합니다. 복사한 코드 위/아래로 <script>, </script> 명령어를 삽입해 주세요. 복사한 내용 중 브랜드와 카테고리, 인덱스는 필수 요소가 아니기 때문에 삭제하겠습니다. 만약 해당 정보가 꼭 필요한 플랫폼사나 다양한 SKU를 다루고 있다면, 함께 설정해 주세요.
(4) 변수 확인
데이터 레이어 태그의 최종 구조위 이미지에서, 노란색 밑줄 친 영역을 살펴보면 상수로 입력되어 있다는 걸 알 수 있습니다. 제품의 코드(item_id)와 이름(item_name), 가격(price)은 우리 자사몰의 제품에 맞는 정보로 적재해야겠죠? 통화(currency)는 'KRW'를 고정값으로 입력해도 되지만, 우선 변수로 설정하겠습니다.
여기까지 GA4 전자상거래 예시 페이지에서 데이터 레이어 태그를 가져왔고, 우리에게 필요한 변수값이 '제품 ID', '제품명', '가격', '통화' 4가지라는 것을 확인했습니다. 해당 변수를 먼저 설정하기 위해, 잠시 태그 생성을 중단하고 변수를 먼저 설정하겠습니다. 태그 만들기 창을 닫아주세요.
GPT로 변수 만들기
(1) 변수 영역 확인하기
이니스프리의 상세페이지 조회 예시이니스프리에서 제품 상세페이지에 들어가면 다음과 같은 화면이 나옵니다. 기존의 페이지뷰(page_view) 이벤트가 이러한 정보를 전부 다 취합하여 '1회 조회'로 카운팅 했다면, 전자상거래 이벤트인 view_item은 "상품 id가 '34510'이고, 가격이 21,600원인 '그린티 씨드 히알루론산 크림 50mL' 제품을 조회했구나"라고 판단하게 만들어주는 과정입니다.
상품 A와 상품 B를 조회할 때 URL의 맨 마지막 부분의 숫자가 다르다면, 해당 숫자가 상품의 id일 가능성이 매우 높습니다. 상품 id는 대부분 URL에 기재되어 있으므로, 꼭 확인해 주세요.
(2) item_id 변수 만들기
먼저 사용자가 제품의 상세페이지를 조회했을 때, 해당 제품의 ID 값을 불러오는 'item_id' 변수를 생성하겠습니다. GTM에서 변수를 설정하기 위해 사용자 정의 변수 만들기를 클릭해 주세요.
페이지가 바뀔 때마다, 알맞은 변수값을 불러오기 위해 변수 유형은 '맞춤 자바스크립트'로 설정합니다. 아까 태그 만들 때의 HTML과 유사하죠? 차이점이 있다면 태그는 GA4에서 제공하는 예시 페이지의 코드를 붙여 넣으면 되지만, 변수를 설정하기 위한 자바스크립트는 직접 생성해야 한다는 점입니다.
변수명 : view_item - item_id
변수 유형 : 맞춤 자바스크립트
자바스크립트를 모르는 데 어떡하냐고요? 걱정하지 마세요. 우리에겐 GPT가 있잖아요.
▼ GPT에게 아래의 프롬프트를 입력합니다. 붉은색 글씨를 본인의 상품에 맞게 변경하면 됩니다.
---------------------------
구글 태그 매니저(GTM)에서 GA4 전자상거래를 설정하기 위해 맞춤 자바스크립트 변수를 만들고 있다.
view_item 태그에서 "item_id" 변수를 호출하기 위해, 아래의 URL에서 "item_id" 변수를 추출하는 맞춤 자바스크립트 변수를 작성하라. 해당 URL에서 "item_id"의 값은 '34510'이다.
https://www.innisfree.com/kr/ko/ProductView.do?prdSeq=34510
--------------------------
GPT가 코드를 잘 만들어줬다면, 해당 코드를 고스란히 복사해서 붙여 넣고 저장하면 됩니다. 쉽죠?
(3) item_name 변수 만들기
다음으로 상품명을 불러오는 변수를 만들어보겠습니다. 상품 id는 URL에 표기되어 있기 때문에 구분하기가 매우 쉬웠으나, 상품명은 상세페이지 안에 텍스트 영역으로 있어서 해당 영역을 어떻게 구분하는지를 찾는 게 우선입니다.
변수 - 사용자 정의 변수 - 새로 만들기
변수명 : view_item - item_name
변수 유형 : 맞춤 자바스크립트
상세페이지에서 F12를 눌러 개발자도구를 켜주세요. 개발자도구 상단 좌측에 있는 화살표 모양을 클릭하면, 웹페이지의 영역이 어떤 코드로 구성되어 있는지 확인할 수 있습니다. 해당 기능으로 상세페이지에서 제품명이 입력되어 있는 부분을 클릭해 주세요.
제품명을 클릭한 상태에서 F2를 누르면 편집(이름 바꾸기)이 가능합니다. 혹은 제품명이 입력된 영역을 우클릭하여 'Edit as HTML'를 선택하면 동일하게 편집할 수 있습니다. 이렇게 편집 가능한 텍스트 영역을 전부 복사해 주세요(Ctrl + A → Ctrl + C).
▼ GPT에게 아래의 프롬프트를 입력합니다. 붉은색 글씨를 본인의 상품에 맞게 변경하면 됩니다.
---------------------------
구글 태그 매니저(GTM)에서 GA4 전자상거래를 설정하기 위해 맞춤 자바스크립트 변수를 만들고 있다.
view_item 태그에서 "item_name" 변수를 호출하기 위해, 아래의 태그에서 "item_name" 변수를 추출하는 맞춤 자바스크립트 변수를 작성하라. 해당 태그에서 "item_name"의 값은 '그린티 씨드 히알루론산 크림 50mL'이다.
<h2 class="pdtName">
<span class="topTxt"></span>
<strong>BEST</strong>
그린티 씨드 히알루론산 크림 50mL
</h2>
--------------------------
GPT가 작성한 코드를 item_name 변수 만들기에 그대로 붙여 넣고 저장합니다.
(3) price 변수 만들기
세 번째 변수인 price를 만들어보겠습니다.
변수 - 사용자 정의 변수 - 새로 만들기
변수명 : view_item - price
변수 유형 : 맞춤 자바스크립트
상세페이지에서 F12를 눌러, 위 item_name과 동일한 방법으로 가격 영역을 찾아주세요. 단, 주의할 점이 있습니다. 위 이미지에서 가격을 클릭하고 나온 영역은 <span class="num" id='totSum">21,600</span>인데, 해당 값은 바로 위의 <div class='price'>라는 값에 포함되어 있는 값이죠?
gpt에게 HTML elements를 물어볼 때는 항상 상위의 속성으로 물어봐야 합니다. 위 예시 이미지의 경우에서 <span class="num"...>이라는 데이터에 <div class="price">라는 상위 속성이 있으므로, 해당 elements 정보를 받아와야 하는 상황이죠. 해당 속성에서 F2 또는 우클릭 후 Edit as HTML를 선택하여 가격 정보가 포함된 속성의 전체 값을 복사합니다.
▼ GPT에게 아래의 프롬프트를 입력합니다. 붉은색 글씨를 본인의 상품에 맞게 변경하면 됩니다.
---------------------------
구글 태그 매니저(GTM)에서 GA4 전자상거래를 설정하기 위해 맞춤 자바스크립트 변수를 만들고 있다.
view_item 태그에서 "price" 변수를 호출하기 위해, 아래의 태그에서 "price" 변수를 추출하는 맞춤 자바스크립트 변수를 작성하라. 해당 태그에서 "price"의 값은 '21,600'이다. 단, 맞춤 자바스크립트에는 숫자만 입력하기 위해 "," 기호를 삭제하고 '21600'으로 입력한다.
<div class="price"><span class="num" id="totSum">21,600</span>원</div>
--------------------------
여기서도 주의할 점이 있는데, 데이터 레이어 태그를 적재할 때는 '21,600'이 아닌 '21600'으로 숫자만 포함되어야 합니다. 꼭 , 기호를 삭제하라는 프롬프트를 포함해 주세요.
아까 생성하던 price 변수에 그대로 붙여 넣고 저장을 누릅니다.
(4) currency 변수 만들기
currency는 '달러, 바트, 불, 원' 등 통화 단위를 불러오는 변수입니다. 그러나 대부분의 국내 이커머스는 한 홈페이지에서 국내 대상 판매만 진행하기 때문에, 대부분 KRW일 텐데요. 만약 해외 판매를 고려하고 있지 않다면, 위와 같이 변수 유형을 '상수'로 설정하여 값에 'KRW'를 그대로 입력하면 됩니다.
변수 - 사용자 정의 변수 - 새로 만들기
변수명 : view_item - currency
변수 유형 : 상수
값 : KRW
이렇게 item_view 태그에서 필요한 4가지 변수의 설정이 모두 끝났습니다.
데이터 레이어 태그 만들기
(1) view_item 태그 생성하기
다시 태그 만들기 영역으로 돌아가볼까요? 아까 데이터 레이어 태그를 살펴볼 때, 변수로 입력해야 하는 부분을 모두 지우면 위와 같은 상태가 됩니다. 이제 노란색 밑줄 친 부분에 지금까지 생성한 변수를 입력할 차례입니다.
GA4 예시 코드 맞춤 HTML에 붙여 넣기
위아래 <script>, </script> 붙여 넣기
item_brand, item_category, intex 삭제
(2) 변수 집어넣기
지금까지 생성한 변수를 태그에 집어넣겠습니다. 대괄호( { )를 두 번 입력하면 변수를 입력할 수 있는 드롭박스가 나타나는데요. 각 영역에 맞는 변수를 집어넣으면 됩니다. item_id에는 item_id 변수를, price에는 price 변수를 집어넣는 식입니다.
기존 예시 코드에서 변수 영역을 지울 때, 각 변수를 구분하는 콤마( , )를 함께 지우지 않도록 주의해 주세요. 각 변수와 값은 콤마( , )를 기준으로 구분됩니다.
(4) 데이터 레이어 트리거 만들기
데이터 레이어 태그를 만들었다면, '이 태그가 언제 발동되는지'를 트리거로 정의해야 합니다. 변수를 삽입한 태그 화면 하단의 트리거 영역을 클릭하여, 이 태그가 언제 실행되는지를 정의하겠습니다.
view_item은 '상세페이지 조회' 이벤트입니다. 따라서 상세페이지가 켜질 때 해당 태그가 실행되면 문제없이 작동할 것 같습니다. 예시로 활용하고 있는 이니스프리 페이지를 볼까요? URL의 맨 끝에 있는 prdSeq=34510가 제품 ID(제품코드)인 반면, 그 바로 앞의 ProductView.do 값은 카테고리 영역입니다. 이니스프리는 item_view 이벤트를 수집하기 위해 URL도 'Productview'라고 설정해 둔 것 같네요.
만약 제품이 바뀌더라도 '34510'이라는 제품의 코드는 바뀌지만, Productview라는 URL값은 바뀌지 않을 거예요. 그러므로 우리는 URL에 'ProductView.do'라는 값이 있을 때 = 상세페이지를 조회할 때라고 정의할 수 있습니다.
상세페이지를 조회하는 조건을 알고 있다면, 트리거 설정은 매우 쉬운 작업입니다. '페이지뷰' 액션이 발생할 때, Page URL에 'ProductView.do'라는 값이 포함되어 있다면 태그가 실행될 수 있도록 트리거를 설정합니다.
트리거명 : view_item - trigger
유형 : 페이지뷰(일부 페이지뷰)
조건 : Page URL-포함-카테고리 URL
데이터 레이어 태그의 최종 모습입니다. 아래와 같은 순서로 작성되었네요.
(1) GA4 전자상거래 예시 페이지에서 'view_item' 스크립트를 긁어온다
(2) 상세페이지에서 값을 가져오도록 item_id, item_name, price, currency를 변수로 설정한다.
(3) URL에 카테고리 속성이 있을 때, 페이지뷰 이벤트가 발생하면 태그가 실행되도록 트리거를 설정한다.
이제 GA4에 데이터 레이어를 적재(push)할 수 있게 되었습니다. 이벤트 태그를 통해 적재된 데이터를 GA4에서 불러올 수 있도록 이벤트 태그를 설정하기만 하면 됩니다.
view_item 이벤트 호출하기
(1) 데이터 호출 변수 만들기
지금까지 만든 태그를 살펴볼까요? 위 데이터의 구조는 3개의 단계로 이루어져 있습니다.
① dateLayer.push라는 집합은 view_item이라는 "event"와 "ecommerce", 그리고 "currency"라는 세 개의 하위 속성으로 이루어져 있습니다.
② ecommerce라는 집합은 "items"라는 한 개의 하위 속성으로 구성되어 있습니다.
② items라는 집합은 "item_id", "item_name", "price"라는 세 개의 하위 속성으로 구성되어 있습니다.
즉, GA4로 발송하는 view_item이라는 이벤트에서 상품코드, 상품명, 가격을 불러오기 위해서는 ecommerce라는 집합 안에 있는 items라는 속성을 불러와야 합니다. items를 호출해야 밑의 id, name, price가 따라오기 때문이죠.
items를 호출하는 변수를 추가로 생성해 줍니다. 'ecommerce.items'는 "데이터영역 변수에서 ecommerce 안에 있는 items 속성"이라는 뜻입니다.
변수 - 사용자 정의 변수 - 새로 만들기
변수명 : 상품정보
데이터영역 : ecommerce.itmes
버전 : 버전2
* 동일한 방법으로 ecommerce.currency(통화)도 만들어줍니다.
(2) GA4 전자상거래 이벤트 태그 만들기
view_item 이벤트를 수집하기 위해 기나 긴 여행을 거쳐왔습니다. 주의할 부분은 '이벤트 매개변수' 란인데요, 이벤트 매개변수 란에는 items를 입력하고(currency는 선택사항) 값에 방금 위에서 만들었던 데이터영역 변수인 ecommerce.items 변수를 넣어줍니다.
태그 - 새로 만들기 - Google 애널리틱스: GA4 이벤트
태그명 : [전자상거래] view_item
이벤트 이름 : view_item
이벤트 매개변수① : items / {{상품정보}}
이벤트 매개변수② : currency / {{통화}}
(3) GA4 이벤트 트리거 만들기
GA4 이벤트 트리거는 간략히 view_item 이벤트가 실행되는 시점을 트리거로 설정하면 됩니다.
트리거명 : [전자상거래] view_item - trigger
이벤트 이름 : view_item
실행 조건 : 모든 맞춤 이벤트
이어 저장을 누르면 view_item GA4 전자상거래 이벤트 설정이 종료됩니다.
(4) 미리보기로 잘 적용되었는지 확인하기
구글 태그 매니저에서 미리보기를 활성화 한 뒤, 제품 상세페이지에 들어가 봅니다. 올바르게 설정되었는지 교차 검증하려면 반드시 두 개 이상의 상세페이지에서 각기 다른 변수값이 잘 호출되었는지 꼭 확인해야 해요. 상세페이지에 접속한 이후 'Tags Fired' 영역에 설정했던 GA4 view_item 이벤트 태그가 올라간다면 정상적으로 설치된 것입니다.
이어서 변수값을 제대로 호출하는지 확인하기 위해 GTM 미리보기의 좌측 타임라인에서 상세페이지를 클릭했던 시점을 누른 뒤, Variables 탭을 누르면 해당 이벤트에서 발생했던 모든 속성을 확인할 수 있습니다.
Variables 탭을 조금만 내려보면, 설정했던 태그 목록을 확인할 수 있습니다. 변수값을 제대로 호출하는지 꼭 2개 이상의 페이지를 확인해 주세요.
마치며
전자상거래는 사실 옛날에야 설치비용만 30~60만원 정도의 시세(?)였으나, 최근에는 10만 원 안팎으로 내려가며(더 내려갈지도?) 비교적 간편하게 설치할 수 있게 되었습니다. 때문에 효율상으로만 따지면 이렇게 열심히 전자상거래 공부를 하며 직접 설치할 바에, 그냥 10만원 내고 설치 대행을 의뢰하는 게 훨씬 효율적일 수 있어요.
그러나 GTM은 마케터와 뗄래야 뗄 수 없는 관계인만큼, 적어도 어떠한 프로세스로 이벤트가 설정되는지 안다는 것은 중요한 무기가 될 수 있다 생각합니다. 또한, 개발 관련 지식이 GPT로 인해 접근성이 크게 향상된 점도 매우 고무적이어서 직접 해보며 감을 익히는 것도 분명 마케터의 중요한 자산이라 믿습니다.
지금 당장 급한 프로젝트가 없다면, 간단한 view_item 이벤트부터 차근차근 하나씩 스터디하며 GTM과 좀 더 친해져 보는 건 어떨까요?
