メインコンテンツまでスキップ

H5とAPP SDKの連携

最終更新 2026/10/03

1. ソリューション概要​

APPには、H5ページで構成されたページが含まれる場合があります。この場合、APP SDKではH5ページのデータを収集できないため、JavaScript SDKを組み合わせて、H5ページでのユーザーの行動を収集する必要があります。JavaScript SDKとAPP SDKのデータの一貫性を保つため、新バージョンのSDKにはデータ連携機能が追加されています：

H5ページではJavaScript SDKでデータを収集しますが、収集したデータは直接送信せず、APP SDK（Android SDK、iOS SDK、Flutter SDK、ReactNative 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はデータを直接送信します。これは連携を有効にしていない状態と同じです。

2. 使用方法​

H5とAPP SDKの連携機能を有効にするには、JavaScript SDKとAPP SDKで次の設定を行う必要があります。SDKの対応バージョンにご注意ください。以前のバージョンを使用している場合は、最新バージョンにアップグレードしてください。

2.1 Android SDKの使用方法​

Android SDK 1.2.0以降のバージョンを使用する必要があります

WebViewの初期化時にsetJsBridgeを呼び出します：

TDAnalytics.setJsBridge(WebView webView);

TencentのX5Webviewに対応する必要がある場合は、Android SDK 2.0.1以降のバージョンを使用し、setJsBridgeForX5WebViewを呼び出します：

TDAnalytics.setJsBridgeForX5WebView(webView);

2.2 iOS SDKの使用方法​

iOS SDK 1.1.1以降のバージョンを使用する必要があります

WKWebView​

iOS 17以降のシステムでは、NSUserDefaultsでグローバルなUserAgentを設定する方式が廃止されました。WKWebViewオブジェクトに、ThinkingData SDK固有のUserAgentを手動で追加する必要があります。追加しないと、H5とネイティブアプリを連携できません。

追加方法は次のとおりです

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.applicationNameForUserAgent = [NSString stringWithFormat:@"%@ %@", config.applicationNameForUserAgent ?: @"", @"/td-sdk-ios"]; 
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

WKWebViewのデリゲートメソッドdecidePolicyForNavigationActionに、次のコードを追加します

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if ([TDAnalytics showUpWebView:webView withRequest:navigationAction.request]) {
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    
    decisionHandler(WKNavigationActionPolicyAllow);
}

UIWebView​

1.SDKの初期化が完了した後、addWebViewUserAgentを呼び出します：

[TDAnalytics addWebViewUserAgent];

2.WebViewの初期化時に、WebViewのタイプに応じて次のように呼び出します：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if ([TDAnalytics showUpWebView:webView withRequest:request]) {
        return NO;
    }
    /*
        other code
    */
    return YES;
}

2.3 Flutter SDKの使用方法​

Flutter SDK 3.1.0-beta.1以降のバージョンを使用する必要があります

WebViewの初期化時にaddJavaScriptChannelを呼び出し、onMessageReceivedコールバックでTDAnalytics.h5ClickHandler();を呼び出します

controller = WebViewController();
controller.addJavaScriptChannel("ThinkingData_APP_Flutter_Bridge", onMessageReceived: (JavaScriptMessage message){
    TDAnalytics.h5ClickHandler(message.message);
});

2.4 ReactNative SDKの使用方法​

ReactNative SDK 3.1.0-beta.1以降のバージョンを使用する必要があります

WebViewの初期化時にinjectedJavaScriptメソッドを呼び出してjsを注入し、onMessageコールバックでTDAnalytics.h5ClickHandler();を呼び出します

<WebView
  ref={webViewRef}
  source={localHtmlFile}
  onMessage={ event => {
    console.log(event.nativeEvent.data);
    TDAnalytics.h5ClickHandler(event.nativeEvent.data);
  }}
  javaScriptEnabled={true}
  injectedJavaScript='window.ThinkingData_APP_ReactNative_Bridge = function(data) { window.ReactNativeWebView.postMessage(data); };'
/>

2.5 JavaScript SDKの使用方法​

JavaScript SDK 2.0.4以降のバージョンを使用する必要があります

  • 初期化パラメータの設定に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", //データアップロードのURL
  send_method: "image", //データのアップロード方式
  useAppTrack: true // APPとH5を連携
});
このページは役に立ちましたか？
このページの内容