Wisetracker Docs
웹사이트블로그콘솔 바로가기도입 문의이용 문의
🧑‍💻 개발자 가이드
🧑‍💻 개발자 가이드
  • 와이즈트래커 개발자 가이드
  • quick start
    • 앱 광고 트래킹을 위한 필수 지식
    • SDK 설정 전 기초 진단
    • SDK 설정 후 체크리스트
      • Android
      • iOS
      • ReactNative
      • Flutter
      • Unity
      • Cordova
      • Cocos2d-x
      • Web
    • SDK 데이터 검증
    • 이벤트 발생 현황
  • SDK 연동
    • Android
      • SDK 삽입
      • 필수 이벤트 설정
      • App Link 설정
      • Android 12 ADID 변경사항
    • iOS
      • SDK 삽입
      • 필수 이벤트 설정
      • App Store '개인정보 세부 사항' 가이드
      • Universal Link 설정
    • HybridApp WebView
      • SDK 삽입
      • 필수 이벤트 설정
    • React Native
      • React Native 플러그인 연동
      • 인앱 분석 API
      • AOS 데이터 검증
      • iOS 데이터 검증
    • Flutter
      • Flutter 플러그인 연동
      • AOS 데이터 검증
      • iOS 데이터 검증
    • Unity
      • Unity 플러그인 연동
      • 인앱 이벤트 API
      • AOS 데이터 검증
      • iOS 데이터 검증
    • Website
      • Javascript SDK Integration
      • 웹사이트 이벤트 분석하기
    • CPC 광고 분석 연동
      • Web-To-App SDK 적용
      • App 으로 이동시키기
  • 앱심사 개인정보 처리 가이드
    • SDK 개인정보 처리 가이드
  • SDK 데이터 검증
    • Android 데이터 검증
    • iOS 데이터 검증
    • 웹사이트 데이터 검증
  • In-App Event
    • 인앱 이벤트 설정
      • 페이지 분석
      • 커스텀 차원(Custom Dimension)
    • 인앱 이벤트 리스트
      • Basic : 공통 이벤트
      • Messaging : 푸시/인앱 메시지
      • e-Commerce : 이커머스
      • Education : 교육
      • Travel : 여행 및 레저
      • Entertainment : 엔터테인먼트
      • Game : 게임
      • Fintech : 금융
      • Mobility : 모빌리티
    • 인앱 이벤트 태깅(Tagging)
  • Google Tag Manager 연동
    • 연동 방법
  • Server-to-Server 연동
    • 연동 방법
    • 연동 이벤트
    • 연동 데이터 요약
  • 푸시메세지 가이드
    • 앱 푸시메시지 연동
      • Android
        • FCM 인증서 설정
        • 대시보드 설정
        • SDK 설치 및 API 적용
        • 푸시 알림 데이터 이용
      • iOS
        • APNS 설정
        • 대시보드 설정
        • SDK 설치 및 API 적용
        • 푸시 알림 데이터 이용
      • React Native
        • 준비 사항 안내
        • Android 기초 설정
        • iOS 기초 설정
        • ReactNative 푸시메세지 설정
      • Flutter
        • 준비 사항 안내
        • Android 기초 설정
        • iOS 기초 설정
        • Flutter 푸시메세지 설정
    • 푸시 알림 데이터 이용
Powered by GitBook
On this page

Was this helpful?

  1. In-App Event

인앱 이벤트 태깅(Tagging)

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

PreviousMobility : 모빌리티Next연동 방법

Last updated 16 days ago

Was this helpful?

본 문서는 와이즈트래커 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()이 어떻게 작동하는지, 또는 웹뷰의 경우에는 어떻게 처리가 되어야 하는지 등 전반적인 작동의 흐름을 이해하는데 참고할 수 있습니다.

    • 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 데이터가 수집됩니다.

  • 비어있는 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])

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()가 호출되지 않도록 해야 합니다.

바로가기
[그림 1] 와이즈트래커 SDK 동작 순서
[그림 2] 빈(Blank) Page Data가 SDK 데이터 검증 메뉴에서 보여지는 예시
[그림 3] logScreen()으로 추가 속성이 포함된 Page Data가 SDK 데이터 검증 메뉴에서 보여지는 예시