Twój pierwszy eksperyment dotyczący wysyłania wiadomości w aplikacji

1. Wprowadzenie

Cele

W tym ćwiczeniu z programowania przeprowadzisz eksperyment dotyczący wiadomości w aplikacji w wieloplatformowej aplikacji mobilnej do rekomendowania restauracji opartej na Flutterze i Cloud Firestore.

Po zakończeniu tego procesu będziesz mieć możliwość projektowania i wdrażania eksperymentów dotyczących wiadomości w aplikacji, aby skutecznie zwiększać zaangażowanie użytkowników w dowolnej aplikacji na iOS lub Androida przy minimalnej ilości kodu.

Czego się nauczysz

• Jak używać funkcji Firebase Wysyłanie wiadomości w aplikacji (FIAM) w aplikacji Flutter
• Dostosowywanie wyglądu wiadomości w aplikacji
• Jak zaprojektować eksperyment wysyłania wiadomości w aplikacji i wdrożyć go w aplikacji
• Interpretowanie wyników eksperymentu wysyłania wiadomości w aplikacji

Firebase In-App Messaging

Wiadomości w aplikacji Firebase (FIAM) pomagają Ci angażować użytkowników, którzy aktywnie korzystają z Twojej aplikacji, przez wysyłanie im ukierunkowanych i kontekstowych wiadomości zachęcających do wykonywania kluczowych działań w aplikacji, takich jak przejście poziomu w grze, kupno produktu lub subskrypcja treści.

Testy A/B Firebase

Testy A/B Firebase (ABT) oparte na Google Optimize pomagają w optymalizacji obsługi aplikacji, ułatwiając przeprowadzanie, analizowanie i skalowanie eksperymentów produktowych i marketingowych. Pozwalają one na testowanie zmian interfejsu, funkcji lub kampanii promujących związanych z aplikacją w celu sprawdzenia ich skuteczności w odniesieniu do kluczowych danych (takich jak przychody i retencja) przed wprowadzeniem ich na szeroką skalę.

Wymagania

Jeśli nie znasz dobrze platformy Flutter ani Firestore, najpierw wykonaj ćwiczenie z programowania Firebase dla Fluttera:

Ten przewodnik możesz wykonać na dowolnym z tych urządzeń:

• fizyczne urządzenie (Android lub iOS) podłączone do komputera i ustawione w trybie deweloperskim;
• Symulator iOS. (Wymaga zainstalowania narzędzi Xcode).
• emulator Androida, (Wymaga konfiguracji w Android Studio).

Oprócz tego musisz mieć:

• wybraną przeglądarkę, np. Chrome;
• Wybrane IDE lub edytor tekstu, np. Android Studio lub VS Code, skonfigurowane za pomocą wtyczek Dart i Flutter. Zalecamy używanie VS Code z Flutterem.
• Najnowsza stabilna wersja Fluttera (lub wersja beta, jeśli lubisz nowości).
• Konto Google, np. konto Gmail, do tworzenia projektu Firebase i zarządzania nim.
• przykładowy kod z codelabu; W następnym kroku dowiesz się, jak uzyskać kod.

2. Pierwsze kroki

Pobierz kod

Sklonuj repozytorium GitHub z wiersza poleceń:

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

Przykładowy kod zostanie sklonowany do katalogu friendlyeats-flutter. Od teraz uruchamiaj polecenia z tego katalogu:

cd friendlyeats-flutter

Następnie przejdź do katalogu z ćwiczeniami i wyewidencjonuj gałąź fiam-abt:

git checkout fiam-abt

Ta gałąź zawiera cały kod potrzebny do tego ćwiczenia, w tym ukończoną wersję w folderze done. Pozostałe gałęzie tego repozytorium zawierają kod do tworzenia aplikacji FriendlyEats, jak pokazano w ćwiczeniach z programowania dotyczących platformy Firestore w Flutterze. Na potrzeby tego ćwiczenia usunęliśmy integrację z internetem w tej gałęzi.

