# H5와 APP SDK의 연동
# 1. 소개
APP에서 일부 페이지가 H5로 구성되어 있는 경우가 있습니다. 현재 시점에서 APP SDK는 H5 페이지의 데이터를 수집할 수 없지만, JavaScript SDK를 통해 H5 페이지에서 사용자의 행동을 수집할 수 있습니다. JavaScript SDK와 APP의 데이터를 일관되게 유지하기 위해, 새 버전의 SDK에는 데이터 연결 기능이 추가되었습니다.
H5 페이지는 데이터 수집에 JavaScript SDK를 사용하며, 수집된 데이터는 직접 전송되지 않고, APP SDK(Android SDK 및 iOS SDK)를 통해 서버로 전송됩니다. APP SDK는 JavaScript SDK에 의해 수집된 데이터를 조정합니다:
- JavaScript SDK에 의해 전달된
#time을 유지합니다. 이벤트의 시간은 트래킹이 트리거된 시간을 기반으로 합니다. - APP SDK에 의해 사용되는 사용자 체계를 따라, APP SDK의
#account_id및#distinct_id를 사용합니다. - APP SDK의 프리셋 프로퍼티를 추가할 때, JavaScript의 프리셋 프로퍼티와 다른 경우, APP SDK의 프리셋 프로퍼티는 #lib 필드 등의 값을 덮어쓰며, APP SDK의 값은 JavaScript SDK의 값을 덮어씁니다.
- APP SDK의 공통 프로퍼티: JavaScript에 의해 전송된 프로퍼티와 다른 경우, 원래의 공통 프로퍼티 값은 폐기됩니다; JavaScript SDK에 해당 프로퍼티가 없는 경우, 전송된 데이터에 추가됩니다.
- APP SDK의 timeEvent 인터페이스는 JavaScript SDK에 의해 수집된 이벤트에 영향을 줄 수 있습니다.
- JavaScript SDK의 login, logout, identify 인터페이스는 APP SDK의 사용자 ID를 변경할 수 없습니다. H5와 APP SDK가 연결되어 있는 경우, JavaScript SDK의 위 인터페이스를 통해 데이터의 사용자 ID를 변경할 수 없습니다.
- H5와 APP SDK가 연동되어 있는 경우, 작동 환경에 APP SDK가 존재하지 않는 경우, JavaScript SDK가 직접 데이터를 전송합니다. 이는 연동되지 않은 상태와 같습니다.
# 2. 사용 방법
H5와 APP SDK를 연결하는 기능을 활성화하고 싶은 경우, JavaScript SDK와 APP SDK를 다음과 같이 설정해야 합니다. SDK의 버전에 주의하세요. 이전 버전을 사용하는 사용자는 최신 버전으로 업그레이드해야 합니다.
# 2.1 Android SDK 사용 방법
Android SDK는 1.2.0 이상의 버전을 지원합니다.
WebView 초기 설정 시 setJsBridge를 호출합니다:
TDAnalytics.setJsBridge(WebView webView);
텐센트의 X5Webview를 지원하기 위해서는 Android SDK 2.0.1 이상의 버전이 필요하며, setJsBridgeForX5WebView를 호출해야 합니다.
TDAnalytics.setJsBridgeForX5WebView(webView);
# 2.2 iOS SDK 사용 방법
iOS SDK는 1.1.1 이상의 버전을 지원합니다.
- SDK 초기 설정 후
addWebViewUserAgent를 호출합니다:
[TDAnalytics addWebViewUserAgent];
WebView초기 설정 시,WebView의 타입에 기반해 다음 설정을 진행합니다.
UIWebView
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
if ([TDAnalytics showUpWebView:webView withRequest:navigationAction.request]) {
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
decisionHandler(WKNavigationActionPolicyAllow);
}
WKWebView
WKWebView의 customUserAgent 속성은：
_wkWebView.customUserAgent = @" /td-sdk-ios";
자체 UA를 가지고 있는 경우, "/td-sdk-ios"를 연결하여 decisionPolicyForNavigationAction에 다음 코드를 추가해주세요.
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
if ([[ThinkingAnalyticsSDK sharedInstance] showUpWebView:webView WithRequest:navigationAction.request]) {
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
// add your logic code here
decisionHandler(WKNavigationActionPolicyAllow);
}
# 2.3 JavaScript SDK 사용 방법
JavaScript SDK는 1.0.6 이상의 버전을 지원합니다.
- 초기화 파라미터 구성에 useAppTrack: true를 추가합니다:
(function(param) {
var p = param.sdkUrl,
n = param.name,
w = window,
d = document,
s = "script",
x = null,
y = null;
w["ThinkingDataAnalyticalTool"] = n;
w[n] =
w[n] ""
function(a) {
return function() {
(w[n]._q = w[n]._q "" []).push([a, arguments]);
};
};
var methods = [
"track",
"quick",
"login",
"logout",
"trackLink",
"userSet",
"userSetOnce",
"userAdd",
"userDel",
"setPageProperty"
];
for (var i = 0; i < methods.length; i++) {
w[n][methods[i]] = w[n].call(null, methods[i]);
}
if (!w[n]._t) {
(x = d.createElement(s)), (y = d.getElementsByTagName(s)[0]);
x.async = 1;
x.src = p;
y.parentNode.insertBefore(x, y);
w[n].param = param;
}
})({
appId: "APP_ID", //APPID allocated by the system ID
name: "ta", //The global call variable name can be set arbitrarily and used in subsequent calls.
sdkUrl: "http://www.a.com/thinkingdata.js", //record script URL
serverUrl: "https://global-receiver-ta.thinkingdata.cn:9080/sync_js", //data upload URL
send_method: "image", //data upload URL
useAppTrack: true // connect APP and H5
});