Ta strona została przetłumaczona przez Cloud Translation API.

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

1. Wprowadzenie

Cele

W tym ćwiczeniu z programowania przeprowadzisz eksperyment dotyczący wysyłania wiadomości w aplikacji mobilnej z rekomendacjami restauracji na różnych platformach, która korzysta z Fluttera i Cloud Firestore.

Po zakończeniu kursu 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

Korzystanie z funkcji Firebase Wysyłanie wiadomości w aplikacji w aplikacji Flutter
Jak dostosować wygląd wiadomości w aplikacji
Projektowanie eksperymentu wysyłania wiadomości w aplikacji i jego implementowanie
Interpretowanie wyników eksperymentu dotyczącego wysyłania wiadomości w aplikacji

Czego chcesz się nauczyć z tego Codelab?

Jestem nowicjuszem w tym temacie i chcę uzyskać ogólny wgląd.

Wiem już coś na ten temat, ale chcę się przypomnieć.

Szukam przykładowego kodu do użycia w moim projekcie.

Szukam wyjaśnienia czegoś konkretnego.

Wysyłanie wiadomości w aplikacji Firebase

Wiadomości w aplikacji Firebase (FIAM) pomagają Ci zachęcać użytkowników, którzy aktywnie korzystają z Twojej aplikacji, do podejmowania kluczowych działań w aplikacji, takich jak przejście do kolejnego poziomu w grze, zakup produktu czy 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 wskaźników (np. przychodów i utrzymania użytkowników) przed ich wprowadzeniem na dużą skalę.

Co będzie potrzebne

Jeśli nie znasz dobrze Fluttera ani Firestore, najpierw ukończ Firebase dla Fluttera:

Możesz uruchomić to ćwiczenie na dowolnym z tych urządzeń:

Urządzenie fizyczne (z Androidem lub iOS) połączone z komputerem i ustawione w trybie programisty.
symulatora iOS; (wymaga instalacji narzędzi Xcode).
Emulator Androida. (wymaga konfiguracji w Android Studio).

Oprócz tego musisz mieć:

przeglądarkę, np. Chrome;
Wybrane przez siebie środowisko IDE lub edytor tekstu, np. Android Studio czy VS Code skonfigurowane z pluginami Dart i Flutter. Zalecamy używanie VS Code z Flutterem.
najnowsza stabilna wersja Flutter (lub wersja beta, jeśli lubisz eksperymentować).
Konto Google, np. konto Gmail, do tworzenia projektu Firebase i zarządzania nim.
Przykładowy kod w laboratorium programistycznym. Aby dowiedzieć się, jak uzyskać kod, przejdź do następnego kroku.

2. Konfiguracja

Pobierz kod

Sklonuj repozytorium GitHub z poziomu wiersza poleceń:

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

Przykładowy kod zostanie skopiowany do katalogu friendlyeats-flutter. Od tej pory uruchom polecenia z tego katalogu:

cd friendlyeats-flutter

Następnie przejdź do katalogu codelab i wybierz gałąź fiam-abt:

git checkout fiam-abt

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

Importowanie aplikacji startowej

Otwórz lub zaimportuj katalog codelab-fiam-abt do preferowanego środowiska IDE. Ten katalog zawiera kod początkowy dla ćwiczenia z programowania, które obejmuje aplikację do rekomendowania restauracji. Dzięki temu ćwiczeniu z programowania możesz przeprowadzić eksperyment dotyczący wysyłania wiadomości w aplikacji dla jej użytkowników.

Tworzenie projektu Firebase

W konsoli Firebase kliknij Dodaj projekt, a potem nadaj projektowi Firebase nazwę FriendlyEats. Zapamiętaj identyfikator swojego projektu Firebase (lub kliknij ikonę Edytuj, aby ustawić preferowany identyfikator projektu).
Upewnij się, że w projekcie włączona jest usługa Google Analytics, a potem kliknij Dalej.
Kliknij Utwórz projekt.

Gratulacje! Właśnie utworzysz swój pierwszy projekt Firebase. Teraz możesz kliknąć nazwę projektu, aby otworzyć konsolę.

Następnie skonfigurujesz i włączysz niezbędne usługi w konsoli Firebase.

Włączanie uwierzytelniania anonimowego

Chociaż uwierzytelnianie nie jest tematem tego Codelab, warto zastosować w aplikacji jakąś formę uwierzytelniania. Użyjesz logowania anonimowego, co oznacza, że użytkownik zostanie po cichu zalogowany bez wyświetlania prośby.

Aby włączyć logowanie anonimowe:

W konsoli Firebase na pasku nawigacyjnym po lewej stronie odszukaj Uwierzytelnianie.
Kliknij kolejno Uwierzytelnianie, Rozpocznij i kartę Metoda logowania (lub przejdź bezpośrednio do konsoli Firebase).
Włącz dostawcę logowania Anonimowy i kliknij Zapisz.

