Flutter营销优化插件vwo_fme_flutter_sdk的使用

VWO FME Flutter SDK

SDK安装

在项目的pubspec.yaml文件中添加以下依赖项：

vwo_fme_flutter_sdk: <latest version>

可以在pub.dev找到最新版本的SDK。

对于iOS平台，运行以下命令以安装CocoaPods依赖项。支持iOS版本12.0及以上。

cd example/ios && pod install

官方文档

如需更详细的文档，请参考这里。

基本用法

以下是一个基本用法的示例代码：

import 'package:vwo_fme_flutter_sdk/vwo/models/vwo_init_options.dart';
import 'package:vwo_fme_flutter_sdk/vwo/models/vwo_context.dart';
import 'package:vwo_fme_flutter_sdk/vwo/models/get_flag.dart';
import 'package:vwo_fme_flutter_sdk/vwo.dart';

// 初始化VWO SDK并获取初始化状态。
var initOptions = VWOInitOptions(sdkKey: sdkKey, accountId: accountId);

VWO? vwoClient = await VWO.init(initOptions);
// 定义用户上下文，包括用户ID和自定义变量。
final vwoContext = VWOContext(
  userId: userId,
  customVariables: {'number': 12, 'key2': 'value2'}
);

// 获取功能标志的结果。
final GetFlag? flagResult = await vwoClient?.getFlag(
  flagName: flagName,
  vwoContext: vwoContext,
);

// 获取标志的启用状态。
bool isEnabled = flagResult.isEnabled();

// 获取特定变量的值，如果不存在则返回默认值。
dynamic color = flagResult.getVariable('feature_flag_variable_key', 'default_value');

// 获取与标志相关的所有变量。
dynamic variables = flagResult.getVariables();

// 跟踪事件，传入事件名称和用户上下文。
final trackingResult = await vwoClient?.trackEvent(
  eventName: eventName,
  context: userContext,
);

// 设置用户属性，传入键、值和用户上下文。
var attributes = {
  'userType': 'free',
  'price': 99,
  "isEnterpriseCustomer": false
};
await vwoClient?.setAttribute(
  attributes: attributes,
  vwoContext: vwoContext,
);

示例代码

以下是完整的示例代码，展示如何使用vwo_fme_flutter_sdk插件。

example/lib/main.dart

/// Copyright 2024-2025 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:vwo_fme_flutter_sdk/vwo/models/vwo_init_options.dart';
import 'package:vwo_fme_flutter_sdk/vwo/models/vwo_context.dart';
import 'package:vwo_fme_flutter_sdk/vwo/models/get_flag.dart';
import 'package:vwo_fme_flutter_sdk/vwo.dart';
import 'package:vwo_fme_flutter_sdk_example/constants/constants.dart';
import 'package:vwo_fme_flutter_sdk_example/logger/dart_logger.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  VWO? _vwo;

  final vwoContext = VWOContext(
    userId: userId,
    customVariables: {'number': 12, 'key2': 'value2'}
  );

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  /// 初始化VWO-FME SDK并发送所需的参数给原生SDK。
  void _vwoInit() async {
    // 创建一个传输列表
    var transport = <String, dynamic>{};
    transport["defaultTransport"] = DartLogger();

    var logger = <Map<String, dynamic>>[];
    logger.add(transport);

    var initOptions = VWOInitOptions(
        sdkKey: sdkKey,
        accountId: accountId,
        logger: {"level": "TRACE", "transports": logger},
        /*gatewayService: {
              "url": "http://localhost:8000",
            },*/
        //pollInterval: 10000,
        //batchMinSize: 4,
        //batchUploadTimeInterval: 3 * 60 * 1000,
        integrationCallback: (Map<String, dynamic> properties) {
          print('VWO: Integration callback received: $properties');
        });

    _vwo = await VWO.init(initOptions);

    var status = "VWO: Initialization successful.";
    if (_vwo == null) {
      status = "VWO: Initialization failed.";
    }
    // 如果小部件从树中移除时异步平台消息仍在飞行，则我们希望丢弃回复而不是调用setState来更新我们的非存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = status;
    });
  }

  /// 此方法用于根据给定的功能键获取标志值。
  void _getFlag() async {
      final GetFlag? result = await _vwo?.getFlag(
        flagName: flagName,
        vwoContext: vwoContext,
      );
      if (result != null && result.isEnabled()) {
        print('VWO: Feature flag retrieved successfully and is enabled');
      } else {
        print('VWO: Failed to retrieve or enable feature flag');
      }

      dynamic color = result?.getVariable(variableName, 'unknownColor');
      dynamic variables = result?.getVariables();

      print("VWO: Color = $color variable = $variables");
  }

  /// 跟踪方法以跟踪事件。
  void _trackEvent() async {
      var properties = {
        "category": "electronics",
        "isWishlisted":false,
        "price": 21,
        "productId":1,
      };
      final trackingResult = await _vwo?.trackEvent(
          eventName: eventName,
          vwoContext: vwoContext,
          //eventProperties: properties
      );
      print("VWO: Tracking Result: $trackingResult");
  }

  /// 设置用户属性。
  void _setAttribute() async {

    var attributes = {
      'userType': 'free',
      'price': 99,
      "isEnterpriseCustomer": false
    };
    final success = await _vwo?.setAttribute(
      attributes: attributes,
      vwoContext: vwoContext,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    const double width = 200;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: [
              Text(
                'Running on: $_platformVersion\n',
                style: TextStyle(fontSize: 20.0),
              ),
              SizedBox(
                  width: width, // 使按钮全宽
                  child: ElevatedButton(
                    onPressed: () {
                      _vwoInit();
                    }, // 按钮按下时调用_initializeVwo
                    child: const Text(
                      'Init FME',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  )),
              SizedBox(
                  width: width, // 使按钮全宽
                  child: ElevatedButton(
                    onPressed: () {
                      _getFlag();
                    },
                    child: const Text(
                      'Get Flag',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  )),
              SizedBox(
                  width: width, // 使按钮全宽
                  child: ElevatedButton(
                    onPressed: () {
                      _trackEvent();
                    },
                    child: const Text(
                      'Track event',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  )),
              SizedBox(
                  width: width, // 使按钮全宽
                  child: ElevatedButton(
                    onPressed: () {
                      _setAttribute();
                    },
                    child: const Text(
                      'Set Attribute',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ))
            ],
          ),
        ),
      ),
    );
  }
}