# 웹사이트 이벤트 분석하기

웹사이트에서 발생하는 다양한 이벤트를 분석하기 위해서는 분석 대상 앱에서 해당 이벤트가 발생되는 시점에 SDK로 해당 정보를 전달해야 합니다. 이어지는 내용에서는 주요 이벤트들의 분석 방법에 대해서 자세하게 설명합니다.

## 1. 회원 분석

### 1.1 회원가입 분석

회원가입 처리 완료 시점에 아래와 같이 분석 코드를 적용합니다. \
 ***Javascript, JSX 환경에서 동일한 코드로 사용이 가능합니다.***

```javascript
let event = {};
event["event"] = "w_signup_complete";
event["signupTp"] = "email"; //회원가입 방식
WDOT.logEvent(event);
```

### 1.2 로그인 분석

로그인 처리 완료 시점에 아래와 같이 분석 코드를 적용합니다. \
 ***Javascript, JSX 환경에서 동일한 코드로 사용이 가능합니다.***

```javascript
let event = {};
event["event"] = "w_login_complete";
event["loginTp"] = "facebook"; //로그인 방식
WDOT.logEvent(event);
```

### 1.3 회원 정보 분석

사용자의 다양한 정보를 분석할 수 있습니다. 로그인 완료 혹은 회원가입 처리 완료 후 아래와 같이 분석 코드를 적용합니다. \
 ***Javascript, JSX 환경에서 동일한 코드로 사용이 가능합니다.***

```javascript
let user = {};
user["mbr"] = "Y";
user["sx"] = "M";
user["ut1"] = "User Attr1";

WDOT.setUser(user);
```

회원 분석과 관련되어 제공되는 분석 항목은 다음과 같습니다.

|  Key |             Value            |
| :--: | :--------------------------: |
|  mbr |      회원여부를 나타내는 Y,N값 전달      |
|  mbl |       회원등급을 나타내는 코드값 전달      |
| mbid |        회원의 로그인 아이디를 전달       |
|  sx  | 회원 성별을 나타내는 M,F,U 중 한가지 값 전달 |
|  ag  |      회원 연령을 나타내는 코드값 전달      |
|  ut1 |      회원 속성#1 의미하는 코드값 전달     |
|  ut2 |      회원 속성#2 의미하는 코드값 전달     |
|  ut3 |      회원 속성#3 의미하는 코드값 전달     |
|  ut4 |      회원 속성#4 의미하는 코드값 전달     |
|  ut5 |      회원 속성#5 의미하는 코드값 전달     |

## 2. Page 분석

### 2.1 Page 분석시 주의 사항

페이지 분석은 WDOT.logScreen 함수를, 사용자에게 페이지가 보여진 후 호출하는 것으로 가능합니다. 이에 대한 분석 코드를 적용하면서, Javascript 타입의 경우 공통 footer 파일을 통해서 일괄 적용하는 방법과  JSX 타입의 경우 상속 관계를 이용하여 일괄 적용하는 방법을 검토하실 수 있습니다. 다만 이때, 공통 코드 블록에도 WDOT.onStartPage을 적용하고, 개별 화면에도 WDOT.onStartPage을 적용할 경우, 데이터가 왜곡될 수 있습니다. 이러한 사항을 주의하여, ***공통 코드 블록으로 일괄 적용하는 부분과 개별 페이지에서의 적용 부분을 잘 구분하고,*** ***중복 호출되지 않도록 적용할 필요가 있습니다.***

### 2.2 Page Identity 분석

앱에 존재하는 각 페이지를 의미하는 Identity를 사용자가 정의하고, 각 화면들에 정의된 Identity를 적용하면 앱에서 가장 사용 빈도가 높은 화면별 랭킹을 알 수 있습니다. Identity값은 **AlphaNumeric 형태를 가지는 최대길이 8자 미만의 코드값** 이어야 합니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
<script  type="text/javascript"> 
    /**
    코드 적용 위치는 반드시 SDK 초기화 코드 블럭 위치보다 아래에 위치하도록 합니다. 
    **/ 
	window.WDOTParam = {
        "page_id":"MAIN"
    }; 
    WDOT.onStartPage(window.WDOTParam || {});
</script>
```

{% endtab %}

{% tab title="JSX" %}

```jsx
componentDidMount() {
    let screen = {};
    screen["page_id"] = "MAIN";
    WDOT.onStartPage(screen);
}
```

{% endtab %}
{% endtabs %}

### 2.3 상품 페이지 분석

상품 상세 페이지에 아래와 같이 분석코드를 적용하여 상품별 조회 수를 분석합니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
<script  type="text/javascript">
    /**
    코드 적용 위치는 반드시 SDK 초기화 코드 블럭 위치보다 아래에 위치하도록 합니다.
    **/  
	window.WDOTParam = {
        "page_id":"MAIN",
        "event":"w_view_product",
        "product":{
            "pg1":"상품카테고리(대)",
            "pg2":"상품카테고리(중)",
            "pg3":"상품카테고리(소)",
            "pg4":"상품카테고리(세)",
            "pnc":"상품코드",
            "pnAtr1":"상품속성#1" 
        }
    }; 
   WDOT.onStartPage(window.WDOTParam || {});
</script>
```

