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