in Implement: 적용

구글애널리틱스 전자상거래 분석 #2: 추적코드 적용

Share

앞선 포스팅에서 구글애널리틱스의 전자상거래 분석 및 데이터수집과정을 다뤄봤습니다.

구글 웹로그분석 전자상거래: 데이터 처리과정

구글 웹로그분석 전자상거래: 데이터 처리과정

그럼 이제, 본격적인 코드작업에 앞서 관리모드에서 관리 – 전자상거래 설정 – 전자상거래 사용설정 ON – 다음단계 – 제출 버튼을 차례로 눌러서 전자상거래를 활성화시킵니다.

Q: 여기서 잠깐, 아래 보이는 '향상된 전자상거래' 는 무엇인가요?

향상된 전자상거래 (Enhanced E-commerce) 는 지난 2014 GA 회담에서 정식발표된 업데이트로, 6월 현재 오픈베타중이며 기존의 E-commerce 플러그인이 아닌 별도의 플러그인 (ec.js) 과 코딩을 필요로 합니다. 이번 포스팅은 기본 전자상거래 추적에 대한 것이어서, 해당 옵션은 우선 해제하면 되겠습니다.

구글 웹로그 E-commerce 활성화

이제 본격적으로 온라인 쇼핑사이트에 어떻게 추적코드를 적용하는지 살펴보겠습니다.

(* 개발지식을 필요로하며 실제 적용에선 전문가와 작업하는 것을 추천합니다.)

Intro

구글 웹로그분석 (analytics.js) 의 E-Commerce 트랙킹은 기본코드 외 네 가지가 필요합니다.

  1. Ecommerce.js 플러그인 호출
  2. 결제정보 (예: 주문번호, 구매액 등) 코드
  3. 제품정보 (예: 제품 ID, 제품명, SKU 등) 코드
  4. 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 파일사이즈를 줄이고 불필요한 로드를 없애기 위함입니다. 모든 사이트가 전자상거래 추적을 필요로하진 않기 때문이죠 🙂

2. 결제정보 코드 추가

아래 형식으로 결제 정보를 전송해야 합니다. 구매완료 페이지에 추가하세요.

ga('ecommerce:addTransaction', { 
  'id': '1234', // 시스템에서 생성된 주문번호. 필수. 
  'affiliation': 'store.co.kr', // 제휴사이름. 선택사항. 
  'revenue': '127000', // 구매총액. 필수. 
  'shipping': '5000', // 배송비. 선택사항. 
  'tax': '2000' // 세금. 선택사항.
});

아마 E-commerce 코드적용에서 가장 까다로운 부분일텐데요, 해당 값들이 GA로 잘 전송될 수 있도록 올바른 서버단코드가 필요합니다.

각 항목이 의미하는 것들을 간단히 살펴보겠습니다.

  •  ID*: 각 주문별 고유번호. 필수항목. (보통 시스템에서 자동생성됩니다).
  • Affiliation: 제휴사이름 (제휴마케팅을 하지 않는 경우, 본인이 원하는 다른 값을 넣어도 됩니다. 쿠폰이름을 넣는 경우도 있다고 하네요 ^^.)
  • Revenue*: 구매총액. 필수항목. (배송비 및 세금, 기타 모든 비용을 포함한 값이여야 합니다.)
  • Shipping: 배송비.
  • Tax: 세금.

3. 제품정보 코드 추가

아래 형식으로 제품 정보를 전송해주세요. 마찬가지로 구매완료 페이지에 추가하세요.

ga('ecommerce:addItem', { 
  'id': '1234', //시스템에서 생성된 주문번호. 필수. 
  'name': '남성용 긴팔셔츠 흰색 XL', // 제품명. 필수. 
  'sku': 'XXX56789', // SKU 또는 제품고유번호. 선택사항. 
  'category': '남성의류', // 제품 분류. 
  'price': '30000', // 제품 단가. 
  'quantity': '1' // 제품 수량.
});

항목별로 살펴보자면,

  • ID*: 주문번호. 필수항목. (위에서 사용된 것과 동일한 값입니다.)
  • Name*: 제품명. 필수항목.
  • SKU: 제품별 고유번호.
  • Category: 제품 분류 (카테고리별 분석을 위한 항목입니다. 품목당 하나씩만 전송하실 수 있습니다.)
  • Price: 제품 단가.
  • Quantity: 구매한 제품 수량.

