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 ramach tego ćwiczenia w Codelabs zademonstrujesz eksperyment dotyczący wysyłania wiadomości w aplikacji wykorzystującej Flutter i Cloud Firestore oraz wieloplatformową aplikację rekomendacji restauracji.

Po ukończeniu kursu będziesz w stanie zaprojektować i wdrożyć eksperymenty z wyświetlaniem wiadomości w aplikacji, które pozwolą skutecznie zwiększyć zaangażowanie użytkowników w dowolne aplikacje na iOS i Androida, nie wymagając przy tym napisania 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
Jak interpretować wyniki eksperymentu dotyczącego wysyłania wiadomości w aplikacji

Czego chcesz się dowiedzieć z tego ćwiczenia z programowania?

Jestem w tym nowym temacie i chcę uzyskać ogólne informacje na ten temat.

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

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

Potrzebuję wyjaśnienia czegoś konkretnego.

Wysyłanie wiadomości w aplikacji za pomocą Firebase

Funkcja Firebase Wysyłanie wiadomości w aplikacji (FIAM) pomaga zaangażować użytkowników, którzy aktywnie korzystają z Twojej aplikacji, wysyłając im ukierunkowane i kontekstowe wiadomości, które skłaniają ich do wykonania kluczowych działań w aplikacji, takich jak przejście poziomu w grze, zakup przedmiotu lub zasubskrybowanie treści.

Testy A/B Firebase

Dzięki wsparciu Google Optimize Testy A/B Firebase (ABT) pomagają zoptymalizować korzystanie z aplikacji, ułatwiając przeprowadzanie, analizowanie i skalowanie eksperymentów produktowych i marketingowych. Dzięki niej możesz testować zmiany w interfejsie aplikacji, jej funkcjach lub kampaniach budujących zaangażowanie, aby sprawdzić, czy faktycznie wpływają one na kluczowe wskaźniki (takie jak przychody i utrzymanie) jeszcze przed ich powszechnym wprowadzeniem.

Co będzie potrzebne

Jeśli nie znasz technologii Flutter lub Firestore, najpierw wykonaj ćwiczenia z programowania w Firebase dla Flutter:

To ćwiczenie z programowania możesz uruchomić na dowolnym z tych urządzeń:

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

Oprócz tego musisz mieć:

wybraną przeglądarkę, na przykład 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 z ćwiczeń w Codelabs. 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 teraz uruchamiaj 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 niezbędny do wykonania tego ćwiczenia z programowania, w tym ukończoną wersję z folderu done. Pozostałe gałęzie w tym repozytorium zawierają kod do tworzenia aplikacji FriendsEats, co pokazano w wieloplatformowym ćwiczeniu z programowania Firestore Flutter. Na potrzeby tego ćwiczenia w Codelabs usunęliśmy integrację internetową z tej gałęzi.

Zaimportuj aplikację startową

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 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 udało Ci się utworzyć pierwszy projekt Firebase. Teraz możesz kliknąć nazwę projektu, aby otworzyć konsolę.

Następnie przejdziesz przez proces konfigurowania i włączania niezbędnych usług za pomocą konsoli Firebase.

Włącz anonimowe uwierzytelnianie

Chociaż uwierzytelnianie nie jest głównym tematem tego ćwiczenia z programowania, ważne jest stosowanie w aplikacji jakiejś formy uwierzytelniania. Korzystasz z logowania anonimowego, co oznacza, że użytkownik loguje się dyskretnie bez pytania.

Aby włączyć anonimowe logowanie:

W konsoli Firebase znajdź na pasku nawigacyjnym po lewej stronie Uwierzytelnianie.
Kliknij Uwierzytelnianie, a następnie Rozpocznij i wybierz kartę Metoda logowania (lub otwórz konsolę Firebase bezpośrednio).
Włącz Anonimowego dostawcę logowania i kliknij Zapisz.

Włączenie logowania anonimowego umożliwia aplikacji dyskretne logowanie użytkowników po uzyskaniu dostępu do niej. Aby dowiedzieć się więcej, zapoznaj się z dokumentacją anonimowego uwierzytelniania dla Androida oraz iOS.

Konfigurowanie Cloud Firestore

Aplikacja używa Cloud Firestore do zapisywania i odbierania informacji o restauracjach 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.
W polu Identyfikator bazy danych pozostaw wartość (default).
Wybierz lokalizację bazy danych i kliknij Dalej.
W przypadku prawdziwej aplikacji musisz wybrać lokalizację znajdującą się w pobliżu użytkowników.
Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł zabezpieczeń.
W dalszej części tego ćwiczenia z programowania dodasz reguły zabezpieczeń, aby zabezpieczyć 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 włączenia 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. Katalogi zawierają pliki konfiguracyjne platformy odpowiednio dla iOS i Androida.

Skonfiguruj 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.

Wyświetli się to okno:

Należy podać identyfikator pakietu na iOS. Aby uzyskać identyfikator pakietu, wykonaj 3 kolejne kroki.

W narzędziu 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 dialogowym wyświetlonym w Xcode kliknij Finish (Zakończ).
Wróć do konsoli Firebase. W kroku konfiguracji kliknij Dalej, pomiń pozostałe kroki i wróć na stronę główną konsoli Firebase.

Twoja aplikacja Flutter na iOS została skonfigurowana.

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:

Najważniejszą 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ź wartość w postaci ciągu 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.
Do wykonania tego ćwiczenia w Codelabs nie potrzebujesz certyfikatu podpisywania SHA-1. Pozostaw to pole puste.
Kliknij Zarejestruj aplikację.
W konsoli Firebase postępuj zgodnie z instrukcjami, aby pobrać plik konfiguracji google-services.json.
Przejdź do katalogu aplikacji Flutter i przenieś plik google-services.json (pobrany przed chwilą) 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 już zacząć pracę nad aplikacją. Najpierw uruchom aplikację lokalnie. Teraz możesz uruchomić aplikację na dowolnej skonfigurowanej platformie (i na której masz dostępne urządzenie lub emulator).

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

