Ваш первый эксперимент с обменом сообщениями внутри приложения

1. Введение

Цели

В этой лабораторной работе вы проведете эксперимент по обмену сообщениями внутри приложения для многоплатформенного мобильного приложения с рекомендациями ресторанов на базе Flutter и Cloud Firestore .

После завершения курса вы сможете разрабатывать и реализовывать эксперименты с сообщениями внутри приложений, чтобы эффективно повышать вовлеченность пользователей в любом приложении iOS или Android, написав при этом минимальный объем кода.

Чему вы научитесь

• Как использовать Firebase In-App Messaging (FIAM) в приложении Flutter
• Как настроить внешний вид сообщений в приложении
• Как разработать эксперимент по обмену сообщениями внутри приложения и реализовать его в своем приложении
• Как интерпретировать результаты эксперимента по обмену сообщениями в приложении

Обмен сообщениями внутри приложения Firebase

Firebase In-App Messaging (FIAM) помогает вам взаимодействовать с пользователями, которые активно используют ваше приложение, отправляя им целевые и контекстные сообщения, которые подталкивают их к выполнению ключевых действий в приложении, например, прохождению уровня в игре, покупке предмета или подписке на контент.

A/B-тестирование Firebase

A/B-тестирование (ABT) в Firebase, работающее на базе Google Optimize, помогает оптимизировать работу вашего приложения, упрощая проведение, анализ и масштабирование продуктовых и маркетинговых экспериментов. Это позволяет вам тестировать изменения в пользовательском интерфейсе, функциях или кампаниях по вовлечению пользователей, чтобы увидеть, действительно ли они влияют на ваши ключевые показатели (такие как доход и удержание), прежде чем внедрять их повсеместно.

Что вам нужно

Если вы не очень хорошо знакомы с Flutter или Firestore, сначала выполните практическую работу по Firebase для Flutter :

Вы можете запустить эту лабораторную работу, используя любое из следующих устройств:

• Физическое устройство (Android или iOS), подключенное к компьютеру и настроенное на режим разработчика.
• Симулятор iOS. (Требуется установка инструментов Xcode ).
• Эмулятор Android. (Требуется настройка в Android Studio ).

Помимо вышеперечисленного вам также понадобится:

• Браузер по вашему выбору, например Chrome.
• Среда разработки (IDE) или текстовый редактор по вашему выбору, например, Android Studio или VS Code , с плагинами Dart и Flutter. Для использования с Flutter рекомендуется использовать VS Code.
• Последняя стабильная версия Flutter (или бета-версия, если вам нравится быть на грани возможного).
• Учетная запись Google, например учетная запись Gmail, для создания и управления вашим проектом Firebase.
• Пример кода для практического занятия. Чтобы узнать, как получить код, смотрите следующий шаг.

2. Настройте

Получить код

Клонируйте репозиторий GitHub из командной строки:

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

Пример кода будет клонирован в каталог friendlyeats-flutter . С этого момента команды следует запускать из этого каталога:

cd friendlyeats-flutter

Затем перейдите в каталог codelab и проверьте ветку fiam-abt :

git checkout fiam-abt

Эта ветка содержит весь код, необходимый для этой практической работы, включая завершённую версию в папке done . Другие ветки в этом репозитории содержат код для сборки приложения FriendlyEats, как показано в практической работе «Мультиплатформенная практическая работа с Firestore Flutter» . Для целей этой практической работы мы удалили веб-интеграцию из этой ветки.

Импортируйте стартовое приложение

Откройте или импортируйте каталог codelab-fiam-abt в предпочитаемую вами IDE. Этот каталог содержит начальный код для практической работы, представляющей собой приложение для рекомендации ресторанов. В рамках этой практической работы вы проведёте эксперимент по отправке сообщений пользователям этого приложения.

Создать проект Firebase

1. Войдите в консоль Firebase, используя свою учетную запись Google.
2. Нажмите кнопку, чтобы создать новый проект, а затем введите название проекта (например, FriendlyEats ).
   
