2023. 7. 8. 15:26ㆍ데이터분석&마케팅/Google Analytics 4
안녕하세요~ totally 개발자입니다.
전자상거래 (E-Commerce)
구글 애널리틱스4는 기존 유니버셜 애널리틱스(Universal Analytics)와 비슷하게 전자상거래 보고서를 제공합니다. 또한 사용자 구매 여정이라는 메뉴가 있어 그 부분도 확인할 수 있어 많은 쇼핑몰에서는 구글 애널리틱스4 전자상거래를 설치하여 보고서를 확인 및 분석하고 있습니다. 전자상거래를 설치하기 위해서는 보통 개발자를 통해 설치해야 합니다. 그것은 주로 자바스크립트를 이용하여 설치하기 때문입니다. 구글 태그 관리자(Google Tag Manager)로도 설치할 수 있으며 이 경우에도 자바스크립트 코드가 들어가는 경우가 많습니다.
애널리틱스4 전자상거래를 설치할 수 있는 쇼핑몰은 카페24, 고도몰, 아임웹, 쇼피파이, 퍼스트몰, 그누보드, 워드프레스 WooCommerce, 식스샵, 메이크샵 등의 쇼핑몰 CMS, 또는 개발자를 통해 구축한 자사몰에 설치가 가능하며 네이버 스마트스토어 등 서드파티를 통해 구축된 쇼핑몰에서는 설치할 수 없습니다.
전자상거래의 설치는 아래와 같이 이루어집니다.
Step 1: GA4 전자상거래에서 필수적으로 구성되어야 하는 이벤트들은 view_item, add_to_cart, begin_checkout, purchase 4가지입니다. 물론 제일 중요한 purchase(구매)만 구축하여도 매출은 확인할 수 있지만 이탈률 등 세부 데이터는 확인이 되지 않습니다.
네이버페이, 카카오페이(결제시작 부분에서 선택하는 카카오페이는 제외)도 purchase에 포함되며 네이버나 카카오 서드파티로 넘어가기 때문에 온전한 추적은 불가능하지만 버튼을 클릭했을 때의 추적으로 대략적으로나마 추적이 가능합니다.
| view_item | 상품 상세페이지 조회 |
| add_to_cart | 장바구니 담기 |
| begin_checkout | 결제시작(구매시작) |
| purchase | 결제완료(구매완료) |
Step 2: 구축 방법을 선택하셔야 합니다. 자바스크립트(JavaScript)나 구글 태그 관리자(Google Tag Manager) 둘 중 하나를 선택하여 구축할 수 있습니다.
| 구현 방법 | 장/단점 |
| 자바스크립트(JavaScript) | 자바스크립트 코드로만 구성할 수 있으며 웹사이트가 변경되지 않는 한 한 번 코드를 잘 구현하여 넣으면 영구적으로 사용 가능합니다. 그러나 웹사이트 담당 개발자가 수시로 바뀌는 경우와 쇼핑몰이 자주 리뉴얼 되는 경우에는 권장하지 않습니다. |
| 구글 태그 관리자(Google Tag Manager) | 구글 태그 관리자의 추적 자바스크립트만 한 번 넣어두면 더 이상 웹사이트 자체의 코드를 수정하지 않아도 되는 장점이 있으며 단점은 구글 태그 관리자에 익숙해지는데 시간이 약간 소요될 수 있습니다. 하지만 개발자뿐만 아니라 마케터, 분석가 등 여러 직원들이 같이 관리할 수 있으며 웹사이트 코드를 직접 수정하지 않아도 되어 유지보수가 편리하고 문제가 생겼을 때 해당 부분을 즉시 중지할 수 있는 등 안정성이 보장되며 테스트할 때 미리보기 등으로 잘 되는지 체크도 해볼 수 있는 등 여러 편의 기능이 있어 권장드립니다. |
Step 3: 자바스크립트로 구현하는 경우입니다. 제가 포스팅으로는 구현 방법을 자세하게 설명할 수 없고 쇼핑몰마다 변수가 있고 다르기 때문에 획일화할 수 없는 점 양해 부탁드립니다. 담당 개발자분께서 아래 예제를 보시고 구현하셔야 하는 점을 미리 말씀드립니다.]
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag
view_item의 샘플 코드는 아래와 같습니다. 해당 부분을 적절한 변수로 변경하시면 됩니다. (중요한 항목 정도만 넣었습니다)
gtag("event", "view_item", {
currency: "KRW",
value: 10000,
items: [
{
item_id: "제품아이디넣어주세요",
item_name: "제품이름넣어주세요",
price: 10000,
quantity: 1
}
]
});
add_to_cart의 샘플 코드도 view_item과 비슷하며 begin_checkout인 경우에도 아래 add_to_cart를 begin_checkout으로 변경만 해주시면 됩니다.
gtag("event", "add_to_cart", {
currency: "KRW",
value: 10000,
items: [
{
item_id: "제품아이디넣어주세요",
item_name: "제품이름넣어주세요",
price: 10000,
quantity: 1
},
{
item_id: "제품아이디넣어주세요",
item_name: "제품이름넣어주세요",
price: 20000,
quantity: 1
}
]
});
제일 중요한 purchase도 몇 가지 항목만 넣고 마무리할 수 있습니다.
gtag("event", "purchase", {
currency: "KRW",
value: 10000,
transaction_id: "주문번호",
shipping: 2500,
tax: 100,
items: [
{
item_id: "제품아이디넣어주세요",
item_name: "제품이름넣어주세요",
price: 10000,
quantity: 1
},
{
item_id: "제품아이디넣어주세요",
item_name: "제품이름넣어주세요",
price: 20000,
quantity: 1
}
]
});
Step 4: 구글 태그 관리자(Google Tag Manager)로 구축하는 것을 권장하긴 하지만 처음에 사전 지식 없이 구축하기가 쉽지 않은 편입니다. 순서를 요약해서 말씀을 드립니다.
1) 구글 태그 관리자 설치: 구글 태그 관리자에 접속, 계정 생성하여 팝업되는 코드를 쇼핑몰 웹사이트 <head></head> 부분에 넣어주셔야 합니다.
2) 구글 태그 관리자에 태그, 변수, 트리거 생성: 애널리틱스4 전자상거래에 필요한 부분을 생성합니다.
3) 미리보기를 통해 테스트합니다.
4) 배포->게시를 통해 웹사이트에 반영합니다.
5) 하루 정도 기다리면 애널리틱스에 데이터가 반영됩니다.
물론 위는 순서일 뿐 순서만 보면 이해가 되지 않기 때문에 자세한 가이드는 아래를 참고하시기 바랍니다.
https://www.simoahava.com/analytics/google-analytics-4-ecommerce-guide-google-tag-manager/