Włączenie logowania anonimowego pozwala aplikacji automatycznie logować użytkowników podczas korzystania z aplikacji. Więcej informacji znajdziesz w dokumentacji dotyczącej uwierzytelniania anonimowego na Androidzie i iOS.

Konfigurowanie Cloud Firestore

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

Aby skonfigurować Cloud Firestore w projekcie Firebase:

W panelu po lewej stronie w konsoli Firebase rozwiń Kompilacja, a potem wybierz Baza danych Firestore.
Kliknij Utwórz bazę danych.
Pozostaw wartość (default) w polu Identyfikator bazy danych.
Wybierz lokalizację bazy danych, a potem kliknij Dalej.
W przypadku prawdziwej aplikacji wybierz lokalizację blisko użytkowników.
Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
W dalszej części tego Codelab dodasz reguły bezpieczeństwa, aby chronić swoje dane. Nie udostępniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa dla bazy danych.
Kliknij Utwórz.

3. Konfiguracja Firebase na urządzenia mobilne

Większość zmian kodu wymaganych do obsługi Firebase została już sprawdzona w projekcie, nad którym pracujesz. Aby jednak dodać obsługę platform mobilnych, musisz:

Zarejestruj odpowiednią 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 platformy iOS i Android.

Konfigurowanie iOS

W konsoli Firebase kliknij Ustawienia projektu u góry paska nawigacyjnego po lewej stronie, a na stronie Ogólne kliknij przycisk iOS w sekcji Twoje aplikacje.

Powinien pojawić się ten dialog:

Ważną wartością jest identyfikator pakietu na iOS. Aby uzyskać identyfikator pakietu, wykonaj 3 kolejne kroki.

W narzędzie wiersza poleceń przejdź do katalogu najwyższego poziomu aplikacji Flutter.
Aby otworzyć Xcode, uruchom polecenie open ios/Runner.xcworkspace.

W Xcode w lewym panelu kliknij najwyższy poziom Runner, aby wyświetlić kartę Ogólne w prawym panelu, jak pokazano na ilustracji. Skopiuj wartość Identyfikator pakietu.

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

W Firebase postępuj zgodnie z instrukcjami, aby pobrać plik konfiguracji GoogleService-Info.plist.
Wróć do Xcode. Zwróć uwagę, że folder Runner ma podfolder o tej samej nazwie (jak widać na poprzednim obrazku).
Przeciągnij plik GoogleService-Info.plist (który właśnie został pobrany) do podfolderu Runner.
W oknie, które się wyświetli w Xcode, kliknij Zakończ.
Wróć do konsoli Firebase. W kroku konfiguracji kliknij Dalej, pomiń pozostałe kroki i wróć na stronę główną konsoli Firebase.

Konfiguracja aplikacji Flutter na iOS została zakończona.

Skonfiguruj Androida

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

Powinien wyświetlić się ten komunikat :

Ważną wartością jest nazwa pakietu na Androida. Aby uzyskać nazwę pakietu, wykonaj te 2 kroki:

W katalogu aplikacji Flutter otwórz plik android/app/src/main/AndroidManifest.xml.
W elemencie manifest znajdź ciąg znaków atrybutu package. Ta wartość to nazwa pakietu na Androida (np. com.yourcompany.yourproject). Skopiuj tę wartość.
W oknie Firebase wklej skopiowaną nazwę pakietu w polu Nazwa pakietu na Androida.
W tym ćwiczeniu nie potrzebujesz certyfikatu SHA-1 do podpisywania aplikacji przed debugowaniem. Pozostaw to pole puste.
Kliknij Zarejestruj aplikację.
W konsoli Firebase postępuj zgodnie z instrukcjami, aby pobrać plik konfiguracji google-services.json.
Otwórz katalog aplikacji Flutter i przenieś pobrany właśnie plik google-services.json do katalogu android/app.
W konsoli Firebase pomiń pozostałe kroki i wróć na jej stronę główną.
Cała konfiguracja Gradle została już sprawdzona. Jeśli aplikacja nadal działa, zamknij ją i utwórz ją ponownie, aby Gradle mógł zainstalować zależności.

Konfiguracja aplikacji Flutter na Androida została zakończona.

4. Uruchamianie aplikacji lokalnie

Możesz zacząć pracować nad aplikacją. Najpierw uruchom aplikację lokalnie. Aplikację możesz teraz uruchomić na dowolnej skonfigurowanej platformie (i na której masz dostępne urządzenie i dziennik).

Aby sprawdzić, które urządzenia są dostępne, użyj tego polecenia:

flutter devices

W zależności od tego, które urządzenia są dostępne, wynik poprzedniego polecenia będzie wyglądał mniej więcej tak:

Uruchom aplikację lokalnie za pomocą tego polecenia:

flutter run

Powinna się teraz wyświetlić kopia aplikacji FriendlyEats połączona z Twoim projektem Firebase.

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

5. Tworzenie i testowanie pierwszej wiadomości

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

Podstawowa integracja z wiadomościami w aplikacji nie wymaga pisania kodu. Wystarczy dodać zależność, a gotowe! Dodaj do pliku pubspec.yaml te zależności:

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

Tworzenie wiadomości w konsoli Firebase

Teraz, gdy dodasz do aplikacji FIAM, spróbujmy sformułować wiadomość, która będzie się wyświetlać po pierwszym uruchomieniu aplikacji.

Aby stworzyć pierwszą wiadomość:

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

Aby sprawdzić, czy integracja działa, utwórz podstawowy komunikat w oknie modalnym. Możesz dowolnie dostosować wiadomość – dodać obrazy, przyciski lub zmienić kolory.

Upewnij się, że kierujesz reklamy na aplikację, którą chcesz przetestować. W zależności od wybranej ścieżki integracji możesz mieć iOS, Androida lub oba te systemy.

Chcemy się upewnić, że wiadomość zostanie uruchomiona po otwarciu aplikacji, więc domyślna konfiguracja harmonogramu będzie tutaj działać.

Gdy skończysz planowanie, będziemy mogli opublikować wiadomość. Kliknij „Sprawdź”, a powinien pojawić się ekran podobny do tego

Wyświetlanie wiadomości w aplikacji

Teraz odinstaluj aplikację i zainstaluj ją ponownie. Po jej otwarciu powinien wyświetlić się utworzony komunikat. Gratulacje! Wysłano właśnie pierwsze wiadomość w aplikacji. W następnym kroku dowiesz się, jak dodać zdarzenie analityczne, aby wywoływać wiadomość w aplikacji na podstawie działań użytkowników w aplikacji.

6. Integracja Firebase Analytics na potrzeby zaawansowanego uruchamiania wiadomości

Integracja Analytics Firebase 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 zdarzenie Analytics, gdy użytkownik kliknie restaurację.

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

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

Importowanie funkcji analitycznych w home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

Dodaj instancję Firebase Analytics do klasy HomePage w pliku home_page.dart.

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

Uruchamianie zdarzenia Analytics, 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));
})

Edytuj wiadomość, aby wywołać ją po zdarzeniu Analytics

Teraz, gdy mamy zdarzenie „click_restaurant”, skonfigurujmy wywoływanie wiadomości w aplikacji na podstawie tego zdarzenia, a nie otwierania aplikacji przez użytkownika.

W konsoli Firebase wróć do sekcji Wiadomość w aplikacji i edytuj istniejącą kampanię.

Teraz zmień sekcję planowania, aby uruchomić wiadomość z nowego zdarzenia.

Możemy opublikować zmiany, klikając przycisk „sprawdź”.

Testowanie reguły w aplikacji

W tym momencie aplikacja powinna działać z

flutter run

Gdy klikniesz restaurację, powinieneś zobaczyć wiadomość w aplikacji.

7. Tworzenie kampanii FIAM+ABT

Rozpocznij od celu

Nasza aplikacja Friendlyeats wygląda już świetnie, ale żeby była przydatna, potrzebujemy opinii. Będą one pochodzić od użytkowników Friendlyeats, więc musimy znaleźć sposób na zachęcenie ich do zamieszczania opinii.

Najpierw określmy zdarzenie konwersji

Chcemy sprawdzić, czy użytkownicy oceniają restauracje, więc dodajmy zdarzenie Analytics, aby mierzyć to zachowanie.

Zaimportuj Firebase Analytics tak jak poprzednio 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);
}

Teraz spróbujemy wywołać zdarzenie _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

Teraz, gdy już wiesz, jak tworzyć kampanie z wiadomościami w aplikacji, zastanów się, jakiego zachowania chcesz zachęcać do podejmowania w aplikacji za pomocą tych kampanii. W przypadku FriendlyEats chcielibyśmy, aby więcej osób zamieszczało opinie, które sprawiłyby, że aplikacja byłaby bardziej przydatna. Istnieje kilka sposobów zachęcania użytkowników do tego za pomocą wiadomości w aplikacji. Pierwszym jest wysłanie prostej wiadomości w aplikacji, która informuje użytkownika, że powinien on napisać opinię o restauracji, aby pomóc w ulepszeniu aplikacji FriendlyEats. Drugim sposobem jest wysłanie wiadomości w aplikacji, która zachęca do napisania opinii, np. oferując kupon lub kod zniżkowy do danej restauracji.

