AGC AB测试实践：优化HarmonyOS 5应用的UI/功能
前言
AB测试是优化应用体验和功能效果的科学方法。通过AppGallery Connect的AB测试服务，我们可以轻松在HarmonyOS 5应用中实施不同版本的UI或功能方案，并基于数据做出优化决策。本文将详细介绍如何在HarmonyOS 5应用中集成AGC AB测试服务，并提供完整的代码示例。
第一部分：环境准备与项目配置
1.1 创建HarmonyOS 5项目
在DevEco Studio中创建新项目：
模板：Empty Ability
语言：ArkTS
API版本：HarmonyOS 5.0
包名：com.example.abtestdemo
配置项目基本信息：
{
"app": {
"bundleName": "com.example.abtestdemo",
"vendor": "example",
"versionCode": 1,
"versionName": "1.0.0"
}
}
1.2 在AGC控制台配置AB测试
登录AppGallery Connect
进入"我的项目" → 选择你的项目 → "增长" → "AB测试"
创建新实验：
实验名称：首页UI优化测试
实验类型：应用内AB测试
测试指标：点击率、停留时长
第二部分：集成AGC AB测试SDK
2.1 添加依赖
修改oh-package.json5文件：
{
"dependencies": {
"@hw-agconnect/api-ohos": "^1.8.0",
"@hw-agconnect/core-ohos": "^1.8.0",
"@hw-agconnect/abtest-ohos": "^1.8.0",
"@hw-agconnect/remoteconfig-ohos": "^1.8.0"
}
}
运行依赖安装：
ohpm install
2.2 初始化AGC服务
创建entry/src/main/ets/utils/ABTestUtil.ets：
import { agconnect } from '@hw-agconnect/api-ohos';
import { AGCABTest, Experiment, ExperimentListener } from '@hw-agconnect/abtest-ohos';
import { AGCRemoteConfig } from '@hw-agconnect/remoteconfig-ohos';
export class ABTestUtil {
private static instance: ABTestUtil = new ABTestUtil();
private abTest: AGCABTest;
private remoteConfig: AGCRemoteConfig;
private constructor() {
agconnect.instance().init(globalThis.abilityContext);
this.abTest = AGCABTest.getInstance();
this.remoteConfig = AGCRemoteConfig.getInstance();
// 初始化远程配置
this.remoteConfig.applyDefault({
"home_ui_style": "default",
"button_color": "#007DFF",
"feature_enabled": false
});
}
public static get(): ABTestUtil {
return this.instance;
}
// 获取实验配置
public async fetchExperiments(): Promise
try {
await this.remoteConfig.fetch();
await this.remoteConfig.apply();
} catch (error) {
console.error("获取远程配置失败:", error);
}
}
// 获取UI样式版本
public getUIStyle(): string {
return this.remoteConfig.getValueAsString("home_ui_style");
}
// 获取按钮颜色
public getButtonColor(): string {
return this.remoteConfig.getValueAsString("button_color");
}
// 检查功能是否启用
public isFeatureEnabled(): boolean {
return this.remoteConfig.getValueAsBoolean("feature_enabled");
}
// 加入AB测试实验
public async joinExperiment(experimentId: string): Promise
return this.abTest.joinExperiment(experimentId);
}
// 添加实验变化监听
public addExperimentListener(listener: ExperimentListener): void {
this.abTest.addExperimentListener(listener);
}
}
第三部分：实现AB测试功能
3.1 创建AB测试管理页面
创建entry/src/main/ets/pages/ABTestPage.ets：
import { ABTestUtil } from '../utils/ABTestUtil';
@Entry
@Component
struct ABTestPage {
@State currentUIStyle: string = 'default';
@State buttonColor: string = '#007DFF';
@State featureEnabled: boolean = false;
@State experimentData: string = '未获取实验数据';
onPageShow() {
this.loadABTestConfig();
}
async loadABTestConfig() {
// 获取最新实验配置
await ABTestUtil.get().fetchExperiments();
// 更新UI状态
this.currentUIStyle = ABTestUtil.get().getUIStyle();
this.buttonColor = ABTestUtil.get().getButtonColor();
this.featureEnabled = ABTestUtil.get().isFeatureEnabled();
// 加入实验并获取实验数据
try {
const experiment = await ABTestUtil.get().joinExperiment('YOUR_EXPERIMENT_ID');
this.experimentData = JSON.stringify(experiment, null, 2);
} catch (error) {
this.experimentData = `获取实验数据失败: ${error}`;
}
}
build() {
Column() {
Text('AB测试控制面板')
.fontSize(25)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 30 })
// 当前配置显示
Column() {
Row() {
Text('当前UI样式:')
.width(120)
Text(this.currentUIStyle)
.fontColor(this.buttonColor)
.fontWeight(FontWeight.Bold)
}
.margin({ bottom: 10 })
Row() {
Text('按钮颜色:')
.width(120)
Text(this.buttonColor)
.fontColor(this.buttonColor)
.fontWeight(FontWeight.Bold)
}
.margin({ bottom: 10 })
Row() {
Text('功能状态:')
.width(120)
Text(this.featureEnabled ? '已启用' : '已禁用')
.fontColor(this.featureEnabled ? '#00B050' : '#FF0000')
.fontWeight(FontWeight.Bold)
}
.margin({ bottom: 20 })
}
.width('90%')
.padding(15)
.border({ width: 1, color: '#EEEEEE' })
.borderRadius(10)
.margin({ bottom: 30 })
// 实验数据
Text('实验数据:')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 10 })
Scroll() {
Text(this.experimentData)
.fontSize(14)
.width('90%')
}
.height(200)
.width('90%')
.border({ width: 1, color: '#EEEEEE' })
.padding(10)
.margin({ bottom: 30 })
Button('刷新实验数据')
.width(200)
.height(50)
.onClick(() => this.loadABTestConfig())
}
.width('100%')
.height('100%')
.padding(20)
}
}
3.2 实现不同UI版本的首页
创建entry/src/main/ets/pages/HomePage.ets：
import { ABTestUtil } from '../utils/ABTestUtil';
@Entry
@Component
struct HomePage {
@State currentUIStyle: string = 'default';
@State buttonColor: string = '#007DFF';
@State featureEnabled: boolean = false;
onPageShow() {
this.loadABTestConfig();
}
async loadABTestConfig() {
await ABTestUtil.get().fetchExperiments();
this.currentUIStyle = ABTestUtil.get().getUIStyle();
this.buttonColor = ABTestUtil.get().getButtonColor();
this.featureEnabled = ABTestUtil.get().isFeatureEnabled();
}
// 版本A的UI
@Builder
buildVersionA() {
Column() {
Image($r('app.media.logo'))
.width(150)
.height(150)
.margin({ bottom: 30 })
Text('欢迎使用我们的应用')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 40 })
Button('立即体验', { type: ButtonType.Capsule })
.width(200)
.height(50)
.backgroundColor(this.buttonColor)
.fontColor(Color.White)
.margin({ bottom: 20 })
if (this.featureEnabled) {
Button('新功能尝鲜', { type: ButtonType.Capsule })
.width(200)
.height(50)
.backgroundColor('#FF6A00')
.fontColor(Color.White)
}
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
// 版本B的UI
@Builder
buildVersionB() {
Column() {
Row() {
Image($r('app.media.logo'))
.width(80)
.height(80)
.margin({ right: 15 })
Column() {
Text('欢迎使用')
.fontSize(18)
Text('我们的应用')
.fontSize(24)
.fontWeight(FontWeight.Bold)
}
}
.margin({ bottom: 40 })
Button('开始使用', { type: ButtonType.Normal })
.width('80%')
.height(50)
.backgroundColor(this.buttonColor)
.fontColor(Color.White)
.margin({ bottom: 20 })
if (this.featureEnabled) {
Column() {
Text('新功能已上线!')
.fontSize(16)
.fontColor('#FF6A00')
.margin({ bottom: 10 })
Button('立即体验', { type: ButtonType.Normal })
.width('80%')
.height(40)
.backgroundColor('#FF6A00')
.fontColor(Color.White)
}
.width('100%')
.margin({ top: 20 })
}
}
.width('100%')
.height('100%')
.padding(30)
}
// 默认UI
@Builder
buildDefaultVersion() {
Column() {
Text('欢迎')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 20 })
Button('进入应用')
.width(200)
.height(50)
.margin({ bottom: 20 })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
// 根据AB测试结果显示不同UI
if (this.currentUIStyle === 'version_a') {
this.buildVersionA()
} else if (this.currentUIStyle === 'version_b') {
this.buildVersionB()
} else {
this.buildDefaultVersion()
}
// 跳转到AB测试控制面板
Button('AB测试设置')
.width(150)
.height(40)
.position({ x: '80%', y: '80%' })
.onClick(() => {
router.pushUrl({ url: 'pages/ABTestPage' });
})
}
.width('100%')
.height('100%')
}
}
第四部分：配置实验参数与指标
4.1 在AGC控制台配置实验参数
进入AB测试实验详情页
添加参数：
参数名：home_ui_style
默认值：default
变量A：version_a
变量B：version_b
添加其他参数：
button_color：控制按钮颜色
feature_enabled：控制新功能是否显示
4.2 配置实验指标
添加核心指标：
按钮点击率
页面停留时长
新功能点击率
设置实验流量分配：
版本A：50%
版本B：50%
第五部分：实现数据收集与分析
5.1 集成AGC分析SDK
修改oh-package.json5添加依赖：
{
"dependencies": {
"@hw-agconnect/analytics-ohos": "^1.8.0"
}
}
更新ABTestUtil.ets：
import { AGCAnalytics } from '@hw-agconnect/analytics-ohos';
export class ABTestUtil {
// ... 原有代码 ...
private analytics: AGCAnalytics;
private constructor() {
// ... 原有初始化代码 ...
this.analytics = AGCAnalytics.getInstance();
}
// 记录按钮点击事件
public logButtonClick(buttonId: string): void {
this.analytics.onEvent('button_click', {
button_id: buttonId,
ui_style: this.getUIStyle()
});
}
// 记录页面停留时间
public logPageDuration(pageName: string, duration: number): void {
this.analytics.onEvent('page_duration', {
page_name: pageName,
duration: duration,
ui_style: this.getUIStyle()
});
}
}
5.2 在页面中收集数据
更新HomePage.ets：
import router from '@ohos.router';
@Entry
@Component
struct HomePage {
private startTime: number = 0;
onPageShow() {
this.startTime = new Date().getTime();
this.loadABTestConfig();
}
onPageHide() {
const duration = (new Date().getTime() - this.startTime) / 1000;
ABTestUtil.get().logPageDuration('home_page', duration);
}
@Builder
buildVersionA() {
Column() {
// ... 原有代码 ...
Button('立即体验', { type: ButtonType.Capsule })
.onClick(() => {
ABTestUtil.get().logButtonClick('main_cta');
router.pushUrl({ url: 'pages/FeaturePage' });
})
if (this.featureEnabled) {
Button('新功能尝鲜', { type: ButtonType.Capsule })
.onClick(() => {
ABTestUtil.get().logButtonClick('new_feature_cta');
router.pushUrl({ url: 'pages/NewFeaturePage' });
})
}
}
}
// ... 其他版本构建函数 ...
}
第六部分：分析与优化
6.1 在AGC控制台查看实验结果
进入AB测试实验详情页
查看"数据分析"选项卡
分析关键指标：
各版本的按钮点击率对比
用户停留时长差异
新功能的使用情况
6.2 基于数据做出决策
根据实验结果，可能有以下几种优化方向：
如果版本A的点击率显著高于版本B：
考虑全面采用版本A的UI设计
进一步优化版本A中的高点击率元素
如果新功能使用率低：
调整功能入口的设计
考虑是否需要改进功能本身
第七部分：高级功能 - 动态更新实验
7.1 实现实验动态更新监听
更新ABTestUtil.ets：
export class ABTestUtil {
// ... 原有代码 ...
// 监听实验变化
public setupExperimentListener(): void {
this.abTest.addExperimentListener({
onExperimentUpdated: (experimentId: string, experiment: Experiment) => {
console.log(实验更新: ${experimentId}, experiment);
this.fetchExperiments();
},
onExperimentActivated: (experimentId: string, experiment: Experiment) => {
console.log(实验激活: ${experimentId}, experiment);
}
});
}
}
7.2 在应用启动时初始化
创建entry/src/main/ets/Application/MyAbilityStage.ets：
import { ABTestUtil } from '../utils/ABTestUtil';
export default class MyAbilityStage extends AbilityStage {
onAcceptWant(want) {
console.log('MyAbilityStage onAcceptWant');
// 初始化AB测试监听
ABTestUtil.get().setupExperimentListener();
ABTestUtil.get().fetchExperiments();
return super.onAcceptWant(want);
}
}
总结
通过本教程，你已经完成了：
在HarmonyOS 5应用中集成AGC AB测试服务
实现了多版本UI的AB测试功能
配置了实验参数和关键指标
实现了数据收集和分析功能
探索了实验动态更新等高级功能
AB测试是持续优化应用体验的强大工具。通过AGC AB测试服务，你可以：
科学评估不同设计方案的效果
基于数据做出产品决策
降低新功能上线的风险
持续优化关键业务指标
你可以基于本教程进一步探索：
多变量测试（Multivariate Testing）
定向受众测试（Targeted Audience Testing）
结合远程配置的动态实验调整
AB测试与数据分析的深度集成
浙公网安备 33010602011771号