menu
Is this helpful?

# 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 によって収集されたデータを調整します:

  1. JavaScript SDK によって渡された #time を保持します。イベントの時間は、トラッキングがトリガーされた時間に基づいています。
  2. APP SDK によって使用されているユーザー体系に従って、APP SDK の #account_id および #distinct_id を使用します。
  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を呼び出す:

TDAnalytics.setJsBridge(WebView webView);

テンセントのX5Webviewを対応するために、Android SDK 2.0.1以降のバージョンが必要で、setJsBridgeForX5WebViewを呼び出してください。

TDAnalytics.setJsBridgeForX5WebView(webView);

# 2.2 iOS SDK 使用方法

iOSSDK は1.1.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

WKWebViewcustomUserAgentプロパティは:

    _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
});