# H5와 APP SDK의 연동
# 소개
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의 로그인, 로그아웃, identify 인터페이스는 APP SDK의 유저 ID를 변경할 수 없습니다. H5와 APP SDK가 연결되어 있는 경우, JavaScript SDK의 위의 인터페이스를 통해 데이터의 유저 ID를 변경하는 것은 할 수 없습니다.
- H5와 APP SDK가 연동되어 있을 때, 작동 환경에 APP SDK가 존재하지 않는 경우, JavaScript SDK가 직접 데이터를 전송합니다. 이는 연동되지 않은 상태와 동일합니다.
# 작성 방법
H5와 APP SDK를 액세스하는 기능을 활성화하고 싶다면, JavaScript SDK와 APP SDK를 다음과 같이 설정해야 합니다. SDK의 버전에 주의하세요. 오래된 버전을 사용하는 사용자는 최신 버전으로 업그레이드해 주세요.
# 2.1 안드로이드 클라이언트 SDK 사용 방법
Android SDK1.2.0 같거나 큰 버전을 지원합니다.
WebView를 초기 설정할 때 setJsBridge를 호출하다：
TDAnalytics.setJsBridge(WebView webView);
텐센트의 X5Webview를 지원하기 위해서는 Android SDK 2.0.1 이상의 버전이 필요하며, setJsBridgeForX5WebView를 호출해주세요.
TDAnalytics.setJsBridgeForX5WebView(webView);
# 2.2 iOS 클라이언트 SDK 사용 방법
iOSSDK1.1.1 버전 이상을 지원합니다.
SDK를 초기화한 후 addWebViewUserAgent를 호출하십시오:
[TDAnalytics addWebViewUserAgent];
2.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 자바스크립트 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
});