페이지 분석

페이지뷰, 페이지 체류시간 분석이 가능합니다.웹페이지가 로딩 완료된 시점에 SDK가 제공하는 함수를 호출하여 쉽게 수행할 수 있습니다.

Wisetracker SDK는 DOT.onStartPage() 함수를 만나면 PAGES 유형의 페이지뷰 이벤트 (DOT.logScreen)를 수집하고 있습니다.

A페이지의 onStartPage() -> A페이지의 DOT.logScreen ->B페이지의 onStartPage() 를 만나면 A페이지의 logScreen이벤트 전송.

위의 형태의 페이지 분석 호출 방식을 유념하여 페이지분석 코드를 삽입 해 주세요.

Android

페이지 분석을 위해서는 각 화면의 이동시에 호출되는 Callback 함수에 다음과 같은 코드의 적용이 필요합니다.

페이지 진입시

DOT.onStartPage(this);

 DOT.onStartPage(this)

Android Hybrid App을 위한 설정 추가

Hybrid App인 경우에만 적용하면 되는 설정으로, WebView로 표시한 웹페이지 내에서 발생하는 이벤트를 측정하기 위해 필요합니다. 웹뷰로 불러온 페이지를 감지할 수 있도록 다음과 같이 setWebView 함수를 호출해주세요.

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    WebView webView = findViewById(R.id.web_view);
    ...
    // SDK 호출
    DOT.setWebView(webView);
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val webView : WebView = findViewById(R.id.web_view)
    ...
    // SDK 호출
    DOT.setWebView(webView)
    }

그리고 WebViewClient 의 각각의 콜백에 아래와 같이 적용해주세요.

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // 1. document 에 DOT 객체 주입.
        WiseLog.d("onPageStarted" + url );
        DOT.injectSdkToHtmlDocument(view,true);
        super.onPageStarted(view,url,favicon);
    } 

    @Override
    public void onPageFinished(WebView view, String url) {
        WiseLog.d("onPageFinished" + url );
        DOT.injectJavascriptWithDomSearch(view,url,true);
        super.onPageFinished(view, url);
    }
});

...
webView.webViewClient = object : WebViewClient() {
      fun onPageStarted(view: WebView?, url: String, favicon: Bitmap?) {
        // 1. document 에 DOT 객체 주입.
        WiseLog.d("onPageStarted$url")
        DOT.injectSdkToHtmlDocument(view)
        super.onPageStarted(view, url, favicon)
    }

    fun onPageFinished(view: WebView?, url: String) {
        WiseLog.d("onPageFinished$url")
        DOT.injectJavascriptWithDomSearch(view, url, true)
        super.onPageFinished(view, url)
    }
}

iOS

각 ViewController 이동 시에 호출되는 delegate 함수에 다음과 같이 기본적인 페이지 분석을 위한 코드를 적용합니다.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    DOT.onStartPage()
}

- (void)viewWillAppear:(BOOL)animated {
	[super viewWillAppear:animated];
	[DOT onStartPage];
}

iOS Hybrid App을 위한 설정 추가

Hybrid 앱의 경우 앱 내에서 WebView 를 사용하여 웹 컨텐츠를 서비스 하기도 합니다. 이와 같이 Webview 에 의해서 보여지는 웹 컨텐츠의 경우에는 위에서 설명된 Native 화면과는 다른 방식으로 동작하기 때문에, 별도의 분석 코드 적용이 필요합니다. 분석 대상 앱이 만약 Hybrid 앱인 경우에는 아래의 코드를 참고하여 웹 컨텐츠도 분석할 수 있도록 적용을 해야합니다.

앱내에서 사용할 WKWebView의 Delegate 함수에 아래와 같이 분석코드를 적용합니다.

extension WebViewController: WKUIDelegate, WKNavigationDelegate {
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    DOT.injectSdk(toHtmlDocument: webView, withStartPage: true );
}
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
    DOT.injectSdk(toHtmlDocument: webView,  withStartPage: false);
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    DOT.injectJavascript(withDomSearch: webView, isOnPageFinished: true)
}

  func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
       ...
      if let url = navigationAction.request.url{
         let absoluteString = url.absoluteString
          if (absoluteString.hasPrefix("jscall-dot")) {
             let request: URLRequest? = navigationAction.request
             DOT.setWkWebView(webView, reqeust: request)            
              decisionHandler(.cancel)
             return;
              }          
               ...
         }     
           ...
}

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
     [DOT injectSdkToHtmlDocument:webView withStartPage:true];
  }

- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation {
     [DOT injectSdkToHtmlDocument:webView withStartPage:false];
   }
 
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {
    NSLog(@"2. didFinishNavigation");
      [DOT injectJavascriptWithDomSearch:webView isOnPageFinished:true];
    }

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
   if([@"jscall-dot" isEqualToString:navigationAction.request.URL.scheme]) {
      NSURLRequest *request = navigationAction.request;
      decisionHandler(WKNavigationActionPolicyCancel);
       [DOT setWkWebView:webView reqeust:request];
       return;

   }
}

모바일앱내 웹뷰와 PC 혹은 모바일웹뷰로 동시에 사용하는 화면인 경우 아래와 같은 웹킷뷰를 포함한 viewController의 viewWillApeear에 아래와 같이 적용해주세요.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    webView.evaluateJavaScript("navigator.userAgent") { (userAgent, error) in
         if let ua = userAgent {
            self.webView.customUserAgent = ua as! String + " RW2SDK"
         }
     }
}