Importowanie aplikacji startowej

Otwórz lub zaimportuj katalog codelab-fiam-abt do preferowanego środowiska IDE. Ten katalog zawiera kod początkowy do ćwiczenia z programowania, które polega na stworzeniu aplikacji do rekomendowania restauracji. W ramach tego ćwiczenia zaimplementujesz eksperyment z wiadomościami w aplikacji dla użytkowników tej aplikacji.

Tworzenie projektu Firebase

1. Zaloguj się w konsoli Firebase, korzystając ze swojego konta Google.
2. Kliknij przycisk, aby utworzyć nowy projekt, a potem wpisz jego nazwę (np. FriendlyEats).
   
3. Kliknij Dalej.
4. Po wyświetleniu monitu przeczytaj i zaakceptuj warunki usługi Firebase, a potem kliknij Dalej.
5. (Opcjonalnie) Włącz w konsoli Firebase pomoc AI (nazywaną „Gemini w Firebase”).
6. W tym samouczku Google Analytics jest potrzebne do optymalnego korzystania z usług Firebase, więc pozostaw włączony przełącznik opcji Google Analytics. Aby skonfigurować Google Analytics, postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.
7. Kliknij Utwórz projekt, poczekaj, aż projekt zostanie udostępniony, a następnie kliknij Dalej.

Gratulacje! Właśnie udało Ci się utworzyć pierwszy projekt Firebase.

Następnie dowiesz się, jak skonfigurować i włączyć niezbędne usługi za pomocą konsoli Firebase.

Włącz anonimowe uwierzytelnianie

Uwierzytelnianie nie jest głównym tematem tego laboratorium, ale ważne jest, aby w aplikacji była jakaś forma uwierzytelniania. Użyjesz anonimowego logowania, co oznacza, że użytkownik zostanie zalogowany w sposób niewidoczny, bez wyświetlania prośby o zalogowanie.

Aby włączyć anonimowe logowanie:

1. W konsoli Firebase na lewym pasku nawigacyjnym znajdź Uwierzytelnianie.
2. Kliknij Uwierzytelnianie, a następnie Rozpocznij i wybierz kartę Metoda logowania (lub przejdź bezpośrednio do konsoli Firebase).
3. Włącz dostawcę logowania Anonymous (Anonimowy) i kliknij Save (Zapisz).

Włączenie anonimowego logowania umożliwia aplikacji ciche logowanie użytkowników, gdy uzyskują oni do niej dostęp. Więcej informacji znajdziesz w dokumentacji uwierzytelniania anonimowego na Androida i iOS.

Konfigurowanie Cloud Firestore

Aplikacja korzysta z Cloud Firestore do zapisywania i odbierania informacji o restauracjach oraz ocen.

Aby skonfigurować Cloud Firestore w projekcie Firebase:

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a następnie wybierz Baza danych Firestore.
2. Kliknij Utwórz bazę danych.
3. W polu Identyfikator bazy danych pozostaw wartość (default).
4. Wybierz lokalizację bazy danych i kliknij Dalej.
   W przypadku prawdziwej aplikacji wybierz lokalizację, która jest blisko użytkowników.
5. Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W dalszej części tego laboratorium dodasz reguły bezpieczeństwa, aby zabezpieczyć swoje dane. Nierozpowszechniajani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa do bazy danych.
6. Kliknij Utwórz.

3. Konfiguracja Firebase na urządzenia mobilne

Większość zmian w kodzie wymaganych do włączenia obsługi Firebase jest już wprowadzona w projekcie, nad którym pracujesz. Aby jednak dodać obsługę platform mobilnych, musisz:

• Zarejestruj wybraną platformę w projekcie Firebase.
• Pobierz plik konfiguracji dla danej platformy i dodaj go do kodu.

W katalogu najwyższego poziomu aplikacji Flutter znajdują się podkatalogi o nazwach ios i android. Te katalogi zawierają pliki konfiguracji specyficzne dla platform iOS i Android.

