# H5 与 APP SDK 打通

# 一、方案介绍

在 APP 当中，可能会有一些页面是由 H5 页面所构成的，此时 APP SDK 无法对 H5 页面进行数据采集，需要搭配使用 JavaScript SDK 对用户在 H5 页面的行为进行采集，为了保证 JavaScript SDK 与 APP SDK 的数据保持一致，在新版本 SDK 中加入了数据打通功能：

H5 页面使用 JavaScript SDK 进行数据采集，采集到数据后不直接发送，而是通过 APP SDK（即 Android SDK 与 iOS SDK）发送到服务器。APP SDK 会对 JavaScript SDK 采集的数据进行调整，规则如下：

保留 JavaScript SDK 传入的 #time，即事件的时间以触发埋点的时间为准
使用 APP SDK 的#account_id 与 #distinct_id，以 APP SDK 维护的用户为准
加入 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 将会直接上报数据，等同于未开启打通的状态。

# 二、使用方法

如需开启 H5 与 APP SDK 打通功能，需要在 JavaScript SDK 与 APP SDK 进行如下配置，请注意 SDK 的适用版本，请使用历史版本的用户升级至最新版本。

# 2.1 Android SDK 使用方法

Android SDK 需要使用 1.2.0 及之后的版本

在初始化 WebView 时调用setJsBridge：

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

如果需要支持腾讯的X5Webview，需要 Android SDK 需要使用 2.0.1 及之后的版本，调用setJsBridgeForX5WebView：

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

# 2.2 iOS SDK 使用方法

iOS SDK 需要使用 1.1.1 及之后的版本

1.在初始化完 SDK 之后，调用addWebViewUserAgent：

   [[ThinkingAnalyticsSDK sharedInstance] addWebViewUserAgent];

2.在初始化 WebView 时，根据WebView的类型做如下调用：

如果是 UIWebView


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if ([[ThinkingAnalyticsSDK sharedInstance] showUpWebView:webView WithRequest:request]) {
        return NO;
    }
     // 在这里添加您的逻辑代码
    return YES;
}

如果是 WKWebView

设置 WKWebView 的 customUserAgent 属性如下：

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

如果有自带 UA 请拼接下 " /td-sdk-ios"，并在 decidePolicyForNavigationAction 中添加下列代码


- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if ([[ThinkingAnalyticsSDK sharedInstance] showUpWebView:webView WithRequest:navigationAction.request]) {
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    // 在这里添加您的逻辑代码
    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
  name: "ta", //全局的调用变量名，可以任意设置，后续的调用使用该名称即可
  sdkUrl: "http://www.a.com/thinkingdata.js", //统计脚本URL
  serverUrl: "https://global-receiver-ta.thinkingdata.cn:9080/sync_js", //数据上传的URL
  send_method: "image", //数据上传方式
  useAppTrack: true // 打通 APP 与 H5
});

← 更新日志客户端 SDK 常见问题 →