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

1. Введение

Цели

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

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

Что вы узнаете

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

Firebase In-App Messaging

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

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

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

Что вам нужно

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

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

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

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

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

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 (в Firebase она называется "Gemini").
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 верхнего уровня в левой панели, чтобы отобразить вкладку General в правой панели, как показано на рисунке. Скопируйте значение Bundle Identifier .

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 в ваше приложение.

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

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

Составьте сообщение в консоли Firebase.

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

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

1. В разделе Engage консоли Firebase нажмите «Встроенные сообщения» .
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, и, похоже, предоставление купона в этом случае окажет еще более сильное воздействие. Но насколько больше вероятность того, что пользователи напишут отзыв, увеличится благодаря этому купону? Стоит ли вообще тратиться на купон? Чтобы это определить, мы проведем эксперимент с внутриигровыми сообщениями! Мы можем использовать Firebase A/B-тестирование, чтобы случайным образом показывать пользователям одно из наших внутриигровых сообщений и измерять влияние этого на поведение пользователей, своего рода клиническое исследование. И самое главное, это можно сделать полностью через консоль Firebase, без необходимости написания кода!

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

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

Дайте своему эксперименту название и, при желании, описание.

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

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

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

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

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

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

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

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

8. Поздравляем!

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

Что дальше?

Посмотрите некоторые из этих практических занятий по программированию...

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

Дополнительная информация

Мы лишь слегка затронули возможности Firebase In-App Messaging и Firebase A/B Testing. Если хотите узнать больше, ознакомьтесь с этими материалами…

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

Справочная документация

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