앞선 포스팅에서 구글애널리틱스의 전자상거래 분석 및 데이터수집과정을 다뤄봤습니다.
구글 웹로그분석 전자상거래: 데이터 처리과정
그럼 이제, 본격적인 코드작업에 앞서 관리모드에서 관리 – 전자상거래 설정 – 전자상거래 사용설정 ON – 다음단계 – 제출 버튼을 차례로 눌러서 전자상거래를 활성화시킵니다.
Q: 여기서 잠깐, 아래 보이는 '향상된 전자상거래' 는 무엇인가요? 향상된 전자상거래 (Enhanced E-commerce) 는 지난 2014 GA 회담에서 정식발표된 업데이트로, 6월 현재 오픈베타중이며 기존의 E-commerce 플러그인이 아닌 별도의 플러그인 (ec.js) 과 코딩을 필요로 합니다. 이번 포스팅은 기본 전자상거래 추적에 대한 것이어서, 해당 옵션은 우선 해제하면 되겠습니다.
이제 본격적으로 온라인 쇼핑사이트에 어떻게 추적코드를 적용하는지 살펴보겠습니다.
(* 개발지식을 필요로하며 실제 적용에선 전문가와 작업하는 것을 추천합니다.)
Intro
구글 웹로그분석 (analytics.js) 의 E-Commerce 트랙킹은 기본코드 외 네 가지가 필요합니다.
- Ecommerce.js 플러그인 호출
- 결제정보 (예: 주문번호, 구매액 등) 코드
- 제품정보 (예: 제품 ID, 제품명, SKU 등) 코드
- GA 로 위 정보를 전송하는 커맨드
위 네 가지는 기본 GA코드에 추가되어 구매완료(영수증) 페이지에 삽입되어야 합니다.
단계별로 살펴보겠습니다.
1. Ecommerce.js 플러그인 호출
페이지마다 삽입되는 기본 GA 코드에 아래 한 줄을 추가해서 ecommerce.js 자바스크립트 파일을 호출해주세요. 구매완료 페이지에만 추가하시면 됩니다.
ga('require', 'ecommerce', 'ecommerce.js');Q: 이전 클래식버전 (ga.js) 에서는 E-commerce 코드가 라이브러리에 이미 포함되었는데요, 왜 범용 GA (analytics.js) 에선 추가가 필요한걸까요? E-commerce 코드가 별도의 파일에 있는 이유는 analytics.js 파일사이즈를 줄이고 불필요한 로드를 없애기 위함입니다. 모든 사이트가 전자상거래 추적을 필요로하진 않기 때문이죠 🙂 아래 형식으로 결제 정보를 전송해야 합니다. 구매완료 페이지에 추가하세요. 아마 E-commerce 코드적용에서 가장 까다로운 부분일텐데요, 해당 값들이 GA로 잘 전송될 수 있도록 올바른 서버단코드가 필요합니다. 각 항목이 의미하는 것들을 간단히 살펴보겠습니다. 아래 형식으로 제품 정보를 전송해주세요. 마찬가지로 구매완료 페이지에 추가하세요. 항목별로 살펴보자면, 어렵다고 느낄 수 있지만, 위 항목중 대부분은 이미 온라인 쇼핑몰사이트에서 수집중인 값이기 때문에 (주문번호, 구매총액, 배송비, 제품명, 제품단가 등) , 간단한 서버단 코드로 설정가능합니다 ^^. 마지막에 아래 커맨드를 넣어주세요. 구매완료 페이지에 추가하세요. 만약 아래와 같은 주문이 쇼핑몰 사이트에서 일어났다고 가정합니다. 위 고객은 아래 두 제품을 구매했습니다. 모든 태그가 적용됐다면, 아래 코드가 쇼핑몰사이트의 구매완료 페이지에서 확인됩니다. E-commerce 추적은 구글 애널리틱스 코드 중에서도 고난이도에 속하지만, 쇼핑사이트의 매출증가와 최적화에 직접적인 인사이트를 제공하는 파워풀한 기능입니다. 쇼핑 사이트에 경험있는 개발자라면 본 포스팅으로 충분히 내용을 이해하실 것이라 생각합니다 ^^ (* 전자상거래 설정 완료 후, 마케팅 ROI 분석을 위한 대시보드를 만들 수 있습니다). 2. 결제정보 코드 추가
ga('ecommerce:addTransaction', {
'id': '1234', // 시스템에서 생성된 주문번호. 필수.
'affiliation': 'store.co.kr', // 제휴사이름. 선택사항.
'revenue': '127000', // 구매총액. 필수.
'shipping': '5000', // 배송비. 선택사항.
'tax': '2000' // 세금. 선택사항.
});
3. 제품정보 코드 추가
ga('ecommerce:addItem', {
'id': '1234', //시스템에서 생성된 주문번호. 필수.
'name': '남성용 긴팔셔츠 흰색 XL', // 제품명. 필수.
'sku': 'XXX56789', // SKU 또는 제품고유번호. 선택사항.
'category': '남성의류', // 제품 분류.
'price': '30000', // 제품 단가.
'quantity': '1' // 제품 수량.
});
4. GA 로 위 정보 전송
ga('ecommerce:send');주문코드 예시
