읽기 전에 잠깐!

간단한 체크 하겠습니다. 

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로 구성되어있습니다.

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

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

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

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

??? : 오 마이 갓

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

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