- (void)viewWillAppear:(BOOL)animated {
 [super viewWillAppear:animated];
 [self.webView evaluateJavaScript:@“navigator.userAgent” completionHandler:^(NSString *aUserAgent, NSError *aError) {
     NSString *sCustomUserAgent = @” RW2SDK”;
     if (aUserAgent.length > 0 && aError == nil) {
       sCustomUserAgent = [NSString stringWithFormat:@“%@ %@“, aUserAgent, sCustomUserAgent];
     }
     self.webView.customUserAgent = sCustomUserAgent;
   }];
}

React-Native

사용하는 라우터의 location 정보가 바뀔때마다 onStartPage를 호출 해 주어야 합니다. 아래는 React Navigation 라이브러리를 사용할때의 예제입니다.

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';

const App = () => {

const navigationRef = useRef();

  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={async () => {
   
     /* Activity 감지를 위한 예제 코드 */
      NativeModules.DotReactBridge != null &&
        /*로케이션 정보가 바뀔때마다 onStartPage 호출*/
        (NativeModules.DotReactBridge.onStartPage(),    
        NativeModules.DotReactBridge.logScreen(
          JSON.stringify({
            event: /*페이지 custom 이벤트명*/,
            pi: /*location 정보*/,
          }),
        ));
    }}>
  <Stack.Navigator>
    <Stack.Screen
      name="Main"
      component={Main}
    />
    <Stack.Screen
      name="Login"
      component={Login}
    />
  </Stack.Navigator>
</NavigationContainer>
  );
};

export default App;

ReactNative Hybrid App을 위한 설정 추가

Hybrid App인 경우에만 적용하면 되는 설정으로, WebView로 표시한 웹페이지 내에서 발생하는 이벤트를 측정하기 위해 필요합니다. 웹뷰로 불러온 페이지를 감지할 수 있도록 webview 컴포넌트에 다음과 같이 onLoadStart 와 onMessage 를 설정 해 줍니다.

onLoadStart={(syntheticEvent)=>{ 
	if( NativeModules.DotReactBridge != null ){  
	/**
	웹 페이지가 로딩 시작될때, onStartPage 호출 
	**/
	NativeModules.DotReactBridge.onStartPage(); 
	} 
}}   


onMessage={(event) => { 
	if( event.nativeEvent.data !== undefined ){
	// 데이터 수신은 string으로 전달되므로 json으로 변환 
	let webData = JSON.parse(event.nativeEvent.data);
		if( webData.method ){
			switch(webData.method){
			
			// setUser call
			case "setUser" : 
			NativeModules.DotReactBridge.setUser(JSON.stringify(webData.data)); 	
			break;
			
			// logEvent call 
			case "logEvent" : 
			NativeModules.DotReactBridge.logEvent(JSON.stringify(webData.data)); 	
			break;
			
			// logScreen call 
			case "logScreen" : 
			NativeModules.DotReactBridge.logScreen(JSON.stringify(webData.data));
			break;
			
			// logPurchase	
			case "logPurchase" : 
			NativeModules.DotReactBridge.logPurchase(JSON.stringify(webData.data));
			break;
			} 
		}  
	} 
}}

Flutter

고객사 앱에서 페이지 네비게이션으로 RouteObserver Class를 사용하고 있다면 아래와 같이 적용해 주세요.

class MyRouteObserver extends RouteObserver<PageRoute<dynamic>> {
  

  void _sendScreenView(PageRoute<dynamic> route) {
    var screenName = route.settings.name;
     
    // 화면 전환 시점에 onStartPage 함수 호출.  
    DOT.onStartPage();
    print('DOT.onStartPage() Called  $screenName');
     
  }

  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    if (route is PageRoute) {
      _sendScreenView(route);
    }
  } 

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    if (previousRoute is PageRoute && route is PageRoute) {
      _sendScreenView(previousRoute);
    }
  }
}

화면 이동에 대한 페이지 분석코드를 작성할 때의 예제를 아래에서 확인할 수 있습니다. screen2에서 screen3으로 화면 전환을 했을 때 위에 기재된 MyRouteObserver에 onStartPage()가 먼저 호출 되고, screen 에서 build가 호출 되고 DOT.logScreen 호출 순서로 동작합니다.

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //페이지 관련 정보 세팅
    var screen = {};
    screen["pi"] = "MAIN";
    DOT.logScreen(screen);
    
    return Scaffold(appBar: AppBar(), body: Center(child: Text('Screen 2')));
  }
}

class Screen3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //페이지 관련 정보 세팅
    var screen = {};
    screen["pi"] = "DTL";
    DOT.logScreen(screen);

    return Scaffold(appBar: AppBar(), body: Center(child: Text('Screen 3')));
  }
}

Website

페이지 분석은 웹페이지가 로딩 완료된 시점에 SDK가 제공하는 함수를 호출하여 쉽게 수행할 수 있습니다. Javascript 타입의 경우, 공통적으로 모든 소스 파일에서 참조하는 공통 footer 파일에 적용하는 것을 권장합니다. JSX 타입의 경우, 위의 SDK 초기화 작업에서와 마찬가지로 컴포넌트 상속 관계를 응용하여 ComponentDidMount 함수 또는 두번째 인자가 빈배열([])인 useEffect에 적용하는 것을 권장합니다.

<script  type="text/javascript"  defer>
	WDOT.logScreen(window.WDOTParam || {});
</script>

componentDidMount() {
    WDOT.logScreen({});
}

Previous인앱 이벤트 설정 Next커스텀 차원(Custom Dimension)

Last updated 1 year ago

Was this helpful?