Konfigurowanie iOS

W konsoli Firebase w górnej części paska nawigacyjnego po lewej stronie wybierz Ustawienia projektu, a na stronie Ogólne w sekcji Twoje aplikacje kliknij przycisk iOS.

Powinno pojawić się to okno:

1. Ważną wartością do podania jest identyfikator pakietu na iOS. Identyfikator pakietu uzyskasz, wykonując 3 kolejne czynności.

2. W narzędziu wiersza poleceń przejdź do katalogu najwyższego poziomu aplikacji Flutter.
3. Uruchom polecenie open ios/Runner.xcworkspace, aby otworzyć Xcode.

4. W Xcode kliknij element najwyższego poziomu Runner w panelu po lewej stronie, aby wyświetlić kartę General w panelu po prawej stronie, jak pokazano na ilustracji. Skopiuj wartość Identyfikator pakietu.

5. Wróć do okna Firebase, wklej skopiowany identyfikator pakietu w polu Identyfikator pakietu na iOS i kliknij Zarejestruj aplikację.

6. W Firebase wykonaj instrukcje, aby pobrać plik konfiguracyjny GoogleService-Info.plist.
7. Wróć do Xcode. Zwróć uwagę, że folder Runner zawiera podfolder o tej samej nazwie Runner (widoczny na poprzednim obrazie).
8. Przeciągnij plik GoogleService-Info.plist (pobrany przed chwilą) do podfolderu Runner.
9. W wyświetlonym w Xcode oknie kliknij Finish (Zakończ).
10. Wróć do konsoli Firebase. W kroku konfiguracji kliknij Dalej, pomiń pozostałe kroki i wróć na stronę główną konsoli Firebase.

Konfigurowanie aplikacji Flutter na iOS zostało zakończone.

Konfigurowanie Androida

1. W konsoli Firebase w górnej części paska nawigacyjnego po lewej stronie kliknij Ustawienia projektu, a następnie na stronie Ogólne w sekcji Twoje aplikacje kliknij przycisk Android.

Powinno się wyświetlić to okno :

2. Ważną wartością, którą należy podać, jest nazwa pakietu na Androida. Nazwę pakietu uzyskasz, wykonując te 2 czynności:

3. W katalogu aplikacji Flutter otwórz plik android/app/src/main/AndroidManifest.xml.
4. W elemencie manifest znajdź wartość ciągu atrybutu package. Jest to nazwa pakietu na Androida (np. com.yourcompany.yourproject). Skopiuj tę wartość.
5. W oknie Firebase wklej skopiowaną nazwę pakietu w polu Nazwa pakietu Androida.
6. W tym ćwiczeniu nie potrzebujesz certyfikatu SHA-1 do podpisywania aplikacji przed debugowaniem. Pozostaw to pole puste.
7. Kliknij Zarejestruj aplikację.
8. W Firebase wykonaj instrukcje, aby pobrać plik konfiguracyjny google-services.json.
9. Otwórz katalog aplikacji Flutter i przenieś plik google-services.json (pobrany przed chwilą) do katalogu android/app.
10. Wróć do konsoli Firebase, pomiń pozostałe kroki i wróć na stronę główną konsoli Firebase.
11. Cała konfiguracja Gradle jest już sprawdzona. Jeśli aplikacja nadal działa, zamknij ją i ponownie skompiluj, aby umożliwić Gradle zainstalowanie zależności.

Konfigurowanie aplikacji Flutter na Androida zostało zakończone.

4. Lokalne uruchamianie aplikacji

Możesz już zacząć pracę nad aplikacją. Najpierw uruchom aplikację lokalnie. Teraz możesz uruchomić aplikację na dowolnej skonfigurowanej platformie (dla której masz urządzenie i emulator).

Sprawdź, które urządzenia są dostępne, za pomocą tego polecenia:

flutter devices

