Twój pierwszy eksperyment z komunikacją w aplikacji

1. Wstęp

Cele

Podczas tych zajęć z programowania przeprowadzisz eksperyment z komunikacją w aplikacji dla wieloplatformowej mobilnej aplikacji rekomendującej restauracje obsługiwanej przez Flutter i Cloud Firestore .

Po zakończeniu będziesz w stanie zaprojektować i wdrożyć eksperymenty z przesyłaniem wiadomości w aplikacji, aby skutecznie zwiększyć zaangażowanie użytkowników w dowolną aplikację na iOS lub Androida, jednocześnie pisząc minimalną ilość kodu.

Czego się dowiesz

• Jak korzystać z komunikatów w aplikacji Firebase (FIAM) w aplikacji Flutter
• Jak dostosować wygląd wiadomości w aplikacji
• Jak zaprojektować eksperyment z komunikacją w aplikacji i wdrożyć go w swojej aplikacji
• Jak interpretować wyniki eksperymentu z wiadomościami w aplikacji

Wiadomości w aplikacji Firebase

Wiadomości w aplikacji Firebase (FIAM) pomagają angażować użytkowników, którzy aktywnie korzystają z Twojej aplikacji, wysyłając im ukierunkowane i kontekstowe wiadomości, które namawiają ich do wykonania kluczowych działań w aplikacji – takich jak przejście poziomu gry, zakup przedmiotu lub subskrypcja treści .

Testy A/B Firebase

Oparte na Google Optimize narzędzie Firebase A/B Testing (ABT) pomaga zoptymalizować działanie aplikacji, ułatwiając przeprowadzanie, analizowanie i skalowanie eksperymentów produktowych i marketingowych. Daje Ci możliwość testowania zmian w interfejsie użytkownika, funkcjach lub kampaniach budujących zaangażowanie aplikacji, aby sprawdzić, czy faktycznie wpływają one na Twoje kluczowe wskaźniki (takie jak przychody i utrzymanie), zanim zaczniesz je szeroko wdrażać.

Czego potrzebujesz

Jeśli nie jesteś zbyt zaznajomiony z Flutter lub Firestore, najpierw wykonaj ćwiczenia z programowania Firebase dla Flutter :

Te zajęcia z programowania możesz uruchomić przy użyciu dowolnego z następujących urządzeń:

• Urządzenie fizyczne (Android lub iOS) podłączone do komputera i ustawione w trybie programisty.
• Symulator iOS. (Wymaga zainstalowania narzędzi Xcode ).
• Emulator Androida. (Wymaga konfiguracji w Android Studio ).

Oprócz powyższych będziesz potrzebować także:

• Wybrana przeglądarka, np. Chrome.
• Wybrane IDE lub edytor tekstu, taki jak Android Studio lub VS Code skonfigurowany z wtyczkami Dart i Flutter. Do użytku z Flutterem zaleca się stosowanie VS Code.
• Najnowsza stabilna wersja Fluttera (lub wersja beta, jeśli lubisz życie na krawędzi).
• Konto Google, takie jak konto Gmail, do tworzenia projektu Firebase i zarządzania nim.
• Przykładowy kod laboratorium programistycznego. Zobacz następny krok, aby dowiedzieć się, jak uzyskać kod.

2. Przygotowanie do pracy

Zdobądź 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 tej chwili upewnij się, że uruchamiasz polecenia z tego katalogu:

cd friendlyeats-flutter

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

git checkout fiam-abt

Ta gałąź zawiera cały kod niezbędny do tego ćwiczenia z programowania, w tym ukończoną wersję w folderze done . Pozostałe gałęzie w tym repozytorium zawierają kod do tworzenia aplikacji FriendlyEats, jak pokazano w wieloplatformowym ćwiczeniu programowania Firestore Flutter . Na potrzeby tego ćwiczenia z kodowania usunęliśmy integrację internetową w tej gałęzi.

Zaimportuj aplikację startową

Otwórz lub zaimportuj katalog codelab-fiam-abt do preferowanego IDE. Ten katalog zawiera kod początkowy laboratorium programistycznego, na które składa się aplikacja rekomendująca restauracje. Dzięki tym ćwiczeniom z programowania przeprowadzisz eksperyment z przesyłaniem wiadomości w aplikacji dla użytkowników tej aplikacji.

Utwórz projekt Firebase

