# 인앱 이벤트 태깅(Tagging)

본 문서는 와이즈트래커 SDK를 설치(설정)하고 난 이후에, **실제 이벤트를 태깅(Tagging)하는 업무**를 진행하는 개발 담당자 분들에게 도움을 드리고자 작성되었습니다.

이벤트 태깅 작업 과정에서 공통적으로 느끼시는 어려움을 참고하여 작성되었으며, 본격적으로 이벤트 태깅 업무를 진행하기에 앞서 참고하시면 도움이 될 것으로 생각됩니다.

* logScreen(), logEvent(), logPurchase() 함수가 이벤트의 성격(유형)에 맞춰서 다르게 사용되고 있습니다.\
  일반적으로 화면(페이지)를 조회하는 것과 관련된 이벤트는 **logScreen()**\
  행동과 관련된 이벤트는 **logEvent()**\
  구매와 관련된 이벤트는 **logPurchase()** 를 이용하고 있습니다.\
  \
  자주 실수가 발생하는 부분이 logScreen()을 호출해야하는데 logEvent()를 호출하는 경우나 그 반대의 경우가 많습니다. <br>
* 한번에 예정된 이벤트를 다 태깅하고 나중에 적용된 태깅 코드의 정상 여부를 확인하기보다는 우선 제일 간단한 logScreen() 이벤트 하나 + logEvent() 이벤트 하나를 선정해서 태깅하고 실제 태깅이 잘 적용되어 데이터가 수집되는지 확인한 이후에 남은 이벤트를 태깅하는 것을 권장드리고 싶습니다.\
  \
  예를들어, `w_click_banner` 또는 `w_click_menu` 와 같은 **logEvent()** 이벤트 + `w_view_product` 또는 `view_xxx` 와 같은 **logScreen()** 이벤트를 하나씩 먼저 태깅하고,\
  실제 와이즈트래커 대시보드의 `SDK 데이터 검증` 메뉴를 이용해서 실제 태깅 코드가 잘 적용되어 이벤트 수집이 되는지를 확인하고 나면 전체적으로 SDK 가 어떻게 작동되는지 이해하실 수 있습니다. 이렇게 하나만이라도 먼저 태깅과 확인 과정을 거친 이후에 본격적으로 진행하시는것을 추천드립니다.<br>
