Flutter VWO集成插件vwo_flutter的使用

Flutter VWO集成插件vwo_flutter的使用

简介

vwo_flutter 是一个开源库，允许你在Flutter应用程序中进行A/B测试。通过集成VWO（Visual Website Optimizer），你可以轻松地对应用的不同版本进行实验，以找到最佳用户体验。

要求

• Dart SDK 版本 >=2.12.0 <3.0.0
• Flutter 版本 >=1.20.0

文档

请参考官方VWO文档以获取更多详细信息。

基本用法

实例化

SDK提供了一个方法来实例化一个VWO客户端。该方法接受一个apiKey和一个配置对象。实例化SDK所需的参数是apiKey。

import 'package:vwo_flutter/vwo_flutter.dart';

VWOConfig vwoConfig = VWOConfig();
if (Platform.isIOS) {
  await VWO.launch(ios_apiKey, vwoConfig: vwoConfig); // iOS平台的API Key
} else {
  await VWO.launch(android_apiKey, vwoConfig: vwoConfig); // Android平台的API Key
}

推送自定义维度

你可以推送自定义维度数据到VWO。

await VWO.pushCustomDimension("CUSTOM_DIMENSION_KEY", "CUSTOM_DIMENSION_VALUE");

获取变体名称

你可以根据测试键获取变体名称。

await VWO.getVariationNameForTestKey("campaign_key");

获取变量值

你可以根据变量键获取不同类型的变量值。

// 获取字符串变量值
await VWO.getStringForKey("variable_key", "default_value");

// 获取整数变量值
await VWO.getIntegerForKey("variable_key", default_value);

// 获取双精度浮点数变量值
await VWO.getDoubleForKey("variable_key", default_value);

// 获取布尔变量值
await VWO.getBooleanForKey("variable_key", default_value);

// 获取对象变量值
await VWO.getObjectForKey("variable_key", default_value);

触发目标

你可以触发自定义目标或收入目标。

// 触发自定义目标
await VWO.trackConversion("test_goal");

// 触发收入目标
await VWO.trackConversion("test_goal", revenue_value);

凭证

此SDK需要一个应用密钥。你可以在VWO官网注册一个账户，并创建一个新的Android/iOS应用，然后使用生成的应用密钥。

设置VWO账户

1. 在VWO官网注册一个账户。
2. 从创建菜单中创建一个新的Android应用。
3. 使用生成的应用密钥集成SDK到你的Android/iOS应用中。
4. 创建并运行活动。

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中集成vwo_flutter SDK。

///
/// Copyright 2021 Wingify Software Pvt. Ltd.
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
///    http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:vwo_flutter/vwo_flutter.dart';
import 'package:vwo_flutter_example/providers/navigation_provider.dart';
import 'package:vwo_flutter_example/screens/sorting/sorting_campaign.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 监听VWO事件流
    VWO.vwoStream.listen((vwoProperties) {
      print("received data from vwo: $vwoProperties");
      String campaignId = vwoProperties["vwo_campaign_name"];
      String campaignName = vwoProperties["vwo_campaign_id"];
      String variationId = vwoProperties["vwo_variation_name"];
      String variationName = vwoProperties["vwo_variation_id"];
      print("Campaign id $campaignId, Campaign name $campaignName, VariationId $variationId, VariationName $variationName");
    });

    // 初始化VWO SDK
    VWOConfig vwoConfig = VWOConfig();
    if (Platform.isIOS) {
      await VWO.launch(ios_apiKey, vwoConfig: vwoConfig); // iOS平台的API Key
    } else {
      await VWO.launch(android_apiKey, vwoConfig: vwoConfig); // Android平台的API Key
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<NavigationProvider>(
          create: (context) => NavigationProvider(),
        ),
      ],
      child: MaterialApp(
        home: SortingCampaign(), // 示例页面
      ),
    );
  }
}