Seoul Analytica의 매거진

[GA 전자상거래 세팅] 어디서부터 시작해야 할까? – 1편

Seoul Analytica

2021.01.13 13:13 조회수 344
  • 2
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    4
  • 나만의 큐레이션함 '서랍'에 영감이 추가되었습니다. 성장 +1 되었어요!

[GA 전자상거래 세팅] 어디서부터 시작해야 할까? – 1편

  • 2
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    4
  • 나만의 큐레이션함 '서랍'에 영감이 추가되었습니다. 성장 +1 되었어요!

읽기 전에 잠깐!

간단한 체크 하겠습니다. 

 

1. GA 용어(Entrance, 세션, 이탈률, 종료율)를 설명할 수 있다.

2. 구글 애널리틱스에서 템플릿으로 목표를 설정하고, 성과를 측정할 수 있다.

3. 세그먼트를 사용하여, 특정 사용자에 대한 데이터를 볼 수 있다.

4. 직접 전자상거래 세팅을 하고, 분석 기능을 사용 중이다.

5. 전반적인 구글 애널리틱스 데이터 레이어 구조를 파악하고 있다.

 

 

결과 체크

0~2개 : 끝까지 읽어주세요!

3~4개 : 몰랐던 내용만 체크하고 가세요.

5개 : 다음 편에 찾아오시는 것을 추천 드립니다.

 


 

웹사이트의 구성 요소(웹 언어)

 


 

웹 언어는 HTML, CSS, Javascript로 이루어져 있습니다. 

 

HTML은 웹사이트의 요소와 구조를 표현하기 위한 언어, CSS는 웹사이트의 디자인, Javascript는 웹사이트의 동작과 관련이 있습니다.

 

웹사이트의 버튼, 이미지, 텍스트 등이 HTML에 속하며, 웹사이트의 색상 및 크기를 설정하는 것이 CSS, 버튼을 클릭했을 때 웹사이트 요소를 변경시키는 작업을 Javascript가 처리합니다.

 

 

개발자 도구

 

웹 개발을 위한 다양한 정보를 확인할 수 있는 브라우저 기능입니다. 크롬 브라우저의 경우, 인터넷 브라우저에서 F12를 눌러 개발자 도구 창을 열 수 있습니다.

 

개발자 도구 - Elements 탭에서는 사이트가 어떻게 구성되어 있는지 확인할 수 있습니다. 앞서 설명한 HTML, CSS, Javascript 언어로 이루어진 사이트를 볼 수 있습니다.

 

 

Class, Id 속성

 

사이트의 수많은 요소가 있기 때문에, 태그속성을 통해 디자인을 설정하는 것은 비효율적입니다.

 

Class 속성을 사용하면 여러 동일한 요소에 동일한 디자인을 설정할 수 있습니다. 반대로 요소가 하나만 존재하는 경우, Id 속성으로 디자인 하기도 합니다. 

 

 

본격적인 전자상거래 설치

 

전자상거래 추적 코드가 어떻게 동작하는지 알아보겠습니다.

 

구글 태그 매니저(GTM)에 결제 정보가 담긴 스크립트 코드 삽입

사이트 결제 완료 페이지 조회

스크립트 동작, 결제 정보가 구글 애널리틱스로 전송

※ 가장 중요한 것은 해당 정보를 담는 스크립트 코드 작성입니다. 

 

 

구글 태그 매니저를 통해 전송되는 데이터 레이어(예시/JSON형식)

 

{

  'ecommerce': {

    'purchase': {

      'actionField': {

        'id': 'T12345',                         

        'affiliation': 'Online Store',

        'revenue': '35.43',                     

        'tax':'4.90',

        'shipping': '5.99',

        'coupon': 'SUMMER_SALE'

      },

      'products': [{                            

        'name': 'Triblend Android T-Shirt',     

        'id': '12345',

        'price': '15.25',

        'brand': 'Google',

        'category': 'Apparel',

        'variant': 'Gray',

        'quantity': 1,

        'coupon': ''                            

       },

       {

        'name': 'Donut Friday Scented T-Shirt',

        'id': '67890',

        'price': '33.75',

        'brand': 'Google',

        'category': 'Apparel',

        'variant': 'Black',

        'quantity': 1

       }]

    }

  }

})

 

 

데이터 레이어를 본 GA린이(1차 위기)

 

  

 

 

위 데이터 레이어를 보기 쉽게 구조화하면 아래와 같습니다.

 


 

결제 완료 데이터 레이어는 크게 두 가지 영역으로 구분됩니다. 

 

1) actionField 영역은 총매출액, 거래ID를 의미합니다.

2) products 영역은 개별 상품의 이름, 가격 정보를 담고 있습니다.

 

한 번에 구매하는 상품이 여러 개인 경우가 있습니다. 그 때문에 products 영역은 개별 상품의 정보를 담은 여러 개의 상품 데이터들로 구성되어 있습니다. 

 

actionField products영역에 들어간 데이터 정보에 대한 설명을 살펴보겠습니다.

 

actionField영역은 id, affiliation, revenue로 구성되어있습니다.

 

 값

내용 

 id

   거래 ID를 의미합니다. 문자 형식을 갖춰야 하며 필수로 존재해야 하는 값입니다.

 affiliation

   거래가 일어난 스토어 이름입니다. 

   일반적인 전자상거래 세팅 상황에서 'Online Store'로 지정합니다.

 revenue

   거래로 발생한 총 매출입니다. 실제 결제금액으로 산정되며 세금, 배송비를 포함합니다. 

   값이 없는 경우 함께 전송된 products 정보를 참고해 자동으로 값을 집계합니다. 

   숫자 형식을 갖춰야 합니다.

 

 

products영역은 id, name, variant, price, quantity로 구성되어 있습니다.

 

 값

내용 

 id

   주문한 상품명입니다. 문자 형식을 가져야 합니다.

 name

   주문한 상품의 ID 정보입니다. 위의 actionField 영역의 id와는 아예 관련이 없는 값입니다. 

   문자 형식을 가져야 합니다.

 variant

   주문한 상품의 옵션 정보입니다. 문자 형식을 가져야 합니다. 

   하나의 상품에서 옵션을 여러 개 설정한 경우 다른 상품으로 취급합니다.

 price

   상품의 금액입니다. 숫자 형식을 가져야 합니다.

 quantity

   주문한 상품의 개수입니다. 해당하는 상품의 개수를 의미하며 정수 숫자 형식을 가져야 합니다.

 


아쉽지만 오늘은 여기까지입니다!

 

 

 

??? : 나이스 벌써 끝~ 너무 쉽잖아~

 

다음 시간에는 <Javascript문법>을 들고 오겠습니다! 

 

   

??? : 오 마이 갓

 

 

궁금한 점 및 소재 제안은 댓글 또는 작가페이지 '연결하기'정보를 통해 문의해 주세요.

즐거운 하루 되시고, 다음 주제로 또 뵙겠습니다.

  • #구글애널리틱스
  • #전자상거래
  • #추적 코드
  • #구글태그매니저

유사 카테고리의 인기 콘텐츠