1. W konsoli Firebase kliknij Dodaj projekt i nadaj projektowi Firebase nazwę FriendlyEats . Zapamiętaj identyfikator projektu Firebase (lub kliknij ikonę Edytuj , aby ustawić preferowany identyfikator projektu).
2. Upewnij się, że w projekcie włączono usługę Google Analytics, a następnie kliknij Kontynuuj.
3. Kliknij opcję Utwórz projekt .

Gratulacje! Właśnie utworzyłeś swój pierwszy projekt Firebase. Teraz możesz kliknąć nazwę projektu, aby wejść do konsoli.

Następnie przejdziesz przez konfigurację i włączenie niezbędnych usług za pomocą konsoli Firebase.

Włącz uwierzytelnianie anonimowe

Chociaż uwierzytelnianie nie jest głównym tematem tego ćwiczenia z programowania, ważne jest, aby w aplikacji była dostępna jakaś forma uwierzytelniania. Będziesz korzystać z logowania anonimowego , co oznacza, że ​​użytkownik zostanie zalogowany w trybie cichym, bez monitu.

Aby włączyć logowanie anonimowe:

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

Włączenie logowania anonimowego umożliwia aplikacji ciche logowanie użytkowników, gdy uzyskują oni dostęp do aplikacji. Aby dowiedzieć się więcej, zapoznaj się z dokumentacją anonimowego uwierzytelniania dla systemów Android i iOS .

Włącz Cloud Firestore

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

Aby włączyć Cloud Firestore:

1. Na lewym pasku nawigacyjnym konsoli Firebase kliknij Firestore .
2. Kliknij opcję Utwórz bazę danych w panelu Cloud Firestore.

3. Wybierz opcję Uruchom w trybie testowym i po zapoznaniu się z zastrzeżeniem dotyczącym reguł bezpieczeństwa kliknij Dalej , a następnie Włącz .

Tryb testowy zapewnia możliwość swobodnego zapisu do bazy danych podczas programowania. W dalszej części tego ćwiczenia z programowania będziesz zwiększać bezpieczeństwo swojej bazy danych.

3. Konfiguracja Firebase specyficzna dla urządzeń mobilnych

Większość zmian w kodzie wymaganych do włączenia obsługi Firebase została już włączona do projektu, nad którym pracujesz. Aby jednak dodać obsługę platform mobilnych należy:

• Zarejestruj żądaną platformę w projekcie Firebase
• Pobierz plik konfiguracyjny specyficzny dla platformy i Dodaj go do kodu.

W katalogu najwyższego poziomu aplikacji Flutter znajdują się podkatalogi o nazwie ios i android . W tych katalogach znajdują się pliki konfiguracyjne specyficzne dla platformy, odpowiednio dla systemów iOS i Android.

Skonfiguruj iOS

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

Powinieneś zobaczyć następujące okno dialogowe:

1. Ważną wartością, którą należy podać, jest identyfikator pakietu iOS. Identyfikator pakietu otrzymasz wykonując kolejne trzy kroki.

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 Runner najwyższego poziomu w lewym okienku, aby wyświetlić kartę Ogólne w prawym okienku, jak pokazano. Skopiuj wartość identyfikatora pakietu .

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

6. Kontynuując w Firebase, postępuj zgodnie z instrukcjami, aby pobrać plik konfiguracyjny GoogleService-Info.plist .
7. Wróć do Xcode. Zauważ, że Runner ma podfolder o nazwie Runner (pokazany na poprzednim obrazku).
8. Przeciągnij plik GoogleService-Info.plist (który właśnie pobrałeś) do podfolderu Runner .
9. W oknie dialogowym, które pojawi się w Xcode, kliknij Zakończ .
10. Wróć do konsoli Firebase. Na etapie konfiguracji kliknij Dalej , pomiń pozostałe kroki i wróć do strony głównej konsoli Firebase.

Skończyłeś konfigurowanie aplikacji Flutter na iOS!

Skonfiguruj Androida

1. W konsoli Firebase wybierz Ustawienia projektu w górnej części lewego paska nawigacyjnego i kliknij przycisk Android w obszarze Twoje aplikacje na stronie Ogólne .

Powinieneś zobaczyć następujące okno dialogowe:

2. Ważną wartością, którą należy podać, jest nazwa pakietu Androida . Nazwę pakietu otrzymasz po wykonaniu następujących dwóch kroków:

