All Products
Search
Document Center

Quick Tracking:Pelaporan Data H5 di Aplikasi

Last Updated:Jun 29, 2025

1. Skenario Penggunaan Jembatan H5

Skenario 1: Cara melaporkan data H5 ke aplikasi H5 dan aplikasi APP secara bersamaan

Aktivitas H5 "Spring Day" disematkan di beberapa terminal App dan dioperasikan dalam mode saat ini guna memenuhi persyaratan analisis berikut:

  • Operator aplikasi perlu melihat data tautan lengkap, baik sebelum maupun sesudah pelanggan berpartisipasi dalam aktivitas H5 di aplikasi.

  • Data aktivitas H5 dari semua aplikasi ditampilkan.

Operasi

  1. Buat dua aplikasi:

  • Aplikasi yang memiliki appKey sendiri

  • Aplikasi Web/H5 dengan appKey_h5 tersendiri

  1. Konfigurasi SDK enableJSBridge=true diaktifkan, dan javaScriptProxy kustom telah disuntikkan ke halaman WebView aplikasi.

Laporan log

Jika suatu peristiwa pelacakan dipicu di sisi H5 pada saat ini:

Klien pelaporan

Isi log.

Aplikasi

  1. appKey adalah "appKey_app" milik aplikasi

  2. Akun pengguna untuk aplikasi

  3. Atribut pengguna yang dilaporkan oleh titik pelacakan aplikasi

  4. ID Perangkat adalah ID perangkat aplikasi

  5. Properti Sistem

  6. Atribut global digabungkan antara atribut global yang dilacak di aplikasi dan atribut global yang dikonfigurasi oleh node H5

  7. Kode acara dan atribut acara dari acara kustom keduanya merupakan konten pelacakan berbasis h5

Aplikasi H5 di webview

  1. appKey_h5

  2. Akun pengguna H5

  3. Atribut pengguna yang dilaporkan oleh titik pelacakan yang atribut penggunanya adalah H5

  4. ID perangkat H5

  5. Atribut sistem H5

  6. Atribut global adalah atribut global dari titik penyematan H5

  7. Kode acara dan atribut acara dari acara kustom adalah konten pelacakan yang dipicu di H5

Skenario 2: Cara melaporkan data H5 ke aplikasi APP unik

Karena arsitektur teknis, beberapa halaman diimplementasikan menggunakan H5. Berdasarkan mode saat ini, persyaratan analisis berikut dapat dipenuhi:

  • Anda dapat melihat data lengkap terkait bisnis, operasi, dan PD aplikasi di data aplikasi.

Operasi

  1. Buat aplikasi menggunakan satu appKey_app saja.

  2. Konfigurasi SDK enableJSBridge=true diaktifkan, dan javaScriptProxy kustom disuntikkan ke halaman WebView aplikasi. Untuk informasi lebih lanjut, lihat 2.1.

  3. appKey H5 dapat dibiarkan kosong. Dalam hal ini, SDK H5 akan mencetak log peringatan, namun tidak memengaruhi jumlah pengiriman. Atur aplus-jsbridge-only ke true untuk menonaktifkan pelaporan data H5.

Laporan log

Jika suatu peristiwa pelacakan dipicu di sisi H5 pada saat ini:

Klien pelaporan

Isi log.

Aplikasi

  1. appKey adalah "appKey_app" milik aplikasi

  2. Akun pengguna untuk aplikasi

  3. Atribut pengguna yang dilaporkan oleh titik pelacakan aplikasi

  4. ID Perangkat adalah ID perangkat aplikasi

  5. Properti Sistem

  6. Atribut global digabungkan antara atribut global yang dilacak di aplikasi dan atribut global yang dikonfigurasi oleh node H5

  7. Kode acara dan atribut acara dari acara kustom keduanya merupakan konten pelacakan yang dipicu oleh h5

Aplikasi H5 di webview

Laporkan tanpa log

Skenario 3: Cara melaporkan data H5 hanya ke aplikasi H5

Bisnis, operasi, dan pengembangan aplikasi tidak ingin melihat data H5 di aplikasi.

Operasi

  1. Buat dua aplikasi:

  • Aplikasi yang memiliki appKey sendiri

  • Aplikasi Web/H5 dengan appKey_h5 tersendiri

  1. Tidak ada panggilan API yang dilakukan. Aplikasi app dan aplikasi h5 dilacak secara terpisah.

Laporan log

Jika suatu peristiwa pelacakan dipicu di sisi H5 pada saat ini:

Klien pelaporan

Isi log.

Aplikasi

Laporkan tanpa log

Aplikasi H5 di webview

  1. appKey_h5

  2. Akun pengguna H5

  3. Atribut pengguna yang dilaporkan oleh pelacakan yang atribut penggunanya adalah H5

  4. ID perangkat H5

  5. Atribut sistem H5

  6. Atribut global adalah atribut global dari tag HTML5

  7. Kode acara dan atribut acara dari acara kustom keduanya merupakan konten pelacakan berbasis h5

2. Penjelasan Prinsip Jembatan H5

1f

Prasyarat untuk pelaporan log dalam skenario 1 hingga 3 di atas adalah sebagai berikut:

  • HarmonyOS Next App mengintegrasikan QuickTracking HarmonyOS Next SDK.

  • Halaman H5 di aplikasi mengintegrasikan QuickTracking H5 SDK

2.1. Kode Aplikasi HarmonyOS Next

Deskripsi API Jembatan

Anda harus terlebih dahulu mengaktifkan konfigurasi SDK enableJSBridge=true. Jika tidak, panggilan API jembatan tidak valid.

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

function createJSBridgeProxy(controller: WebviewController)

Tabel berikut menjelaskan parameter dalam pernyataan di atas.

Nilai

Deskripsi

controller

HarmonyOS Next system webview controller WebviewController

Gunakan kode contoh yang ditunjukkan pada gambar berikut dan konfigurasikan parameter dalam kode.

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 {
    // Saat Anda perlu memperkenalkan JSProxy lain yang ditentukan pengguna
    // 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. Kode Sisi Aplikasi H5

Hanya lapor log melalui saluran APP dan nonaktifkan API log pelaporan saluran H5

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

Perhatian: Jika H5 mengatur aplus-jsbridge-only menjadi true, SDK H5 tidak akan melaporkan acara pelacakan. Pastikan untuk memeriksa halaman H5 non-aplikasi dan hindari pengaturan ini.

Atribut global H5 berlaku secara global

Setelah mengaktifkan operasi API berikut di H5, properti global yang dikonfigurasi menggunakan globalproperty di aplus.appendMetaInfo atau globalproperty di aplus.setMetaInfo akan disinkronkan ke aplikasi asli. (Antarmuka ini defaultnya false.)

Perhatian: API ini didukung di qt_web_v2.0.12 dan versi berikutnya.

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

Sebagai contoh, jika Anda menetapkan atribut global "Kota Saat Ini: Beijing" di aplikasi dan "Kota Saat Ini: Shanghai" di H5 aplikasi, atribut global untuk acara yang dipicu di H5 dan aplikasi asli akan menjadi "Kota Saat Ini: Shanghai". Namun, jika sakelar ini tidak diaktifkan, atribut global yang ditetapkan di H5 tidak akan berlaku di aplikasi asli.