Quick Tracking:In-application H5 Data Reporting

1. H5 Bridge Usage Scenarios

Scenario 1: How to report H5 data to H5 applications and APP applications at the same time

A "Spring Day" activity H5 is embedded in multiple App terminals and operated in the current mode to meet the following analysis requirements:

• App operators need to see the complete link data before and after customers participate in H5 activities in the app.

• H5 activity data of all apps is displayed.

Operations

1. Create two applications:

• An app that has its own appKey_app

• A Web/H5 application that has its own appKey_h5

2. SDK configuration enableJSBridge=true is enabled and custom javaScriptProxy is injected into the application WebView page.

Report logs

If a tracking event is triggered on the H5 side at this time

Scenario 2: How to report H5 data to a unique APP application

Due to the technical architecture, some pages are implemented by H5. Based on the current mode, the following analysis requirements can be met:

• You can view the complete data of the app business, operation, and PD in the app data.

Operations

1. Create an app with only one appKey_app

2. SDK configuration enableJSBridge=true is enabled and custom javaScriptProxy is injected on the application WebView page. For more information, see 2.1.

3. The H5 appKey is left empty. In this case, the H5 SDK prints warning logs but does not affect the number of sends. and set aplus-jsbridge-only to true to disable H5 data reporting

Report logs

If a tracking event is triggered on the H5 side at this time

Scenario 3: How to report H5 data only to H5 applications

App business, operation, and PD do not want to see H5 data in apps

Operations

1. Create two applications:

• An app that has its own appKey_app

• A Web/H5 application that has its own appKey_h5

2. No API calls are made. The app application and the h5 application are tracked separately.

Report logs

If a tracking event is triggered on the H5 side at this time

2. Description of H5 Bridging Principle

The prerequisites for log reporting in the preceding scenarios 1 to 3 are as follows:

• HarmonyOS Next App integrates QuickTracking HarmonyOS Next SDK

• In-app H5 page integrates QuickTracking H5 SDK

2.1. HarmonyOS Next Application Code

Bridging API description

You must first enable the SDK configuration enableJSBridge=true. Otherwise, the bridging API call is invalid.

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

function createJSBridgeProxy(controller: WebviewController)

The following table describes the parameters in the preceding statement.

Use the sample code that is shown in the following figure and configure the parameters in the code.

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 {
    // When you need to introduce other user-defined 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 Application Side Code

Report logs only through the APP channel and disable the H5 channel reporting log API

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

attention:! ! !. If H5 sets aplus-jsbridge-only to true, H5 SDK is prohibited from reporting tracking events. Be sure to check non-application H5 pages and do not set

H5 global attributes take effect globally

After you enable the following API operation in H5, the global properties that are configured by using the globalproperty in aplus.appendMetaInfo or the globalproperty in aplus.setMetaInfo are synchronized to the native app. (This interface defaults to false.)

attention:! ! !. This API supports in qt_web_v2.0.12 and later

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

For example, if you set the global attribute "Current City: Beijing" in the app and set the global attribute "Current City: Shanghai" in the app H5, the global attribute of events triggered in H5 and app native will be "Current City: Shanghai". If you do not turn on this switch, the global attributes set in H5 do not take effect in the native app.