웹사이트 이벤트 분석하기

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

1. 회원 분석

1.1 회원가입 분석

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

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

1.2 로그인 분석

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

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

1.3 회원 정보 분석

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

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자 미만의 코드값 이어야 합니다.

JavaScript

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

JSX

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

2.3 상품 페이지 분석

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

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>

JSX

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

3 Event 분석

3.1 내부 검색어 분석

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

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

3.2 검색 결과 클릭 분석

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

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

3.3 장바구니 분석

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

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 클릭 이벤트 분석

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

3.4.1 버튼 클릭

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

3.4.2 배너 클릭

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

3.4.3 메뉴 클릭

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

4. Purchase 분석

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

4.1 단일 상품 구매 분석

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 복수 상품 구매 분석

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);