flutter devices

W zależności od dostępnych urządzeń dane wyjściowe poprzedniego polecenia będą wyglądały mniej więcej tak:

Teraz 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 projektem Firebase i będzie Cię dyskretnie logowała jako anonimowy użytkownik.

5. Tworzenie i testowanie pierwszej wiadomości

Zintegruj funkcję wysyłania wiadomości w aplikacji Firebase z aplikacją

Podstawowa integracja z funkcją wysyłania wiadomości w aplikacji jest całkowicie bezkodowa – wystarczy dodać zależność. Dodaj tę zależność do pliku pubspec.yaml

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

Tworzenie wiadomości w konsoli Firebase

Dodałeś/dodałaś do aplikacji FIAM. Teraz możesz stworzyć wiadomość, która będzie się wyświetlać po pierwszym uruchomieniu aplikacji.

Aby stworzyć pierwszą wiadomość:

W sekcji Zaangażowanie w konsoli Firebase kliknij Przesyłanie 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 wszystko będzie gotowe, będziemy mogli opublikować wiadomość. Kliknij „Sprawdź”, a powinien pojawić się ekran podobny do tego

Wyświetl wiadomość w aplikacji

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

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

Zintegruj Firebase Analytics ze swoją aplikacją

Aby lepiej zrozumieć, jak użytkownicy wchodzą w interakcję z naszą aplikacją, i na podstawie ich działań uruchamiać w niej wiadomość, dodajemy teraz zdarzenie Analytics, w przypadku którego 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 wystąpienie Firebase Analytics do klasy strony głównej 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();
}

Uruchom 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));
})

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.

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

Przetestuj aktywator w aplikacji

Od tego momentu aplikacja powinna być już

flutter run

Gdy klikniesz restaurację, powinna wyświetlić się wiadomość w aplikacji.

7. Utwórz kampanię FIAM+ABT

Zacznij od celu

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

Najpierw zdefiniujmy zdarzenie konwersji

Chcemy sprawdzić, czy użytkownicy oceniają restauracje, dlatego możesz dodać zdarzenie analityczne, aby objąć pomiarem te zachowania.

Zaimportuj Firebase Analytics tak jak dotychczas i dodaj wystąpienie Analytics do strony RestaurantPage w usłudze 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 wywołamy zdarzenie w _onCreateReviewPressed, gdy zapiszemy opinię w aplikacji 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);
 }

Skonfiguruj Test 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. Możemy Cię do tego zachęcić za pomocą wiadomości w aplikacji na kilka sposobów. Pierwszym z nich jest wyświetlanie w aplikacji prostej wiadomości, która informuje użytkownika, że powinien ocenić restaurację i podzielić się opinią na jej temat. Innym sposobem jest wykorzystanie komunikatu w aplikacji jako zachęty do wystawienia opinii, np. w postaci kuponu lub kodu zniżkowego do danej restauracji.

Oba podejścia mogą zwiększyć częstotliwość dodawania opinii o restauracjach w witrynie FriendsEats i wygląda na to, że w tym przypadku zastosowanie kuponu może mieć 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. A co najważniejsze – możesz to zrobić w całości za pomocą konsoli Firebase, bez potrzeby pisania kodu.

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

W sekcji Engage (Zaangażowanie) w konsoli Firebase kliknij Testy A/B.
Kliknij Utwórz eksperyment i wskaż, że chcesz przeprowadzić eksperyment z wiadomościami w aplikacji. Spowoduje to przejście do okna tworzenia eksperymentu.

Nazwij eksperyment i opcjonalnie dodaj opis.

W następnym 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. Nie jest to w pełni widoczne na podglądzie poniżej. Tytuł wiadomości brzmi: „Kup kupon, zostaw recenzję”, a treść wiadomości brzmi: „Gdy następnym razem będziesz w kawiarni Burrito, przy kasie użyj kodu kuponu FRIENDLYEATS-15, aby otrzymać 15% zniżki na zamówienie. Pamiętaj, by potem dodać opinię”. Mamy nadzieję, że zachęci to użytkowników do odwiedzenia Burrito Cafe.

W następnym kroku ustawimy kierowanie na aplikację i ustawienie ekspozycji. Jest to odsetek kwalifikujących się użytkowników (spełniających warunki kierowania/reguły), którzy zobaczą jeden z komunikatów w ramach eksperymentu. W tym przykładzie możemy ustawić wartość 100%, ponieważ chcemy, aby wszyscy użytkownicy widzieli wersję bazową albo kupon. 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.
Aby zaplanować rozpoczęcie kampanii od razu, ustaw click_restaurant jako warunek wywołujący, aby użytkownicy, którzy klikną restaurację, zobaczyli jeden z 2 wiadomości w aplikacji.

Teraz wystarczy przejrzeć eksperyment i kliknąć Rozpocznij eksperyment. Następnie możemy poczekać na wyniki naszego eksperymentu.

Sprawdzanie zbierania 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órą wiadomość widzieli. 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ł wynik bazowy, więc mogliśmy wybrać opcję Wdrażanie wariantu, która umożliwiła wdrożenie wiadomości z kuponami 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

Wiesz już, co można zrobić dzięki funkcji Wysyłanie wiadomości w aplikacji i Testom A/B Firebase. Aby dowiedzieć się więcej, sprawdź te propozycje...

Dokumentacja

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