어렵다고 느낄 수 있지만, 위 항목중 대부분은 이미 온라인 쇼핑몰사이트에서 수집중인 값이기 때문에 (주문번호, 구매총액, 배송비, 제품명, 제품단가 등) , 간단한 서버단 코드로 설정가능합니다 ^^.

4. GA 로 위 정보 전송

마지막에 아래 커맨드를 넣어주세요. 구매완료 페이지에 추가하세요.

ga('ecommerce:send');

주문코드 예시

만약 아래와 같은 주문이 쇼핑몰 사이트에서 일어났다고 가정합니다.

  • 주문번호: 55555
  • 총액: 127,000원
  • 배송비: 5,000원
  • 세금: 2,000원

위 고객은 아래 두 제품을 구매했습니다.

  • 제품명: 남성용 긴팔셔츠 흰색 XL
    • SKU 제품고유번호: XXX56789
    • 제품 종류: 남성의류
    • 수량: 1개
    • 가격: 30,000원
  • 가죽정장구두 검정색
    • SKU 제품고유번호: YYY12345
    • 제품 종류: 신발
    • 수량: 1개
    • 가격: 90,000원

모든 태그가 적용됐다면, 아래 코드가 쇼핑몰사이트의 구매완료 페이지에서 확인됩니다.

GA 전자상거래 코드

E-commerce 추적은 구글 애널리틱스 코드 중에서도 고난이도에 속하지만, 쇼핑사이트의 매출증가와 최적화에 직접적인 인사이트를 제공하는 파워풀한 기능입니다.

쇼핑 사이트에 경험있는 개발자라면 본 포스팅으로 충분히 내용을 이해하실 것이라 생각합니다 ^^