3. W katalogu aplikacji Flutter otwórz plik android/app/src/main/AndroidManifest.xml .
4. W elemencie manifest znajdź wartość ciągu atrybutu package . Ta wartość to nazwa pakietu Androida (coś w stylu com.yourcompany.yourproject ). Skopiuj tę wartość.
5. W oknie dialogowym Firebase wklej skopiowaną nazwę pakietu w polu nazwy pakietu Android .
6. Do tego ćwiczenia z programowania nie potrzebujesz certyfikatu podpisywania debugowania SHA-1 . Zostaw to puste.
7. Kliknij opcję Zarejestruj aplikację .
8. Kontynuując w Firebase, postępuj zgodnie z instrukcjami, aby pobrać plik konfiguracyjny google-services.json .
9. Przejdź do katalogu aplikacji Flutter i przenieś plik google-services.json (który właśnie pobrałeś) do katalogu android/app .
10. Wróć do konsoli Firebase, pomiń pozostałe kroki i wróć do strony głównej konsoli Firebase.
11. Cała konfiguracja Gradle jest już zarejestrowana. Jeśli Twoja aplikacja nadal działa, zamknij ją i odbuduj, aby umożliwić Gradle zainstalowanie zależności.

Skończyłeś konfigurowanie aplikacji Flutter na Androida!

4. Uruchom aplikację lokalnie

Jesteś gotowy, aby faktycznie rozpocząć pracę nad swoją aplikacją! Najpierw uruchom aplikację lokalnie. Możesz teraz uruchomić aplikację na dowolnej skonfigurowanej platformie (i dla której masz dostępne urządzenie i emulator).

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

flutter devices

W zależności od dostępnych urządzeń wynik poprzedniego polecenia wygląda mniej więcej tak:

Teraz uruchom aplikację lokalnie za pomocą następującego polecenia:

flutter run

Teraz powinieneś zobaczyć swoją kopię FriendlyEats połączoną z projektem Firebase.

Aplikacja automatycznie łączy się z Twoim projektem Firebase i po cichu loguje Cię jako anonimowy użytkownik.

5. Utwórz i przetestuj swoją pierwszą wiadomość

Zintegruj komunikację w aplikacji Firebase ze swoją aplikacją

Podstawowa integracja wiadomości w aplikacji jest całkowicie bezkodowa, wystarczy dodać zależność i gotowe! Dodaj następującą zależność do pliku pubspec.yaml

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

Utwórz wiadomość w konsoli Firebase

Teraz, gdy dodałeś FIAM do swojej aplikacji, utwórzmy wiadomość, która zostanie wywołana po pierwszym otwarciu aplikacji.

Aby napisać pierwszą wiadomość:

1. W sekcji Interakcja w konsoli Firebase kliknij opcję Wiadomości w aplikacji .
2. Kliknij opcję Utwórz pierwszą kampanię w panelu Wiadomości w aplikacji.

Stwórzmy podstawowy komunikat modalny, aby upewnić się, że integracja działa. Możesz dostosować wiadomość w dowolny sposób – możesz dodać obrazy, przyciski lub zmienić kolory.

Pamiętaj, aby wybrać aplikację, którą chcesz przetestować, w zależności od ścieżki integracji, którą podążasz, możesz mieć system iOS, Android lub oba.

Chcemy mieć pewność, że po otwarciu aplikacji zostanie wyświetlony komunikat wyzwalający, więc domyślna konfiguracja harmonogramu będzie tutaj działać.

Po zakończeniu planowania możemy opublikować wiadomość. Kliknij „przejrzyj” i powinieneś zobaczyć coś takiego jak poniżej

Wyświetl wiadomość w swojej aplikacji

Teraz odinstaluj i zainstaluj ponownie aplikację, a po otwarciu powinieneś zobaczyć utworzony komunikat. Gratulacje, właśnie wysłałeś swoją pierwszą wiadomość w aplikacji! W następnym kroku dowiesz się, jak dodać zdarzenie analityczne, aby wywołać komunikat w aplikacji na podstawie działań podejmowanych przez użytkowników w aplikacji.

6. Zintegruj Firebase Analytics, aby uzyskać zaawansowane wyzwalanie komunikatów

Zintegruj Firebase Analytics ze swoją aplikacją

Aby zrozumieć, w jaki sposób użytkownicy wchodzą w interakcję z naszą aplikacją i wywołać komunikat w aplikacji na podstawie ich działań, dodamy teraz zdarzenie Analytics, które będzie wyświetlane, gdy użytkownik kliknie restaurację.

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

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