{% endtab %}

{% tab title="JSX" %}

```jsx
componentDidMount() {
    let screen = {
         "page_id":"MAIN",
         "event":"w_view_product",
         "product":{
             "pg1":"상품카테고리(대)",
             "pg2":"상품카테고리(중)",
             "pg3":"상품카테고리(소)",
             "pg4":"상품카테고리(세)",
             "pnc":"상품코드",
             "pnAtr1":"상품속성#1" 
         }
     };
    WDOT.onStartPage(screen);
}
```

{% endtab %}
{% endtabs %}

## 3 Event 분석

### 3.1 내부 검색어 분석

앱에 검색기능이 있는 경우, 사용자가 입력한 **검색어**와 **검색 결과수** 등을 분석하면 검색 기능의 활용성을 측정할 수 있습니다. 검색이 완료된 시점에 다음과 같이 분석 코드를 적용합니다. \
&#x20;***Javascript, JSX 환경에서 동일한 코드로 사용이 가능합니다.***

```javascript
let event = {};
event["event"] = "search";
event["skwd"] = "청바지";
event["g25"] = 1200;
WDOT.logEvent(event);
```

### 3.2 검색 결과 클릭 분석

검색 결과 항목별 클릭수를 분석합니다. 이 분석 결과를 통해서 검색 결과의 상단에 노출되는 항목들이 적절한지 가늠할 수 있습니다. 검색 결과에서 특정 항목이 클릭되면 해당 화면으로 이동하기 이전에 아래와 같이 분석 코드를 적용하세요. \
&#x20;***Javascript, JSX 환경에서 동일한 코드로 사용이 가능합니다.***

```javascript
let event = {};
event["event"] = "click_item";
event["click_method"] = "클릭한 상품";
WDOT.logEvent(event);
```

### 3.3 장바구니 분석

장바구니에 담긴 상품을 분석할 수 있습니다. 장바구니 담기 이벤트 발생 시 아래와 같은 코드를 적용하세요. \
&#x20;***Javascript, JSX 환경에서 동일한 코드로 사용이 가능합니다.***

```javascript
let event = {};
event["event"] = "w_add_to_cart";
let product = {};
product["pg1"] = "상품카테고리(대)";
product["pnc"] = "상품코드";
product["pnAtr1"] = "상품속성#1";
event["product"] = product;
WDOT.logEvent(event);
```

### 3.4 클릭 이벤트 분석

앱에 존재하는 다양한 클릭 요소(버튼, 배너, 메뉴) 에 대해서 클릭수를 분석합니다. 각 요소가 클릭되는 시점에 아래와 같은 분석 코드를 적용하세요. \
&#x20;***Javascript, JSX 환경에서 동일한 코드로 사용이 가능합니다.***

#### 3.4.1 버튼 클릭

```javascript
let event = {};
event["event"] = "w_click_button";
event["click_method"] = "버튼 설명";
WDOT.logEvent(event);
```

#### 3.4.2 배너 클릭

```javascript
let event = {};
event["event"] = "w_click_banner";
event["click_method"] = "배너 설명";
WDOT.logEvent(event);
```

#### 3.4.3 메뉴 클릭

```javascript
let event = {};
event["event"] = "w_click_menu";
event["click_method"] = "메뉴 설명";
WDOT.logEvent(event);
```

## 4. Purchase 분석

앱 내에서 발생하는 구매 이벤트를 분석합니다. 구매 완료 시점에 다음과 같이 분석 코드를 적용합니다. \
&#x20;***Javascript, JSX 환경에서 동일한 코드로 사용이 가능합니다.***

### 4.1 단일 상품 구매 분석

```javascript
let purchase = {};
purchase["transaction_id"] = "주문번호";
purchase["currency"] = "화폐단위";

let product1 = {};
product1["pg1"] = "상품카테고리(대)";
product1["pnc"] = "상품코드1";
product1["pnAtr1"] = "상품속성#1";

let productArray = [];
productArray.push(product1);
purchase["product"] = productArray;
WDOT.logPurchase(purchase);
```

### 4.2 복수 상품 구매 분석

```javascript
let purchase = {};
purchase["transaction_id"] = "주문번호";
purchase["currency"] = "화폐단위";

let product1 = {};
product1["pg1"] = "상품카테고리(대)";
product1["pnc"] = "상품코드1";
product1["pnAtr1"] = "상품속성#1";

let product2 = {};
product2["pg1"] = "상품카테고리(대)";
product2["pnc"] = "상품코드2";
product2["pnAtr1"] = "상품속성#2";

let productArray = [];
productArray.push(product1);
productArray.push(product2);
purchase["product"] = productArray;
WDOT.logPurchase(purchase);
```