Oba te podejścia mogą zwiększyć częstotliwość publikowania przez użytkowników opinii o restauracjach w FriendlyEats, a jak się wydaje, udostępnienie kuponu może mieć w tym przypadku jeszcze większy wpływ. Ale o ile większa jest szansa, że użytkownicy napiszą opinię, jeśli otrzymają kupon? Czy w ogóle warto kupić ten kupon? Aby to sprawdzić, przeprowadzimy eksperyment dotyczący wysyłania wiadomości w aplikacji. Korzystając z testów A/B Firebase, możemy losowo wyświetlać użytkownikom jeden z naszych komunikatów w aplikacji i mierzyć wpływ tego komunikatu na ich zachowanie, podobnie jak w przypadku badań klinicznych. Co najlepsze, możesz to zrobić w konsoli Firebase bez konieczności pisania kodu.

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

W sekcji Zaangażowanie konsoli Firebase kliknij Testy A/B.
Kliknij Utwórz eksperyment i wskaż, że chcesz przeprowadzić eksperyment z wiadomościami w aplikacji. Otworzy się kreator eksperymentu, jak pokazano poniżej.

Nazwij eksperyment i opcjonalnie dodaj opis.

W kolejnym kroku utworzysz różne wiadomości w aplikacji, które wyślesz do użytkowników w ramach eksperymentu. Pierwszy komunikat w aplikacji, który utworzymy, będzie „wartością bazową” lub grupą kontrolną w naszym eksperymencie. Możemy użyć tego prostego komunikatu:

Teraz, gdy mamy już wartość bazową, utworzymy wariant, czyli wiadomość w aplikacji z ofertą kodu kuponu, aby zachęcić użytkowników do pozostawienia opinii. Na poniższym podglądzie nie widać tego w pełni, ale tytuł wiadomości brzmi „Weź kupon i zostaw opinię”, a treść wiadomości brzmi „Podczas następnej wizyty w Burrito Cafe użyj kodu kuponu FRIENDLYEATS-15 przy kasie, aby otrzymać 15% zniżki na zamówienie. I pamiętaj, aby później zostawić opinię”. Mamy nadzieję, że zachęci to użytkowników do odwiedzenia Burrito Cafe.

W następnym kroku ustawimy kierowanie na naszą aplikację i wyświetlalność. Jest to odsetek kwalifikujących się użytkowników (którzy spełniają warunki kierowania lub warunków aktywacji), którzy zobaczą jedną z wiadomości w eksperymencie. W tym przykładzie ustawiamy go na 100%, ponieważ chcemy, aby wszyscy użytkownicy widzieli wariant podstawowy lub wariant z kuponami. Jeśli chcesz mieć grupę kontrolną, której nie wyświetla się żadnych wiadomości w aplikacji, możesz zmniejszyć ten odsetek ekspozycji.

Następnie określ cele eksperymentu. Jest to wynik eksperymentu, który chcemy zmierzyć. Ustawimy to jako zdarzenie analityczne review_success zdefiniowane w poprzedniej sekcji, ponieważ chcemy sprawdzić, jak różne komunikaty w aplikacji wpływają na to, czy użytkownicy wystawiają opinie o restauracji.
W ramach harmonogramu kampania rozpocznie się natychmiast, a jako warunek aktywacji ustawimy click_restaurant, aby użytkownicy widzieli jeden z 2 komunikatów w aplikacji po kliknięciu restauracji.

Teraz wystarczy przejrzeć eksperyment i kliknąć Rozpocznij eksperyment. Możemy wtedy usiąść wygodnie i czekać na dane z eksperymentu.

Sprawdzanie gromadzenia danych w czasie rzeczywistym

Po rozpoczęciu eksperymentu użytkownicy FriendlyEats będą losowo widzieć jeden z 2 komunikatu wyświetlanych w aplikacji po kliknięciu restauracji: element bazowy lub wariant. Dzięki temu użytkownicy zostaną podzieleni na 2 grupy na podstawie tego, który komunikat zobaczyli. Następnie możesz przejść do konsoli Firebase (ponownie do sekcji Testy A/B), aby porównać dane analityczne na żywo z obu grup. Dane będą się zbierać przez jakiś czas, ponieważ musimy poczekać, aż użytkownicy zobaczą wiadomości w aplikacji i zareagują na nie. Oto, jak mogą wyglądać wyniki po zebraniu wystarczającej ilości danych:

W tym przypadku wariant znacznie poprawił wyniki podstawowe, więc mogliśmy wybrać opcję Wdrażanie wariantu, która umożliwiła wdrożenie wiadomości z kuponem we wszystkich aplikacjach.

8. Gratulacje

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

Co dalej?

Zapoznaj się z tymi ćwiczeniami z programowania

Więcej informacji

To tylko wierzchołek góry 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,

Dokumenty referencyjne

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