# 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 采集的数据进行调整,规则如下:

  1. 保留 JavaScript SDK 传入的 #time,即事件的时间以触发埋点的时间为准
  2. 使用 APP SDK 的#account_id#distinct_id,以 APP SDK 维护的用户为准
  3. 加入 APP SDK 的预置属性,如果与 JavaScript 的预置属性冲突,则 APP SDK 的预置属性将覆盖冲突值,比如#lib字段,APP SDK 的值会覆盖 JavaScript SDK 的值
  4. APP SDK 的公共属性:如果与 JavaScript 传入的属性冲突,则丢弃原生公共属性值;如果 JavaScript SDK 没有该属性,则加入到上报数据中
  5. APP SDK 中的timeEvent 接口可以对 JavaScript SDK 采集的事件生效
  6. JavaScript SDK 中的 login、logout、identify 接口无法修改 APP SDK 中的用户 ID,在 H5 与 APP SDK 打通的情况下,在 JavaScript SDK 中通过上述接口无法对数据的用户 ID 进行修改
  7. 当开启 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: "http://receiver.ta.thinkingdata.cn:9080/sync_js", //数据上传的URL
  send_method: "image", //数据上传方式
  useAppTrack: true // 打通 APP 与 H5
});