A/B-тестирование во Flutter с помощью Statsig

Следующее руководство основано на приложении Startup Name Generator, описанном в руководстве по Write your first Flutter app на < a href="https://docs.flutter.dev/get-started/codelab">лаборатория кода Flutter. Если вы еще этого не сделали, рекомендуем сначала пройти это руководство.

Обзор

В базовом руководстве мы создали приложение, которое случайным образом генерирует имена, которые можно использовать для запуска. В этом руководстве мы собираемся регистрировать выбор пользователей и добавлять эксперимент, который покажет значок Emoji в качестве возможного начального логотипа в надежде, что это повысит заинтересованность пользователей. Для этого мы будем использовать Statsig через SDK Statsig Dart.

Установка статистики

Во-первых, нам нужно добавить SDK Statsig в ​​наше приложение. В окне терминала выполните следующее:

flutter pub add statsig

Будет установлена ​​последняя версия SDK.

Инициализация SDK

Statsig требует асинхронного вызова, который обращается к сети, чтобы получить все значения для данного пользователя. Этот асинхронный вызов необходимо выполнить перед проверкой любых вентилей или экспериментов. Есть несколько мест, где мы могли бы разместить этот вызов (см. Flutter async), но мы просто вставьте его в асинхронную основную функцию.

void main() async { // <- added async
  final user = StatsigUser(userId: "a-user");
  final options = StatsigOptions(initTimeout: 1);
  await Statsig.initialize("client-xxxx", user, options);
  runApp(const MyApp());
}

Теперь, когда наше приложение будет запущено, Statsig сделает сетевой вызов и получит все значения для данного пользователя.

Запись события

Чтобы повысить вовлеченность пользователей, мы должны сначала иметь какой-то способ измерения вовлеченности пользователей. Это может быть показатель, который подсчитывает, сколько времени пользователь проводит в приложении или сколько раз пользователь возвращается в приложение.

В этом руководстве мы собираемся выбрать простое событие, которое будет запускаться, когда пользователь взаимодействует, выбирая имя запуска из списка.

Давайте добавим действие onTap, которое будет запускаться всякий раз, когда пользователь нажимает на ListTile в нашем ListView:

final name = _suggestions[index].asPascalCase; // moved out of title: Text(

return ListTile(
    // -- New
  onTap: () {
    Statsig.logEvent("selected_name", stringValue: name);
  },
    // --
  title: Text(
    name,
    style: _biggerFont,
  ),
  trailing: trailing,
);

Теперь, если мы запустим наше приложение, мы можем выбрать имя из списка, и событие будет отправлено в Statsig. Мы можем убедиться, что это работает в режиме реального времени, зайдя в нашу консоль Statsig и проверив страницу показателей.

Настройка эксперимента

Теперь, когда у нас есть показатель заинтересованного пользователя, давайте создадим эксперимент, чтобы увеличить этот показатель.

Давайте обновим наш пользовательский интерфейс, чтобы отображать эмодзи в качестве логотипа при запуске. Аналогично тому, как работают предложения имени, мы создадим список эмодзи в виде строк:

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _emojis = <String>[]; // <-- New
    ...

Затем в нашем методе сборки мы проверим эксперимент и заполним список.

Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        ...

        // -- New
        Text? trailing;
        var emoji = "";
            var experiment = Statsig.getExperiment("emoji_logos_experiment");
        if (experiment.get("should_display_emojis", false) == true) {
          while (_emojis.length <= i) {
            const minHex = 0x1F300;
            const maxHex = 0x1F3F0;
            var random = (Random().nextInt((maxHex - minHex).abs() + 1) +
                    min(minHex, maxHex))
                .toInt();

            _emojis.add(String.fromCharCode(random));
          }

          emoji = _emojis[i];

          trailing = Text(
            emoji,
            style: _massiveFont,
          );
        }
        // -- 

        final name = _suggestions[index].asPascalCase;

        return ListTile(
          title: Text(
            name,
            style: _biggerFont,
          ),
          trailing: trailing, // <-- New
        );
      },
    );
  }

Вот как выглядит установка эксперимента на консоли Statsig. Дополнительные сведения о настройке эксперимента см. в документации от Statsig.

Проведение эксперимента

И все! Если мы разместим этот код перед нашими пользователями, 50 % увидят эмодзи (тест), а 50 % — нет (контроль).

После нескольких дней работы мы должны увидеть результаты нашего эксперимента, которые, мы надеемся, покажут, что добавление смайликов увеличило наш показатель «selected_name». Готовый учебный проект можно найти здесь.< /p>

Также опубликовано здесь.