3. Нажмите «Продолжить» .
4. При появлении соответствующего запроса ознакомьтесь с условиями Firebase и примите их, а затем нажмите кнопку «Продолжить» .
5. (Необязательно) Включите помощь ИИ в консоли Firebase (так называемая «Gemini в Firebase»).
6. Для этой практической работы вам понадобится Google Analytics для оптимального использования продуктов Firebase, поэтому включите опцию Google Analytics. Следуйте инструкциям на экране, чтобы настроить Google Analytics.
7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

Поздравляем! Вы только что создали свой первый проект Firebase.

Далее вы настроите и включите необходимые службы с помощью консоли Firebase.

Включить анонимную аутентификацию

Хотя аутентификация не является основной темой этой лабораторной работы, важно иметь какую-либо форму аутентификации в вашем приложении. Вы будете использовать анонимный вход , то есть пользователь будет входить в систему без запроса.

Чтобы включить анонимный вход:

1. В консоли Firebase найдите раздел «Аутентификация» на левой панели навигации.
2. Нажмите «Аутентификация» , затем нажмите « Начать» и выберите вкладку «Метод входа » (или перейдите непосредственно в консоль Firebase ).
3. Включите поставщика анонимного входа и нажмите «Сохранить» .

Включение анонимного входа позволяет приложению незаметно авторизовать ваших пользователей при доступе к нему. Подробнее см. в документации по анонимной аутентификации для Android и iOS .

Настройка Cloud Firestore

Приложение использует Cloud Firestore для сохранения и получения информации и рейтингов ресторанов.

Вот как настроить Cloud Firestore в вашем проекте Firebase:

1. На левой панели консоли Firebase разверните пункт «Сборка» , а затем выберите «База данных Firestore» .
2. Нажмите Создать базу данных .
3. Оставьте идентификатор базы данных равным (default) .
4. Выберите местоположение вашей базы данных, затем нажмите «Далее» .
   Для настоящего приложения вам нужно выбрать местоположение, близкое к вашим пользователям.
5. Нажмите «Начать в тестовом режиме» . Ознакомьтесь с отказом от ответственности о правилах безопасности.
   Далее в этой лабораторной работе вы добавите правила безопасности для защиты своих данных. Не распространяйте и не публикуйте приложение, не добавив правила безопасности для своей базы данных.
6. Нажмите «Создать» .

3. Конфигурация Firebase для мобильных устройств

Большинство изменений кода, необходимых для поддержки Firebase, уже внесены в проект, над которым вы работаете. Однако для добавления поддержки мобильных платформ вам необходимо:

• Зарегистрируйте нужную платформу в проекте Firebase
• Загрузите файл конфигурации для конкретной платформы и добавьте его в код.

В каталоге верхнего уровня вашего приложения Flutter есть подкаталоги ios и android . В этих каталогах хранятся файлы конфигурации, специфичные для платформ iOS и Android соответственно.

Настроить iOS

В консоли Firebase выберите «Настройки проекта» в верхней части левой панели навигации и нажмите кнопку iOS в разделе «Ваши приложения» на странице «Общие» .

Вы должны увидеть следующее диалоговое окно:

1. Важно указать идентификатор комплекта iOS. Его можно получить, выполнив следующие три шага.

2. В командной строке перейдите в каталог верхнего уровня вашего приложения Flutter.
3. Выполните команду open ios/Runner.xcworkspace , чтобы открыть Xcode.

4. В Xcode щелкните значок Runner верхнего уровня на левой панели, чтобы открыть вкладку «Общие» на правой панели, как показано ниже. Скопируйте значение идентификатора пакета .

5. Вернитесь в диалоговое окно Firebase, вставьте скопированный идентификатор пакета в поле идентификатора пакета iOS и нажмите кнопку «Зарегистрировать приложение» .