(* 전자상거래 설정 완료 후, 마케팅 ROI 분석을 위한 대시보드를 만들 수 있습니다).

 

  • sd

    개발에 배경지식이 없는 초보입니다. 질문의 수준이 떨어져도 이해 부탁드립니다 ^^;
    저희 쇼핑몰에 ga 전자상거래 코드를 삽입하려 알아보다 방문하게 되었습니다.
    잘 이해되지 않는 부분이 예를들어
    ‘id’: ‘1234’, // 시스템에서 생성된 주문번호. 필수.
    이럴 경우
    실제 저의 사이트에 반영할때
    ‘id’: ‘1234’
    그냥 이렇게 기재하는 건 아닌듯한데 (결재 시점의 정보가 기입되어야 하는것 같은데)
    우측의 값을 서버단 코드로 치환하여 삽입하면 되는게 맞나요?

  • Mind The Log

    네, 말씀하신 것이 맞습니다 🙂 PHP 같은 별도의 서버단 코드가 우선 준비된 다음에 적용하시면 됩니다.

  • 추가로 방문자분이 문의주신것에 대한 댓글 남겨드립니다 (사이트 업그레이드하면서 댓글이 지워졌네요…;;;)

    ‘id’: ‘1234’, // 시스템에서 생성된 주문번호. 필수.

    와 같이 있는 곳에서 뒷부분을 서버단 코드값으로 치환하는 것이 맞습니다. 이러기 위해서는 우선 PHP 와같은 별도의 서버단 코드가 필요합니다~ 🙂

  • 정한섭

    주문 취소된 건의 ‘영수증을 발행’하려면 실제로 코드 작업이나 설정 등을 어떤식으로 해줘야 하나요?

    • 답변이 많이 늦어졌습니다~ ^^;

      마찬가지로 ‘환불영수증’ 을 발행시키면 되는데요, 주문번호를 그대로 두되 같은 액수를 마이너스로 해서 마이너스 주문을 입력하는 방식입니다.

      두 가지 방법을 알려드리자면,

      1) 아래와 같이 구매총액 및 상품갯수를 마이너스로, 제품단가는 양수로 입력한 환불영수증 페이지를 만들어서 로드합니다.

      ga(‘ecommerce:addTransaction’, {
      ‘id’: ‘1234’, // 시스템에서 생성된 주문번호. 필수.
      ‘affiliation’: ‘store.co.kr’, // 제휴사이름. 선택사항.
      ‘revenue’: ‘-127000’, // 구매총액의 마이너스 입력!!! 필수.
      ‘shipping’: ‘-5000’, // 배송비 마이너스 입력!!! 선택사항.
      ‘tax’: ‘-2000’ // 세금 마이너스 입력!!! 선택사항.
      });

      // 제품별 데이터
      ga(‘ecommerce:addItem’, {
      ‘id’: ‘1234’, //시스템에서 생성된 주문번호. 필수.
      ‘name’: ‘남성용 긴팔셔츠 흰색 XL’, // 제품명. 필수.
      ‘sku’: ‘XXX56789’, // SKU 또는 제품고유번호. 선택사항.
      ‘category’: ‘남성의류’, // 제품 분류.
      ‘price’: ‘30000’, // 제품 단가. 양수로 입력!!!
      ‘quantity’: ‘-1’ // 제품 수량. 마이너스 입력!!!
      });

      참조: https://support.google.com/analytics/answer/1037443?hl=ko

      2) 만약 향상된전자상거래 (Enhanced Ecommerce) 를 사용중이시면, Data Import 를 통해 보다 손쉽게 일괄적으로 처리 가능합니다.

      참조: https://support.google.com/analytics/answer/6014861?hl=ko

      답변이 되었기를 바랍니다~

  • ga 초보

    안녕하세요! ga와 전자상거래 연결을 위한 스크립트 삽입과정에 한가지 문의드립니다.

    결제정보와 제품정보 스크립트를 실제로 추가하려고 하는데,

    해당영역에 어떠한 수치 혹은 문자를 넣어야하는지 조언 부탁드려요.

    [결젱정보 코드]
    ga(‘ecommerce:addTransaction’, {
    ‘id’: ‘1234’, // 시스템에서 생성된 주문번호. 필수.
    ‘affiliation’: ‘store.co.kr’, // 제휴사이름. 선택사항.
    ‘revenue’: ‘127000’, // 구매총액. 필수.
    ‘shipping’: ‘5000’, // 배송비. 선택사항.
    ‘tax’: ‘2000’ // 세금. 선택사항.
    });
    위의 id 옆 ‘1234’ 에 실제로 어떤 문자를 넣어서 스크립트를 삽입해야 할까요?
    revenue / shipping / tax 옆에 실제로 추가될 문자도 궁금합니다.
    제품정보 코드에서는 name 옆에 들어갈 문자가 궁금합니다.

    확인해주셔서 감사합니다!

    • 회신이 늦어져서 죄송합니다. 해당 영역에 실제 들어가는 macro 는 사이트/시스템별로 모두 다른데요, 개발자와 확인이 필요한 내용입니다~
      거의 모든 전자상거래 사이트에서 이미 구매총액, 주문번호와 같은것을 나타내는 스크립트를 사용중이기 때문에 최소한의 개발도움으로도 적용이 가능한 부분이라 생각합니다.^^

  • 장재현

    질문이 있습니다..
    만약에 공통 페이지로 공통 foote를 사용하는 경우,
    구매완료페이지에는 기본 GA 코드와 위의 코드에 있는 기본 GA코드가 중복으로 들어갈 것 같은데요.. 중복이어도 상관 없나요?
    아님 공통footer를 쓰는 경우 구매완료 페이지에서 기본 GA는 빼고 가야 하는건가요?

    • 네, 원론적으로는 위 thank you 태그에서 한번만 호출하는것이지만 중복으로 pageview 전송되어도 리포트에서 상관은 없습니다.

      • 장재현

        회신 감사합니다.
        혹시 GA 관련해서 교육 예정이 있으신지요.
        참여해보고 싶은데 혹시 일정이 있으면 알려주시면 감사하겠습니다.
        혹, 직접 교육할 일정이 없으시다면..
        추천 강의 또는 추천 도서나 사이트라도 알려주시면, GA에 대해 공부하는 데 도움이 될 것 같습니다.
        감사합니다.

        • 감사합니다! 제가 회사원이라 외부교육을 따로 진행하지는 않습니다 ^^;; 블로그에서 소통해요~

  • KSK

    안녕하세요 GA초보자입니다.
    설명을 너무 잘해주셔서 차근차근 이해하고 있는 중인데요.
    예시로 보여주신 걸 보니까 결제금액이 제품가(30,000+90,000) + 배송비(5000원) + 세금(2000원) 으로 계산이 되어있는데, 보통 제품가에 세금이 포함되어있잖아요.
    결제정보 코드 세금값을 입력하면 제품정보 코드에 price는 세금을 제외한 금액을 입력해야 하나요?

  • 이예린

    안녕하세요. 깔끔한 설명 정말 감사합니다.
    전자상거래 태그를 추가하고 싶은데 저희 페이지에는 구매완료라는 페이지가 없고
    대신 팝업창처럼 모달만 뜨게 되는데 이럴 땐 전자상거래 코드를 추가할 다른 방법이 없을까요..
    ㅠㅠ 답변 부탁드립니다.. 블로그 즐겨찾기 하여 너무나 잘보고 있어요!

    • 도움이 되었다니 기쁩니다! 이 글이 벌써 향상된 전자상거래 런칭 이전에 쓴 글이 되어버렸네요 ^^; 우선 글에서 다룬 기존 classic ecommerce 기준으로 설명드립니다.
      페이지를 봐야 자세히 설명될수 있지만, 기본적으로는 아래 방법들이 있습니다~

      1) 구매완료 페이지 대신에 그 직전 성공여부를 판단하는 시점에 마지막 전환태그를 호출해주면 됩니다. 많은 경우 구글태그매니저를 활용하시면 더 간편합니다. 결제가 완료되는 시점의 이벤트 (아마도 양식제출 = form submission) 를 찾아서, 해당 트리거에 위 전환코드를 호출하는 형태입니다.

      2) 마찬가지로 결제완료 시점에 GA 측정프로토콜을 활용해서, HTTP 형태로 구매총액, 제품명, sku 등의 데이터를 호출할 수 있습니다. 전환완료페이지 없어도 PHP, cURL 로 위 전환데이터를 전송하는 형태입니다. https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide#ecom

      현재 GTM 을 활용중이시라면 1번 방법으로 직접 시도해보시거나, 아니시면 개발자분에게 도움을 요청하는걸 추천드립니다!

  • obec

    안녕하세요. 어려운 내용을 잘 설명해 주셔서 감사합니다.
    최근엔 이게 태그가 다른 걸로 바뀌어서 응용해서 적용하다 보니 좀 궁금한게 있는데요..
    복수의 상품을 결제 할때에는 상품 코드나 상품 이름이 여러개일 텐데,
    그럴 때를 대비해서 태그를 여러개 넣어 둬야 하는건가요…?

    위에서 보여주신 예제로 에를 들면,
    additem이 두개가 보여지는데,
    실제 스크립트 삽입 시 두개를 넣어 둔 건가요..?? 아니면 하나만 넣어 두면 상품 개수에 따라 알아서 많아(?) 지나요?

    • obec

      새로운 태그를 기준으로 하면,
      ga(‘ec:addProduct’, { // Provide product details in an productFieldObject.
      ‘id’: ‘xxxx’, // Product ID (string).
      ‘name’: ‘xxxx’, // Product name (string).
      ‘category’: ‘xxxx’, // Product category (string).
      ‘price’: ‘000000’, // Product price (currency).
      ‘coupon’: ‘xxxxxxx’, // Product coupon (string).
      });

      이 부분을 어떻게 처리를 해야 복수 상품 결제시
      문제 없이 작동할 지 궁금합니다..^^;;

      감사합니다!

      • 댓글 감사합니다. Enhanced Ecommerce 버전에서는 transaction (결제) 데이터셋을 아래처럼 하시면 되겠습니다.

        ga(‘ec:addProduct’, { ‘id’: ‘1’ });
        ga(‘ec:addProduct’, { ‘id’: ‘2’ });
        ga(‘ec:setAction’, ‘purchase’, { ‘id’: ‘123456’ });

        제품에 따라 addProduct 로 구분하신 다음에 나중에 purchase 를 호출하시면 두 개 이상의 제품을 한개의 결제에 묶을 수 있습니다~

  • 손용호

    안녕하세요 설명 감사합니다~! 혹시 GTM에서 전자상거래 태그를 발사하기위해서는 어떤식으로 태그를 만들어야 할까요?

  • Blake Lee

    안녕하세요! 오랜만에 놀러왔습니다, 여전히 훌륭한 포스팅에 매번 도움을 얻고 갑니다 ^^
    잘지내시지요?