* 태깅된 이벤트가 실제로 와이즈트래커로 잘 수집되고 있는지 확인할 수 있도록 와이즈트래커 대시보드의 `SDK 데이터 검증` 메뉴 기능을 제공하고 있습니다.\
  태깅 코드를 적용하고 확인하는 과정에서 이용하면 큰 도움이 될 것 입니다.\
  자세한 사용 방법은 가이드 문서를 참고해주세요. ([바로가기](https://document.wisetracker.co.kr/service/sdk-validation))<br>
* 와이즈트래커 SDK가 실제 고객사의 모바일 앱 안에서 어떤식으로 동작하는지 그림으로 표현하였습니다.\
  그림을 통해 logEvent() 와 logScreen()이 어떻게 작동하는지, 또는 웹뷰의 경우에는 어떻게 처리가 되어야 하는지 등 전반적인 작동의 흐름을 이해하는데 참고할 수 있습니다.

  <figure><img src="https://423922975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_ZKcnBFmefw9Yfed6b-3102695190%2Fuploads%2FqWGPPM0YmlkyF5WVgVYY%2Fimage.png?alt=media&#x26;token=6a4b1e27-3405-408b-bd2b-464eb4116f23" alt=""><figcaption><p>[그림 1] 와이즈트래커 SDK 동작 순서</p></figcaption></figure>

  * logEvent() 와 logPurchase()는 함수가 호출되는 순간 와이즈트래커로 이벤트 데이터를 전송(Send) 합니다.

혼돈을 줄 수 있는 부분은 Page Data(Event) 입니다. Page Data 를 위한 설정은 네이티브앱과, 웹뷰를 사용하는 앱으로 나누어서 설명드릴 수 있습니다.&#x20;

#### 1. Native 앱의 Page Data

기본적으로 와이즈트래커 SDK는 <mark style="color:blue;">`onStartPage()`</mark> <mark style="color:blue;"></mark><mark style="color:blue;">함수를 만나면 Page Data의 기록을 시작</mark>합니다.(즉, 아직 데이터를 전송하는 것은 아닙니다.)\
그리고 <mark style="color:red;">다음번 onStartPage() 함수가 호출되면 다시 새로운 Page Data 를 기록하기 시작하고 그제서야 이전에 기록했던 Page Data를 와이즈트래커로 전송</mark>합니다.\
위 \[그림 1] 을 보시면 Page Data (A)가 실제 전송(Send)되는 시점은 화면B에서 `onStartPage()`를 호출되어 Page Data (B)의 기록을 시작할 때입니다.

* <mark style="color:blue;">`onStartPage()`</mark> <mark style="color:blue;"></mark><mark style="color:blue;">함수가 실행되어 Page Data를 생성하고 나서,</mark> <mark style="color:blue;"></mark><mark style="color:blue;">`logScreen()`</mark> <mark style="color:blue;"></mark><mark style="color:blue;">함수를 이용하여 추가적인 Page Data를 넣어주지 않으면 기본적으로 빈(Blank) Page 데이터가 수집</mark>됩니다.&#x20;

  <figure><img src="https://423922975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_ZKcnBFmefw9Yfed6b-3102695190%2Fuploads%2FIrehWogtTHSDqIGNmbeP%2Fimage.png?alt=media&#x26;token=37c3cddb-d5a1-4a88-b94b-e7233a594537" alt=""><figcaption><p>[그림 2] 빈(Blank) Page Data가 SDK 데이터 검증 메뉴에서 보여지는 예시</p></figcaption></figure>
* 비어있는 <mark style="color:red;">Page Data에 추가적인 데이터를 넣고 싶을때 이용하는 함수가 바로</mark> <mark style="color:red;"></mark><mark style="color:red;">`logScreen()`</mark> <mark style="color:red;"></mark><mark style="color:red;">함수</mark>입니다.\
  \=============================================\
  // JAVA 코드 예시\
  // onStartPage() 함수가 호출되어 만들어진 Page Data에 \
  // event, promotion\_id, promotion\_name 이라는 속성값을 추가함 \
  \
  Map\<String, Object> pageMap = new HashMap<>();\
  pageMap.put("event", "w\_view\_promotion");\
  pageMap.put("promotion\_id", "E200905605");\
  pageMap.put("promotion\_name", "10월 COUPON PACK");

  \
  DOT.logScreen(pageMap);\
  \=============================================\
  위와 같이 `logScreen()` 함수를 이용하면 Page Data에 추가속성이 포함됩니다. (참고: \[그림 3])<br>

  <figure><img src="https://423922975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_ZKcnBFmefw9Yfed6b-3102695190%2Fuploads%2F9R0qHMiCGdEN5eSH9G9L%2Fimage.png?alt=media&#x26;token=78169393-93c7-44a0-ae51-1afdca0b238e" alt=""><figcaption><p>[그림 3] logScreen()으로 추가 속성이 포함된 Page Data가 SDK 데이터 검증 메뉴에서 보여지는 예시</p></figcaption></figure>

**2. 웹뷰의 Page Data**

* 위의 \[그림1] 을 참고하여 보시면 Screen A,B,C,D 의 경우 화면이 이동할때마다 DOT.onStartPage() -> DOT.logScreen() 순서로 호출되는것을 확인할 수 있습니다.&#x20;
* **웹뷰를 사용하는 앱의 경우에는 onStartPage() 를 직접 호출하지 않아도 됩니다**. 웹뷰로 불러온 페이지를 감지할 수 있도록 DOT.setWebView 를 통해 웹뷰를 호출하고, 웹뷰가 모두 띄워지면 DOT.injectJavascript(view) 를 호출하게 되는데 <mark style="color:red;">**DOT.injectJavascript(view) 함수가 onStartPage() 기능을 포함하고 있습니다**</mark>.&#x20;
* URL이 변경되고 웹뷰가 inject 될 때에는 onStartPage() 가 호출되지만,  탭 클릭등 URL 의 변경 없는 경우에는 onStartPage() -> logScreen() 순서로 호출되어야 합니다. <mark style="color:red;">단, 주의할 점은 onStartPage와 logScreen의 호출 시점이 너무 짧지 않아야 한다는 것</mark> 입니다. SDK의 onStartPage 함수 로직 실행을 완료하기전에, DOT.logScreen() 이 시간차 없이 호출되며, onStartPage 로직이 모두 처리되지 않고 오버라이트 되는 현상이 발생될 수 있기에, 이러한 경우에는 아래의 예제처럼 시간차를 두어 두개의 함수가 순차적으로 실행될 수 있도록 처리해야 합니다.&#x20;

```javascript
function onStartPageTest(page_id, event) {
    try {
            return new Promise((resolve, reject) => {   
                if (typeof WDOT != 'undefined') {                        
                    WDOT.onStartPage();
                    resolve(); 
                } else if (typeof DOT != 'undefined') {
                    DOT.onStartPage();
                    resolve();  
                }      
            })
            .then(result=>{  
                    setTimeout(()=>{
                        var screen = new Object();
                        screen["page_id"] = page_id;
                        screen["event"] = event; 
                    
                        if (typeof DOT != 'undefined') { 
                            DOT.logScreen(screen); 
                        } else if (typeof WDOT != 'undefined') {
                            WDOT.logScreen(screen); 
                        }     
                    },50);  
            })
            .catch(error => {
                console.error("Error:", error);
            }); 
    } catch (e) {
        console.log(e);
    }
}
```

* 위에서 설명드린 내용을 바탕으로 중요한 포인트를 다시 정리해보면, \
  (1) (웹뷰를 불러오는 화면이 아니라면) 모든 모바일 화면(페이지)가 그려질 때, onStartPage()가 호출되도록 합니다.\
  뒤로 돌아가기 버튼을 클릭했을때도 마찬가지로 onStartPage()가 호출되어야 하며, <mark style="color:red;">**쉽게 말해 일반사용자 입장에서 화면이 바뀌었다고 느껴지는 경우라면 모두 onStartPage()가 호출**</mark>되어야 합니다.\
  \
  (2) SDK 작동 순서 상, onStartPage()가 호출되고 난 이후에 logScreen()이 호출되어야 합니다. \
  즉, onStartPage() 로 PAGE DATA 를 시작하고 logScreen()으로 추가속성을 담아야지, PAGE DATA 가 시작되지도 않았는데 먼저 logScreen()가 호출되지 않도록 해야 합니다.