6. Продолжая работу в Firebase, следуйте инструкциям по загрузке файла конфигурации GoogleService-Info.plist .
7. Вернитесь в Xcode. Обратите внимание, что в папке Runner есть подпапка, также называемая Runner (показана на предыдущем изображении).
8. Перетащите файл GoogleService-Info.plist (который вы только что загрузили) в подпапку Runner .
9. В появившемся диалоговом окне Xcode нажмите кнопку Готово .
10. Вернитесь в консоль Firebase. На этапе настройки нажмите «Далее» , пропустите оставшиеся шаги и вернитесь на главную страницу консоли Firebase.

Вы завершили настройку приложения Flutter для iOS!

Настроить Android

1. В консоли Firebase выберите «Настройки проекта» в верхней части левой панели навигации и нажмите кнопку Android в разделе «Ваши приложения» на странице «Общие» .

Вы увидите следующее диалоговое окно:

2. Важно указать имя пакета Android . Имя пакета можно получить, выполнив следующие два шага:

3. В каталоге приложения Flutter откройте файл android/app/src/main/AndroidManifest.xml .
4. В элементе manifest найдите строковое значение атрибута package . Это имя пакета Android (например, com.yourcompany.yourproject ). Скопируйте это значение.
5. В диалоговом окне Firebase вставьте скопированное имя пакета в поле имени пакета Android .
6. Для этой лабораторной работы вам не нужен сертификат подписи отладки SHA-1 . Оставьте это поле пустым.
7. Нажмите «Зарегистрировать приложение» .
8. Продолжая работу в Firebase, следуйте инструкциям по загрузке файла конфигурации google-services.json .
9. Перейдите в каталог приложения Flutter и переместите файл google-services.json (который вы только что загрузили) в каталог android/app .
10. Вернитесь в консоль Firebase, пропустите оставшиеся шаги и вернитесь на главную страницу консоли Firebase.
11. Вся конфигурация Gradle уже проверена. Если ваше приложение все еще работает, закройте и пересоберите его, чтобы позволить Gradle установить зависимости.

Вы завершили настройку приложения Flutter для Android!

4. Запустите приложение локально.

Вы готовы приступить к работе над своим приложением! Для начала запустите приложение локально. Теперь вы можете запустить его на любой настроенной вами платформе (и для которой у вас есть устройство и эмулятор).

Узнайте, какие устройства доступны, с помощью следующей команды:

flutter devices

В зависимости от доступных устройств вывод предыдущей команды выглядит примерно так:

Теперь запустите приложение локально с помощью следующей команды:

flutter run

Теперь вы должны увидеть свою копию FriendlyEats, подключенную к вашему проекту Firebase.

Приложение автоматически подключается к вашему проекту Firebase и незаметно регистрирует вас как анонимного пользователя.

5. Создайте и протестируйте свое первое сообщение.

Интегрируйте Firebase In-App Messaging в свое приложение

Базовая интеграция с In-App Messaging не требует написания кода, достаточно добавить зависимость, и всё готово! Добавьте следующую зависимость в файл pubspec.yaml

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

Напишите сообщение в консоли Firebase

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

Чтобы написать свое первое сообщение:

1. В разделе Engage консоли Firebase нажмите In-App Messaging .
2. Нажмите «Создать свою первую кампанию» на панели «Сообщения в приложении».

Давайте создадим простое модальное сообщение, чтобы убедиться, что интеграция работает. Вы можете настроить сообщение по своему усмотрению — добавить изображения, кнопки или изменить цвета.

Обязательно укажите приложение, которое вы хотите протестировать, в зависимости от выбранного вами пути интеграции — у вас может быть iOS, Android или обе платформы.

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

После завершения планирования мы сможем опубликовать сообщение. Нажмите «Просмотреть», и вы увидите что-то вроде этого.

Просмотреть сообщение в вашем приложении

