应用内H5数据上报

1. H5桥接使用场景

场景1：如何将H5数据同时上报至H5应用和APP应用

一个“春日”活动H5嵌入在多个App端，按照当前方式操作，可以满足下述分析诉求：

• App运营需要看到客户在App内参加H5活动前后的完整链路数据。

• H5活动运营需要看到H5在所有App端内的活动数据。

操作说明

1. 创建两个应用：

• 一个App应用，该App有自己的appKey_app

• 一个Web/H5应用，该Web/H5有自己的appKey_h5

2. SDK配置enableJSBridge=true开启，并在应用WebView页面注入自定义javaScriptProxy。

上报日志

如果此时在H5端触发一个埋点事件

场景2：如何将H5数据仅上报至唯一APP应用中

由于技术架构，一部分页面为H5实现，按照当前方式操作，可以满足下述分析诉求：

• App业务、运营和PD等可以在App数据内看到完整的全链路数据。

操作说明

1. 创建一个App应用，仅有一个appKey_app

2. SDK配置enableJSBridge=true开启，并在应用WebView页面注入自定义javaScriptProxy，详细示例见本章节2.1

3. H5 appKey设置为空，此时H5 SDK会打印警告日志，但不影响发数。并设置aplus-jsbridge-only等于true，关闭H5数据上报

上报日志

如果此时在H5端触发一个埋点事件

场景3：如何将H5数据仅上报给H5应用中

App业务、运营和PD等不希望在App中看到H5的数据

操作说明

1. 创建两个应用：

• 一个App应用，该App有自己的appKey_app

• 一个Web/H5应用，该Web/H5有自己的appKey_h5

2. 不进行任何API的调用，app应用和h5应用分别埋点

上报日志

如果此时在H5端触发一个埋点事件

2. H5桥接原理说明

上述场景1~3存在日志上报的前提是：

• 鸿蒙Next App集成了QuickTracking 鸿蒙Next SDK

• 应用内H5页面集成了QuickTracking H5 SDK

2.1. 鸿蒙Next 应用端代码

桥接API说明

需首先开启SDK配置enableJSBridge=true，否则桥接API调用无效

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

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中设置开启下述接口后，H5中通过aplus.appendMetaInfo中globalproperty或aplus.setMetaInfo中globalproperty设置的全局属性将会同步生效至App原生中。（该接口默认为false）

注意：！！！该API在qt_web_v2.0.12及以后版本开始支持

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

例如：在App中设置全局属性「当前所在城市：北京」，在App内H5中设置全局属性「当前所在城市：上海」，则在H5和App原生中触发的事件的全局属性都将为「当前所在城市：上海」。如果不开启该开关，则H5中设置的全局属性不会再App原生中生效。