2. Importuj statystyki do 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. 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 została wywołana zdarzeniem analitycznym

Teraz, gdy mamy już zdarzenie „click_restaurant”, wywołajmy nasz komunikat w aplikacji w oparciu o to, a nie o otwarcie aplikacji przez użytkownika.

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

Teraz zmień sekcję planowania, aby wywołać wiadomość z nowego zdarzenia

Stamtąd możemy opublikować nasze zmiany, klikając przycisk „przejrzyj”.

Przetestuj wyzwalacz w aplikacji

W tym momencie powinieneś móc uruchomić aplikację

flutter run

A kiedy klikniesz restaurację, powinieneś zobaczyć wiadomość w aplikacji

7. Utwórz kampanię FIAM+ABT

Zacznij od celu

Nasza aplikacja Friendlyeats już wygląda świetnie, ale aby była użyteczna, potrzebujemy kilku recenzji. Będą one pochodzić od użytkowników Friendlyeats, więc znajdźmy sposób, aby zachęcić użytkowników do pozostawiania recenzji.

Najpierw zdefiniujmy nasze zdarzenie konwersji

Ponieważ chcemy sprawdzić, czy użytkownicy recenzują restauracje, dodajmy zdarzenie analityczne, aby zmierzyć to zachowanie.

1. 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);
}

2. Teraz wywołajmy zdarzenie w _onCreateReviewPressed , gdy zapiszemy recenzję 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);
 }

Skonfiguruj test A/B w konsoli Firebase

Teraz, gdy wiemy, jak tworzyć kampanie z komunikatami w aplikacji, czas zastanowić się, jakie zachowania chcielibyśmy zachęcać w naszej aplikacji za pomocą tych kampanii. W przypadku FriendlyEats chcielibyśmy, aby więcej osób zostawiało recenzje, dzięki czemu aplikacja byłaby bardziej użyteczna! Możemy do tego zachęcić na kilka sposobów, korzystając z wiadomości w aplikacji. Jednym z nich jest prosta wiadomość w aplikacji, która po prostu informuje użytkownika, że ​​powinien wystawić restauracji recenzję, aby pomóc ulepszyć aplikację FriendlyEats. Innym sposobem jest wykorzystanie komunikatu w aplikacji w celu zaoferowania zachęty za wystawienie recenzji, na przykład kuponu lub kodu rabatowego do danej restauracji.

Obydwa podejścia mogą zwiększyć częstotliwość zamieszczania przez użytkowników recenzji restauracji w serwisie FriendlyEats i wydaje się, że udostępnienie kuponu mogłoby mieć w tym przypadku jeszcze większy wpływ. Ale o ile bardziej prawdopodobne byłoby, że udostępnienie tego kuponu skłoniłoby użytkowników do napisania recenzji? Czy warto przede wszystkim kosztować kupon? Aby to ustalić, przeprowadzimy eksperyment z przesyłaniem wiadomości w aplikacji! Możemy użyć testów A/B Firebase, aby losowo wyświetlić użytkownikom jeden z naszych komunikatów w aplikacji i zmierzyć jego wpływ na zachowanie użytkowników, coś w rodzaju badania klinicznego. A co najważniejsze, można to zrobić całkowicie za pomocą konsoli Firebase, bez potrzeby stosowania kodu!

Aby przygotować pierwszy eksperyment z komunikacją w aplikacji:

1. W sekcji Zaangażowanie w konsoli Firebase kliknij Testowanie A/B .
2. Kliknij opcję Utwórz eksperyment i wybierz, czy chcesz poeksperymentować z wiadomościami w aplikacji . Spowoduje to przejście do pokazanego poniżej kompozytora eksperymentu.

Nadaj swojemu eksperymentowi nazwę i opcjonalny opis.

4. Następnym krokiem będzie utworzenie różnych komunikatów w aplikacji, które będziesz wysyłać użytkownikom biorącym udział w eksperymencie. Pierwsza wiadomość w aplikacji, którą utworzymy, będzie „punktem bazowym”, czyli kontrolą naszego eksperymentu. Możemy to zrobić jako naszą prostą wiadomość „proszę o recenzję”:

5. Teraz, gdy mamy już punkt odniesienia, stworzymy wariant – wiadomość w aplikacji oferującą użytkownikom kod kuponu zachęcający ich do pozostawienia recenzji. Nie jest to w pełni widoczne na poniższym podglądzie, ale tytuł wiadomości brzmi „Weź kupon i zostaw recenzję!”, a treść wiadomości brzmi: „Następnym razem, gdy będziesz w Burrito Cafe, użyj kodu kuponu FRIENDLYEATS-15 pod adresem do kasy, aby uzyskać 15% rabatu na swoje zamówienie. I pamiętaj, aby zostawić recenzję później!”. Miejmy nadzieję, że zainspiruje to niektórych użytkowników do odwiedzenia Burrito Cafe!

W następnym kroku wycelujemy naszą aplikację i ustawimy ekspozycję. Jest to odsetek kwalifikujących się użytkowników (spełniających warunki kierowania/wyzwalania), którzy zobaczą jeden z komunikatów w eksperymencie. W tym przykładzie możemy po prostu ustawić tę wartość na 100%, ponieważ chcielibyśmy, aby wszyscy użytkownicy widzieli wersję bazową lub wariant naszego kuponu. Jeśli chcesz, aby grupa kontrolna nie wyświetlała żadnych komunikatów w aplikacji, możesz zmniejszyć ten procent ekspozycji.

7. Następnie zdefiniujesz cele eksperymentu. Oto wynik eksperymentu, który chcielibyśmy zmierzyć. Ustawimy to jako zdarzenie analityczne review_success , które zdefiniowaliśmy w poprzedniej sekcji, ponieważ chcemy zobaczyć wpływ naszych różnych komunikatów w aplikacji na użytkowników opuszczających recenzje restauracji.
8. W celu ustalenia harmonogramu pozwolimy, aby kampania rozpoczęła się natychmiast i ustawimy opcję click_restaurant jako warunek wyzwalający, dzięki czemu użytkownicy zobaczą jeden z dwóch komunikatów w aplikacji po kliknięciu restauracji.

9. Teraz pozostaje nam tylko przejrzeć nasz eksperyment i kliknąć Rozpocznij eksperyment . Następnie możemy usiąść i poczekać, aż napłyną dane z naszego eksperymentu!

Sprawdź gromadzenie danych w czasie rzeczywistym

Teraz, gdy rozpoczęliśmy nasz eksperyment, użytkownicy FriendlyEats po kliknięciu restauracji losowo zobaczą jedną z dwóch wiadomości w aplikacji, które utworzyliśmy – wiadomość podstawową lub wiadomość wariantową . Spowoduje to podzielenie naszych użytkowników na dwie grupy w zależności od tego, jaką wiadomość zobaczyli. Następnie możemy zajrzeć do konsoli Firebase (ponownie w sekcji Testy A/B), aby porównać dane analityczne na żywo z obu grup. Otrzymanie danych może zająć trochę czasu, ponieważ musimy poczekać, aż użytkownicy faktycznie zobaczą wiadomości w aplikacji i odpowiednio zareagowają. Oto jak mogą wyglądać Twoje wyniki, gdy uzyskasz wystarczającą ilość danych:

W tym przypadku wariant znacznie ulepszył się w stosunku do wersji bazowej, więc mogliśmy wybrać opcję Wdróż wariant , która następnie wyświetliłaby wiadomość w aplikacji z kuponem wszystkim użytkownikom.

8. Gratulacje

Gratulacje, pomyślnie utworzyłeś i przeprowadziłeś swój pierwszy eksperyment z wiadomościami w aplikacji. Teraz możesz przeprowadzić eksperyment we własnej aplikacji i wykorzystać wyniki, aby zwiększyć skuteczność kampanii z komunikatami w aplikacji.

Co dalej?

Sprawdź niektóre z tych ćwiczeń z kodowania...

• Wieloplatformowy Flutter Firestore
• Dodaj eksperyment zdalnej konfiguracji Firebase do aplikacji na Androida

Dalsza lektura

Właśnie zarysowaliśmy powierzchnię tego, co można zrobić za pomocą przesyłania wiadomości w aplikacji Firebase i testów A/B Firebase. Sprawdź je, jeśli chcesz dowiedzieć się więcej...

• Twórz eksperymenty z komunikatami za pomocą testów A/B
• Twórz eksperymenty dotyczące zdalnej konfiguracji za pomocą testów A/B
• Poznaj przypadki użycia wiadomości w aplikacji Firebase
• Dostosuj wiadomości Firebase w aplikacji

Dokumenty referencyjne

• Twórz eksperymenty z komunikacją w aplikacji za pomocą testów A/B