Теперь удалите и переустановите приложение, и при открытии вы увидите созданное вами сообщение. Поздравляем, вы только что отправили своё первое сообщение в приложении! На следующем этапе вы узнаете, как добавить событие аналитики, чтобы активировать сообщение в приложении на основе действий пользователей.

6. Интегрируйте Firebase Analytics для расширенного запуска сообщений.

Интегрируйте Firebase Analytics в свое приложение

Чтобы понять, как пользователи взаимодействуют с нашим приложением, и инициировать внутриприкладное сообщение на основе их действий, мы теперь добавим событие Analytics для момента, когда пользователь нажимает на ресторан.

1. Добавьте зависимость Firebase Analytics от Flutter в pubspec.yaml

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

2. Импорт аналитики в home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

3. Добавьте экземпляр Firebase Analytics в класс HomePage в home_page.dart

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

4. Запускает аналитическое событие, когда пользователь нажимает на карточку ресторана на home_page.dart

onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

Отредактируйте сообщение, чтобы оно активировалось при событии аналитики.

Теперь, когда у нас есть событие «click_restaurant», давайте запустим наше сообщение в приложении на его основе, а не тогда, когда пользователь открывает приложение.

В консоли Firebase вернитесь в раздел «Сообщения внутри приложения» и отредактируйте существующую кампанию.

Теперь измените раздел планирования, чтобы вызвать сообщение о новом событии.

Отсюда мы можем опубликовать наши изменения, нажав кнопку «Обзор».

Проверьте свой триггер в приложении

На этом этапе вы сможете запустить свое приложение с помощью

flutter run

И когда вы нажмете на ресторан, вы увидите сообщение в приложении.

7. Создайте кампанию FIAM+ABT

Начните с цели

Наше приложение Friendlyeats уже выглядит отлично, но чтобы оно было полезным, нам нужны отзывы. Они будут получены от пользователей Friendlyeats, поэтому давайте найдём способ побудить пользователей оставлять отзывы.

Сначала давайте определим наше событие конверсии.

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

1. Импортируйте Firebase Analytics, как и раньше, и добавьте экземпляр Analytics в RestaurantPage в restaurant_page.dart

class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}

2. Теперь давайте запустим событие в _onCreateReviewPressed когда мы сохраним отзыв в restaurant_page.dart

 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

Настройка A/B-тестирования в консоли Firebase

Теперь, когда мы знаем, как создавать кампании по отправке сообщений в приложении, пора подумать о том, какое поведение мы хотели бы поощрять в нашем приложении с помощью этих кампаний. Мы хотим, чтобы больше людей оставляли отзывы о FriendlyEats, что сделало бы приложение более полезным! Есть несколько способов стимулировать это с помощью сообщений в приложении. Один из них — простое сообщение в приложении, которое просто призывает пользователя оставить отзыв о ресторане, чтобы помочь улучшить приложение FriendlyEats. Другой способ — использовать сообщение в приложении, чтобы предложить какое-либо вознаграждение за отзыв, например, купон или код скидки в определённый ресторан.

Оба подхода могут увеличить частоту отзывов пользователей о ресторанах на FriendlyEats, и, похоже, предоставление купона в данном случае может оказать ещё более сильное влияние. Но насколько повысится вероятность написания отзыва при предоставлении этого купона? Стоит ли вообще тратиться на купон? Чтобы это выяснить, мы проведём эксперимент с сообщениями в приложении! Мы можем использовать A/B-тестирование Firebase для случайного отображения одного из сообщений в приложении и оценить его влияние на поведение пользователей, что-то вроде клинического испытания. И самое главное, это можно сделать полностью через консоль Firebase, без написания кода!

Чтобы составить свой первый эксперимент по обмену сообщениями в приложении:

1. В разделе Engage консоли Firebase нажмите A/B Testing .
2. Нажмите «Создать эксперимент» и выберите эксперимент с функцией обмена сообщениями в приложении . Откроется редактор экспериментов, показанный ниже.

Дайте вашему эксперименту название и (необязательно) описание.