W zależności od dostępnych urządzeń wynik powyższego polecenia będzie wyglądać mniej więcej tak:

Teraz uruchom aplikację lokalnie za pomocą tego polecenia:

flutter run

Powinna być teraz widoczna kopia aplikacji FriendlyEats połączona z projektem Firebase.

Aplikacja automatycznie połączy się z Twoim projektem Firebase i cicho zaloguje Cię jako anonimowego użytkownika.

5. Tworzenie i testowanie pierwszej wiadomości

Integrowanie funkcji Firebase Wysyłanie wiadomości w aplikacji z aplikacją

Podstawowa integracja wiadomości w aplikacji nie wymaga pisania kodu. Wystarczy dodać zależność i możesz zacząć korzystać z tej funkcji. Dodaj do pliku pubspec.yaml tę zależność:

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

Tworzenie wiadomości w konsoli Firebase

Po dodaniu do aplikacji wiadomości FIAM utwórzmy wiadomość, która będzie się wyświetlać przy pierwszym otwarciu aplikacji.

Aby napisać pierwszą wiadomość:

1. W sekcji Zaangażowanie w konsoli Firebase kliknij Wiadomości w aplikacji.
2. W panelu Wiadomości w aplikacji kliknij Utwórz pierwszą kampanię.

Utwórzmy podstawowy komunikat w oknie modalnym, aby sprawdzić, czy integracja działa. Możesz dowolnie dostosować wiadomość – dodawać obrazy i przyciski oraz zmieniać kolory.

Pamiętaj, aby kierować reklamy na aplikację, w której chcesz przeprowadzić testy. W zależności od wybranej ścieżki integracji możesz mieć do dyspozycji aplikacje na iOS, Androida lub obie te platformy.

Chcemy, aby wiadomość była wyświetlana po otwarciu aplikacji, więc domyślna konfiguracja harmonogramu będzie w tym przypadku odpowiednia.

Po zaplanowaniu możemy opublikować wiadomość. Kliknij „Sprawdź”. Powinien pojawić się ekran podobny do tego:

Wyświetlanie wiadomości w aplikacji

Odinstaluj i ponownie zainstaluj aplikację. Po jej otwarciu powinien pojawić się utworzony przez Ciebie komunikat. Gratulacje! Właśnie wysłano pierwszą wiadomość w aplikacji. W następnym kroku dowiesz się, jak dodać zdarzenie analityczne, aby wywoływać wiadomości w aplikacji na podstawie działań użytkowników w aplikacji.

6. Integracja z Firebase Analytics na potrzeby zaawansowanego wywoływania wiadomości

Zintegruj Firebase Analytics z aplikacją.

Aby dowiedzieć się, jak użytkownicy wchodzą w interakcje z naszą aplikacją, i wywoływać wiadomości w aplikacji na podstawie ich działań, dodamy teraz zdarzenie Analytics, które będzie rejestrować kliknięcie restauracji przez użytkownika.

1. Dodaj zależność Firebase Analytics do Flutera w pubspec.yaml

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

2. Importowanie danych analitycznych w usłudze home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

3. Dodaj instancję Firebase Analytics do klasy HomePage w 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. Uruchamiaj zdarzenie analityczne, gdy użytkownik kliknie kartę restauracji w home_page.dart

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

Edytowanie wiadomości, aby była aktywowana przez zdarzenie Analytics

Mamy już zdarzenie „click_restaurant”. Wywołajmy teraz wiadomość w aplikacji na jego podstawie, a nie wtedy, gdy użytkownik otworzy aplikację.

W konsoli Firebase wróć do wiadomości w aplikacji i edytuj dotychczasową kampanię.

Teraz zmień sekcję planowania, aby uruchamiać wiadomość z nowego wydarzenia.

Następnie możemy opublikować zmiany, klikając przycisk „Sprawdź”.

Testowanie wyzwalacza w aplikacji

W tym momencie powinna być już możliwość uruchomienia aplikacji za pomocą

flutter run

