Quick Tracking:アプリ内 H5 データレポート

1. H5 ブリッジの利用シナリオ

シナリオ 1：H5 データを H5 アプリケーションと APP アプリケーションに同時にレポートする方法

"春の日の活動" H5 は、複数の App 端末に埋め込まれており、現在のモードで動作して、次の分析要件を満たします。

• App オペレーターは、顧客がアプリで H5 アクティビティに参加する前後の完全なリンクデータを確認する必要があります。

• すべてのアプリの H5 アクティビティデータが表示されます。

操作

1. 2 つのアプリケーションを作成します。

• 独自の appKey_app を持つアプリ

• 独自の appKey_h5 を持つ Web/H5 アプリケーション

2. SDK 構成 enableJSBridge=true が有効になっており、カスタム javaScriptProxy がアプリケーション WebView ページに挿入されます。

レポートログ

この時点で H5 側でトラッキングイベントがトリガーされた場合

シナリオ 2：H5 データを固有の APP アプリケーションにレポートする方法

技術アーキテクチャにより、一部のページは H5 によって実装されています。現在のモードに基づいて、次の分析要件を満たすことができます。

• アプリデータで、アプリのビジネス、運用、および PD の完全なデータを表示できます。

操作

1. appKey_app が 1 つだけのアプリを作成します

2. SDK 構成 enableJSBridge=true が有効になっており、カスタム javaScriptProxy がアプリケーション WebView ページに挿入されます。詳細については、2.1 をご参照ください。

3. H5 appKey は空のままにします。この場合、H5 SDK は警告ログを出力しますが、送信数には影響しません。また、aplus-jsbridge-only を true に設定して、H5 データレポートを無効にします

レポートログ

この時点で H5 側でトラッキングイベントがトリガーされた場合

シナリオ 3：H5 データを H5 アプリケーションのみにレポートする方法

アプリのビジネス、運用、および PD は、アプリで H5 データを確認したくありません

操作

1. 2 つのアプリケーションを作成します。

• 独自の appKey_app を持つアプリ

• 独自の appKey_h5 を持つ Web/H5 アプリケーション

2. API 呼び出しは行われません。アプリアプリケーションと h5 アプリケーションは個別に追跡されます。

レポートログ

この時点で H5 側でトラッキングイベントがトリガーされた場合

2. H5 ブリッジの原則の説明

上記のシナリオ 1 ～ 3 でログをレポートするための前提条件は次のとおりです。

• HarmonyOS Next アプリは QuickTracking HarmonyOS Next SDK を統合しています

• アプリ内 H5 ページは QuickTracking H5 SDK を統合しています

2.1. HarmonyOS Next アプリケーションコード

ブリッジ API の説明

最初に、SDK 構成 enableJSBridge=true を有効にする必要があります。有効にしない場合、ブリッジ API 呼び出しは無効になります。

import { createJSBridgeProxy } from '@quicktracking/analytics';

// WebviewController を引数に取る createJSBridgeProxy 関数を定義します。
function createJSBridgeProxy(controller: WebviewController)

次の表は、上記の文のパラメーターについて説明しています。

次の図に示すサンプルコードを使用し、コード内のパラメーターを構成します。

import { webview } from '@kit.ArkWeb'
import { BusinessError } from '@kit.BasicServicesKit'
import { promptAction } from '@kit.ArkUI'
import { createJSBridgeProxy } from '@quicktracking/analytics';

@Entry
@Component
struct WebPage {
  @State message: string = 'Hello World';
  controller: webview.WebviewController = new webview.WebviewController();
  responseWeb: WebResourceResponse = new WebResourceResponse();

  onPageShow(): void {
    // 他のユーザー定義 JSProxy を導入する必要がある場合
    // const qtJSProxy:QTJSProxyObject =  createJSBridgeProxy(this.controller);
    // this.controller.registerJavaScriptProxy(qtJSProxy.object, qtJSProxy.name, qtJSProxy.methodList)
    // this.controller.registerJavaScriptProxy(this.testObjtest,"objName",["test"],["asyncTestBool"]);
  }

  build() {
    Column() {
      Web({src: $rawfile('index.html'), controller: this.controller})
        .javaScriptAccess(true)
        .javaScriptProxy(createJSBridgeProxy(this.controller))
    }
    .height('100%')
    .width('100%')
  }
}

2.2. H5 アプリケーション側コード

APP チャネルのみを介してログをレポートし、H5 チャネルレポートログ API を無効にします

aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-jsbridge-only', true]
});

注意:! ! ! H5 が aplus-jsbridge-only を true に設定した場合、H5 SDK はトラッキングイベントをレポートすることを禁止されます。アプリケーション以外の H5 ページを確認し、設定しないでください

H5 グローバル属性はグローバルに有効になります

H5 で次の API 操作を有効にすると、aplus.appendMetaInfo の globalproperty または aplus.setMetaInfo の globalproperty を使用して構成されたグローバルプロパティは、ネイティブアプリと同期されます。（このインターフェースのデフォルトは false です。）

注意:! ! ! この API は qt_web_v2.0.12 以降でサポートされています

aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-globalproperty-sync-enable', true]
});

たとえば、アプリでグローバル属性「現在の都市：北京」を設定し、アプリ H5 でグローバル属性「現在の都市：上海」を設定した場合、H5 およびアプリネイティブでトリガーされるイベントのグローバル属性は「現在の都市：上海」になります。このスイッチをオンにしない場合、H5 で設定されたグローバル属性はネイティブアプリでは有効になりません。