4. Следующий шаг — составить различные сообщения в приложении, которые вы будете отправлять пользователям в ходе эксперимента. Первое сообщение в приложении, которое мы составим, будет «базовым», или контрольным, для нашего эксперимента. Можно сделать это простым сообщением «пожалуйста, оставьте отзыв»:

5. Теперь, когда у нас есть базовый план, мы создадим вариант — сообщение в приложении, предлагающее пользователям промокод, чтобы побудить их оставить отзыв. В превью ниже это не полностью видно, но заголовок сообщения — «Воспользуйтесь купоном, оставьте отзыв!», а текст — «В следующий раз, когда будете в Burrito Cafe, используйте промокод FRIENDLYEATS-15 при оформлении заказа, чтобы получить скидку 15%. И не забудьте оставить отзыв после оформления заказа!». Надеемся, это вдохновит некоторых пользователей заглянуть в Burrito Cafe!

На следующем этапе мы настроим таргетинг на наше приложение и зададим показатель экспозиции (Exposure). Это процент пользователей, соответствующих условиям таргетинга/триггера, которые увидят одно из сообщений в эксперименте. В этом примере мы можем установить этот показатель равным 100%, так как мы хотим, чтобы все пользователи видели либо базовый вариант, либо вариант с купоном. Если вам нужна контрольная группа, которой вообще не будет показано сообщение в приложении, вы можете уменьшить этот процент экспозиции.

7. Далее вам нужно определить цели эксперимента. Это результат эксперимента, который мы хотим измерить. Мы установим это как аналитическое событие review_success , которое мы определили в предыдущем разделе, поскольку хотим увидеть, как различные сообщения в нашем приложении влияют на пользователей, оставляющих отзывы о ресторанах.
8. Для планирования мы позволим кампании начаться немедленно и установим click_restaurant в качестве условия запуска, чтобы пользователи видели одно из двух сообщений в приложении при нажатии на ресторан.

9. Теперь осталось только просмотреть наш эксперимент и нажать «Начать эксперимент» . После этого мы можем расслабиться и ждать результатов!

Проверьте сбор данных в режиме реального времени

После начала эксперимента пользователи FriendlyEats будут случайным образом видеть одно из двух сообщений в приложении, которые мы составили, нажимая на ресторан: либо базовое , либо вариантное . Это разделит пользователей на две группы в зависимости от того, какое сообщение они увидели. Затем мы можем посмотреть в консоли Firebase (снова в разделе A/B-тестирования) данные аналитики в режиме реального времени из обеих групп. Получение данных займёт некоторое время, так как нам нужно дождаться, пока пользователи увидят сообщения в приложении и предпримут соответствующие действия. Вот как могут выглядеть ваши результаты после сбора достаточного количества данных:

В этом случае вариант значительно улучшился по сравнению с базовым вариантом, поэтому мы могли выбрать вариант «Распространить» , который затем развернет внутриприкладное сообщение с купоном для всех пользователей.

8. Поздравления

Поздравляем! Вы успешно создали и провели свой первый эксперимент с мессенджерами в приложении. Теперь вы можете провести эксперимент в своём приложении и использовать результаты для повышения эффективности кампаний с мессенджерами в приложении.

Что дальше?

Ознакомьтесь с некоторыми из этих практикумов...

• Мультиплатформенный Firestore Flutter
• Добавьте эксперимент Firebase Remote Config в приложение Android

Дальнейшее чтение

Мы лишь поверхностно рассмотрели возможности Firebase In-App Messaging и A/B-тестирования Firebase. Ознакомьтесь с ними, если хотите узнать больше...

• Создавайте эксперименты с сообщениями с помощью A/B-тестирования
• Создавайте эксперименты с удаленной конфигурацией с помощью A/B-тестирования
• Изучите варианты использования встроенных сообщений Firebase
• Настройте сообщения Firebase In-App Messaging

Справочные документы

• Создавайте эксперименты с сообщениями в приложении с помощью A/B-тестирования