Po kliknięciu restauracji powinna wyświetlić się wiadomość w aplikacji.

7. Tworzenie kampanii FIAM+ABT

Rozpocznij od celu

Nasza aplikacja Friendlyeats już wygląda świetnie, ale aby była przydatna, musimy mieć jakieś opinie. Będą one pochodzić od użytkowników Friendlyeats, więc musimy znaleźć sposób, aby zachęcić ich do zostawiania opinii.

Najpierw zdefiniujmy zdarzenie konwersji

Chcemy sprawdzić, czy użytkownicy przeglądają restauracje, więc dodajmy zdarzenie analityczne, aby zmierzyć to zachowanie.

1. Zaimportuj Firebase Analytics tak jak wcześniej i dodaj instancję Analytics do RestaurantPage w 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. Teraz wywołajmy zdarzenie w _onCreateReviewPressed, gdy zapiszemy opinię w 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);
 }

Konfigurowanie testu A/B w konsoli Firebase

Wiesz już, jak tworzyć kampanie z wiadomościami w aplikacji. Teraz zastanówmy się, jakie zachowania użytkowników chcemy zachęcać w aplikacji za pomocą tych kampanii. W przypadku FriendlyEats chcemy, aby więcej osób zostawiało opinie, co zwiększy użyteczność aplikacji. Możemy zachęcić użytkowników do korzystania z tej funkcji za pomocą wiadomości w aplikacji. Jednym ze sposobów jest prosta wiadomość w aplikacji, która informuje użytkownika, że powinien wystawić restauracji opinię, aby pomóc w ulepszaniu aplikacji FriendlyEats. Innym sposobem jest użycie wiadomości w aplikacji, aby zaoferować użytkownikowi zachętę do wystawienia opinii, np. kupon lub kod rabatowy do danej restauracji.

Oba podejścia mogą zwiększyć częstotliwość wystawiania opinii o restauracjach w aplikacji FriendlyEats, a oferowanie kuponu może mieć w tym przypadku jeszcze większy wpływ. Ale o ile bardziej prawdopodobne jest, że użytkownicy napiszą opinię, jeśli otrzymają kupon? Czy kupon jest w ogóle wart swojej ceny? Aby to sprawdzić, przeprowadzimy eksperyment wysyłania wiadomości w aplikacji. Za pomocą testów A/B Firebase możemy losowo wyświetlać użytkownikom jedną z wiadomości w aplikacji i mierzyć jej wpływ na zachowanie użytkowników, podobnie jak w przypadku badań klinicznych. Co najważniejsze, możesz to zrobić w całości w konsoli Firebase, bez konieczności pisania kodu.

Aby utworzyć pierwszy eksperyment wysyłania wiadomości w aplikacji:

1. W sekcji Zaangażowanie w konsoli Firebase kliknij Testy A/B.
2. Kliknij Utwórz eksperyment i wybierz eksperyment z wiadomościami w aplikacji. Spowoduje to otwarcie kompozytora eksperymentów widocznego poniżej.

Nadaj eksperymentowi nazwę i opcjonalnie dodaj opis.

4. W następnym kroku utworzysz różne wiadomości w aplikacji, które będziesz wysyłać do użytkowników w ramach eksperymentu. Pierwsza wiadomość w aplikacji, którą utworzymy, będzie „bazowa” lub kontrolna w naszym eksperymencie. Możemy użyć prostego komunikatu „prosimy o opinię”:

5. Mając już punkt odniesienia, możemy utworzyć wariant, czyli wiadomość w aplikacji, która oferuje użytkownikom kod kuponu, aby zachęcić ich do wystawienia opinii. Nie jest to w pełni widoczne w podglądzie poniżej, ale tytuł wiadomości to „Weź kupon, zostaw opinię!”, a treść wiadomości to „Przy następnej wizycie w Burrito Cafe użyj kodu kuponu FRIENDLYEATS-15 przy płatności, aby uzyskać 15% rabatu na zamówienie. I nie zapomnij potem zostawić opinii”. Mamy nadzieję, że zachęci to niektórych użytkowników do odwiedzenia Burrito Cafe.

