인앱 이벤트 태깅(Tagging)

인앱 이벤트를 태깅하는 과정에서 알아두면 좋은 기본적인 SDK 작동 원리에 대해 안내합니다.

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

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

• logScreen(), logEvent(), logPurchase() 함수가 이벤트의 성격(유형)에 맞춰서 다르게 사용되고 있습니다. 일반적으로 화면(페이지)를 조회하는 것과 관련된 이벤트는 logScreen() 행동과 관련된 이벤트는 logEvent() 구매와 관련된 이벤트는 logPurchase() 를 이용하고 있습니다. 자주 실수가 발생하는 부분이 logScreen()을 호출해야하는데 logEvent()를 호출하는 경우나 그 반대의 경우가 많습니다.

• 한번에 예정된 이벤트를 다 태깅하고 나중에 적용된 태깅 코드의 정상 여부를 확인하기보다는 우선 제일 간단한 logScreen() 이벤트 하나 + logEvent() 이벤트 하나를 선정해서 태깅하고 실제 태깅이 잘 적용되어 데이터가 수집되는지 확인한 이후에 남은 이벤트를 태깅하는 것을 권장드리고 싶습니다. 예를들어, w_click_banner 또는 w_click_menu 와 같은 logEvent() 이벤트 + w_view_product 또는 view_xxx 와 같은 logScreen() 이벤트를 하나씩 먼저 태깅하고, 실제 와이즈트래커 대시보드의 SDK 데이터 검증 메뉴를 이용해서 실제 태깅 코드가 잘 적용되어 이벤트 수집이 되는지를 확인하고 나면 전체적으로 SDK 가 어떻게 작동되는지 이해하실 수 있습니다. 이렇게 하나만이라도 먼저 태깅과 확인 과정을 거친 이후에 본격적으로 진행하시는것을 추천드립니다.

• 태깅된 이벤트가 실제로 와이즈트래커로 잘 수집되고 있는지 확인할 수 있도록 와이즈트래커 대시보드의 SDK 데이터 검증 메뉴 기능을 제공하고 있습니다. 태깅 코드를 적용하고 확인하는 과정에서 이용하면 큰 도움이 될 것 입니다. 자세한 사용 방법은 가이드 문서를 참고해주세요. (바로가기)

• 와이즈트래커 SDK가 실제 고객사의 모바일 앱 안에서 어떤식으로 동작하는지 그림으로 표현하였습니다. 그림을 통해 logEvent() 와 logScreen()이 어떻게 작동하는지, 또는 웹뷰의 경우에는 어떻게 처리가 되어야 하는지 등 전반적인 작동의 흐름을 이해하는데 참고할 수 있습니다.

  

  [그림 1] 와이즈트래커 SDK 동작 순서

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

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

1. Native 앱의 Page Data

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

• onStartPage() 함수가 실행되어 Page Data를 생성하고 나서, logScreen() 함수를 이용하여 추가적인 Page Data를 넣어주지 않으면 기본적으로 빈(Blank) Page 데이터가 수집됩니다.

  

  [그림 2] 빈(Blank) Page Data가 SDK 데이터 검증 메뉴에서 보여지는 예시
• 비어있는 Page Data에 추가적인 데이터를 넣고 싶을때 이용하는 함수가 바로 logScreen() 함수입니다. ============================================= // 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])

  

  [그림 3] logScreen()으로 추가 속성이 포함된 Page Data가 SDK 데이터 검증 메뉴에서 보여지는 예시

2. 웹뷰의 Page Data

• 위의 [그림1] 을 참고하여 보시면 Screen A,B,C,D 의 경우 화면이 이동할때마다 DOT.onStartPage() -> DOT.logScreen() 순서로 호출되는것을 확인할 수 있습니다.

• 웹뷰를 사용하는 앱의 경우에는 onStartPage() 를 직접 호출하지 않아도 됩니다. 웹뷰로 불러온 페이지를 감지할 수 있도록 DOT.setWebView 를 통해 웹뷰를 호출하고, 웹뷰가 모두 띄워지면 DOT.injectJavascript(view) 를 호출하게 되는데 DOT.injectJavascript(view) 함수가 onStartPage() 기능을 포함하고 있습니다.

• URL이 변경되고 웹뷰가 inject 될 때에는 onStartPage() 가 호출되지만, 탭 클릭등 URL 의 변경 없는 경우에는 onStartPage() -> logScreen() 순서로 호출되어야 합니다. 단, 주의할 점은 onStartPage와 logScreen의 호출 시점이 너무 짧지 않아야 한다는 것 입니다. SDK의 onStartPage 함수 로직 실행을 완료하기전에, DOT.logScreen() 이 시간차 없이 호출되며, onStartPage 로직이 모두 처리되지 않고 오버라이트 되는 현상이 발생될 수 있기에, 이러한 경우에는 아래의 예제처럼 시간차를 두어 두개의 함수가 순차적으로 실행될 수 있도록 처리해야 합니다.

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()가 호출되어야 하며, 쉽게 말해 일반사용자 입장에서 화면이 바뀌었다고 느껴지는 경우라면 모두 onStartPage()가 호출되어야 합니다. (2) SDK 작동 순서 상, onStartPage()가 호출되고 난 이후에 logScreen()이 호출되어야 합니다. 즉, onStartPage() 로 PAGE DATA 를 시작하고 logScreen()으로 추가속성을 담아야지, PAGE DATA 가 시작되지도 않았는데 먼저 logScreen()가 호출되지 않도록 해야 합니다.