# H5 and APP SDK Get Through

# I. Introduction to the Program

In APP, there may be some pages consisting of H5 pages. At this time, APP SDK can not collect data from H5 pages. It is necessary to use JavaScript SDK to collect user's behavior on H5 pages. In order to ensure data consistency between JavaScript SDK and APP SDK, data connection function is added into the new version of SDK:

The H5 page uses JavaScript SDK for data collection. After collecting the data, it is not sent directly, but sent to the server through the APP SDK (that is, Android SDK and iOS SDK). The APP SDK will adjust the data collected by the JavaScript SDK. The rules are as follows:

Retains the #timepassed in by the JavaScript SDK, that is, the time of the event is based on the time that triggered event tracking.
Use the APP SDK #account_idand #distinct_id, subject to the user maintained by the APP SDK.
Add the preset attribute of the APP SDK. If it conflicts with the preset attribute of JavaScript, the preset attribute of the APP SDK will override the conflicting value, such as the #libfield, and the value of the APP SDK will override the value of the JavaScript SDK.
Public property of the APP SDK: If it conflicts with the property passed in JavaScript, the native public property value is discarded; if the JavaScript SDK does not have the property, it is added to the reported data
The timeEventinterface in the APP SDK can take effect on events collected by the JavaScript SDK.
The login, logout, and identify interfaces in the JavaScript SDK cannot modify the user ID in the APP SDK. In the case of H5 and the APP SDK, the user ID of the data cannot be modified through the above interface in the JavaScript SDK.
When the switch between H5 and APP SDK is turned on, if the APP SDK does not exist in the running environment, the JavaScript SDK will directly report the data, which is equivalent to the state of not turning on and turning on.

# II. Usage

If you need to turn on the H5 and APP SDK connection function, you need to configure the JavaScript SDK and APP SDK as follows. **Please pay attention to the applicable version of the SDK **, and please use the historical version to upgrade to the latest version.

# 2.1 Use of Android SDK

Android SDK requires 1.2.0 and later versions

Call setJsBridgewhen initializing WebView:

ThinkingAnalyticsSDK.sharedInstance(getApplicationContext()).setJsBridge(WebView webView);

If you need to support Tencent's X5Webview, you need the Android SDK to use 2.0.1 and later versions, call setJsBridgeForX5WebView:

ThinkingAnalyticsSDK.sharedInstance(context, appId).setJsBridgeForX5WebView(webView);

# 2.2 Use of iOS SDK

iOS SDK requires 1.1.1 and later versions

After initializing the SDK, call the addWebViewUserAgent:

   [[ThinkingAnalyticsSDK sharedInstance] addWebViewUserAgent];

When initializing WebView, make the following call based on the type of WebView:

If it is UIWebView


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if ([[ThinkingAnalyticsSDK sharedInstance] showUpWebView:webView WithRequest:request]) {
        return NO;
    }
     // Add your logic code here
    return YES;
}

If it is WKWebView

Set the customUserAgent property of WKWebView as follows:

    _wkWebView.customUserAgent = @" /td-sdk-ios";

If there is a self-contained UA, please splice the " /td-sdk-ios" and add the following code in decidePolicyForNavigationAction


- (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 Use of JavaScript SDK

JavaScript SDK requires 1.0.6 and later versions

Add useAppTrack: trueto the initialization parameter configuration, as follows:

(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", //System Assigned APPID
  name: "ta", //The global call variable name can be set at will and used for subsequent calls
  sdkUrl: "http://www.a.com/thinkingdata.js", //Statistical script URL
  serverUrl: "https://ta-receiver.thinkingdata.io:9080/sync_js", //URL for data upload
  send_method: "image", //Data upload mode
  useAppTrack: true // Get through APP and H5
});

← JavaScript SDK User Guide Unity SDK Compliance Guide →