W następnym kroku określimy docelową aplikację i ustawimy ekspozycję. Jest to odsetek kwalifikujących się użytkowników (spełniających warunki kierowania lub wyzwalania), którzy zobaczą jedną z wiadomości w eksperymencie. W tym przykładzie możemy ustawić wartość 100%, ponieważ chcemy, aby wszyscy użytkownicy widzieli wersję podstawową lub wariant z kuponem. Jeśli chcesz mieć grupę kontrolną, której nie wyświetla się żadna wiadomość w aplikacji, możesz zmniejszyć ten odsetek.

7. Następnie określisz cele eksperymentu. Jest to wynik eksperymentu, który chcemy zmierzyć. Ustawimy to jako review_successwydarzenie analityczne zdefiniowane w poprzedniej sekcji, ponieważ chcemy zobaczyć, jaki wpływ różne komunikaty w aplikacji mają na użytkowników, którzy zostawiają opinie o restauracjach.
8. W przypadku harmonogramu ustawimy natychmiastowe rozpoczęcie kampanii i click_restaurant jako warunek wyzwalający, aby użytkownicy widzieli jeden z 2 komunikatów w aplikacji, gdy klikną restaurację.

9. Teraz wystarczy przejrzeć eksperyment i kliknąć Rozpocznij eksperyment. Teraz możemy się odprężyć i poczekać na dane z eksperymentu.

Sprawdzanie gromadzenia danych w czasie rzeczywistym

Po rozpoczęciu eksperymentu użytkownicy FriendlyEats będą losowo widzieć jeden z 2 komunikatów w aplikacji, które przygotowaliśmy, gdy klikną restaurację – komunikat bazowy lub komunikat wariantowy. Dzięki temu podzielimy użytkowników na 2 grupy w zależności od tego, którą wiadomość zobaczyli. Następnie możemy w konsoli Firebase (ponownie w sekcji Testy A/B) porównać dane analityczne na żywo z obu grup. Zbieranie danych zajmie trochę czasu, ponieważ musimy poczekać, aż użytkownicy zobaczą wiadomości w aplikacji i odpowiednio zareagują. Oto jak mogą wyglądać wyniki po zebraniu wystarczającej ilości danych:

W tym przypadku wariant znacznie poprawił wyniki w porównaniu z wartością bazową, więc możemy kliknąć Wdróż wariant, co spowoduje wdrożenie wiadomości w aplikacji z kuponem dla wszystkich użytkowników.

8. Gratulacje

Gratulacje! Udało Ci się utworzyć i przeprowadzić pierwszy eksperyment dotyczący wiadomości w aplikacji. Teraz możesz przeprowadzić eksperyment w swojej aplikacji i wykorzystać jego wyniki, aby zwiększyć skuteczność kampanii z wiadomościami w aplikacji.

Co dalej?

Wypróbuj te ćwiczenia z programowania:

• Firestore Flutter na wielu platformach
• Dodawanie eksperymentu Zdalnej konfiguracji Firebase do aplikacji na Androida

Więcej informacji

To tylko niewielka część możliwości, jakie dają funkcje Firebase Wysyłanie wiadomości w aplikacji i Testy A/B Firebase. Jeśli chcesz dowiedzieć się więcej, zapoznaj się z tymi materiałami:

• Tworzenie eksperymentów z wiadomościami za pomocą testów A/B
• Tworzenie eksperymentów Zdalnej konfiguracji z testami A/B
• Poznaj przypadki użycia funkcji Firebase Wysyłanie wiadomości w aplikacji
• Dostosowywanie wiadomości w funkcji Firebase Wysyłanie wiadomości w aplikacji

Dokumentacja

• Tworzenie eksperymentów wysyłania wiadomości w aplikacji za pomocą testów A/B