Eksperimen In-App Messaging Anda yang Pertama

1. Pengantar

Sasaran

Dalam codelab ini, Anda akan menginstrumentasikan eksperimen pesan dalam aplikasi untuk aplikasi rekomendasi restoran seluler multiplatform yang didukung oleh Flutter dan Cloud Firestore.

Setelah selesai, Anda akan dapat merancang dan mengimplementasikan eksperimen in-app messaging untuk meningkatkan engagement pengguna secara efektif untuk setiap aplikasi iOS atau Android sambil menulis sedikit kode.

b284c40acc99b994.pngS

Yang akan Anda pelajari

  • Cara menggunakan Firebase In-App Messaging (FIAM) di aplikasi Flutter
  • Cara menyesuaikan tampilan pesan dalam aplikasi Anda
  • Cara mendesain eksperimen in-app messaging dan menerapkannya di aplikasi Anda
  • Cara menafsirkan hasil eksperimen in-app messaging

Apa yang ingin Anda pelajari dari codelab ini?

Saya baru mengenal topik ini, jadi saya ingin mendapatkan ringkasan yang bermanfaat. Saya sedikit paham soal topik ini, tetapi saya perlu mengingat kembali. Saya sedang mencari kode contoh untuk digunakan dalam project saya. Saya sedang mencari penjelasan tentang hal spesifik.

Firebase In-App Messaging

Firebase In-App Messaging (FIAM) membantu Anda mempertahankan pengguna yang aktif menggunakan aplikasi Anda dengan mengirimkan pesan yang ditargetkan dan kontekstual, untuk mendorong mereka agar menyelesaikan tindakan penting dalam aplikasi - seperti mencapai level tertentu dalam game, membeli item, atau berlangganan konten.

Firebase A/B Testing

Dengan dukungan Google Optimize, Firebase A/B Testing (ABT) membantu Anda mengoptimalkan pengalaman aplikasi dengan memudahkan untuk menjalankan, menganalisis, serta menskalakan eksperimen marketing dan produk. Hal ini memberi Anda kemampuan untuk menguji perubahan terhadap UI, fitur, atau kampanye interaksi aplikasi guna melihat apakah perubahan tersebut berdampak signifikan terhadap metrik kunci Anda (seperti pendapatan dan retensi) sebelum meluncurkannya secara luas.

Yang Anda perlukan

Jika Anda belum terlalu memahami Flutter atau Firestore, selesaikan codelab Firebase untuk Flutter terlebih dahulu:

Anda dapat menjalankan codelab ini menggunakan perangkat berikut:

  • Perangkat fisik (Android atau iOS) yang terhubung ke komputer dan disetel ke mode developer.
  • Simulator iOS. (Memerlukan penginstalan alat Xcode).
  • Emulator Android. (Memerlukan penyiapan di Android Studio).

Selain yang disebutkan di atas, Anda juga memerlukan:

  • Browser pilihan Anda, seperti Chrome.
  • IDE atau editor teks pilihan Anda, seperti Android Studio atau VS Code yang dikonfigurasi dengan plugin Dart dan Flutter. VS Code direkomendasikan untuk digunakan dengan Flutter.
  • Versi stabil terbaru Flutter (atau beta jika Anda suka berada di edge).
  • Akun Google, seperti akun Gmail, untuk membuat dan mengelola project Firebase Anda.
  • Kode contoh codelab. Lihat langkah berikutnya untuk mengetahui cara mendapatkan kode.

2. Mempersiapkan

Mendapatkan kode

Clone repositori GitHub dari command line:

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

Kode contoh akan di-clone ke direktori friendlyeats-flutter. Mulai sekarang, pastikan Anda menjalankan perintah dari direktori ini:

cd friendlyeats-flutter

Kemudian, beralih ke direktori codelab dan lihat cabang fiam-abt:

git checkout fiam-abt

Cabang ini berisi semua kode yang diperlukan untuk codelab ini, termasuk versi lengkap di folder done. Cabang lain dalam repositori ini berisi kode untuk membangun aplikasi FriendlyEats, seperti yang ditunjukkan di codelab Firestore Flutter multiplatform. Untuk tujuan codelab ini, kami telah menghapus integrasi web di cabang ini.

Mengimpor aplikasi awal

Buka atau impor direktori codelab-fiam-abt ke IDE pilihan Anda. Direktori ini berisi kode awal untuk codelab yang terdiri dari aplikasi rekomendasi restoran. Melalui codelab ini, Anda akan menginstrumentasikan eksperimen in-app messaging untuk pengguna aplikasi ini.

Membuat project Firebase

  1. Di Firebase console, klik Add project, lalu beri nama project Firebase dengan FriendlyEats. Ingat project ID untuk project Firebase Anda (atau klik ikon Edit untuk menetapkan project ID pilihan).
  2. Pastikan Google Analytics diaktifkan untuk project tersebut, lalu klik Lanjutkan.
  3. Klik Create project.

Selamat! Anda baru saja membuat project Firebase pertama Anda. Sekarang, Anda dapat mengklik nama project untuk masuk ke konsol.

Selanjutnya, Anda akan mengonfigurasi dan mengaktifkan layanan yang diperlukan menggunakan Firebase console.

Mengaktifkan Autentikasi Anonim

Meskipun autentikasi bukan fokus dari codelab ini, penting untuk memiliki beberapa bentuk autentikasi di aplikasi Anda. Anda akan menggunakan Login anonim—yang berarti pengguna login secara otomatis tanpa diminta.

Untuk mengaktifkan Login anonim:

  1. Di Firebase console, temukan Authentication di menu navigasi sebelah kiri.
  2. Klik Authentication, lalu klik Mulai dan pilih tab Metode login (atau langsung ke Firebase console).
  3. Aktifkan Penyedia Login Anonim, lalu klik Simpan.

biaya6c3ebdf904459.png

Mengaktifkan Login anonim memungkinkan aplikasi membuat pengguna login secara otomatis saat mereka mengakses aplikasi. Untuk mempelajari lebih lanjut, lihat dokumentasi autentikasi anonim untuk Android dan iOS.

Aktifkan Cloud Firestore

Aplikasi menggunakan Cloud Firestore untuk menyimpan dan menerima rating dan informasi restoran.

Untuk mengaktifkan Cloud Firestore:

  1. Di menu navigasi sebelah kiri Firebase console, klik Firestore.
  2. Klik Create database di panel Cloud Firestore.

57e83568e05c7710.pngS

  1. Pilih opsi Mulai dalam mode pengujian, lalu klik Berikutnya setelah membaca pernyataan penyangkalan tentang aturan keamanan, lalu Aktifkan.

Mode pengujian memastikan bahwa Anda dapat menulis ke database dengan bebas selama pengembangan. Anda dapat meningkatkan keamanan database dalam codelab ini.

daef1061fc25acc7.png

3. Konfigurasi Firebase khusus seluler

Sebagian besar perubahan kode yang diperlukan untuk mengaktifkan dukungan Firebase sudah diperiksa ke dalam project yang sedang Anda kerjakan. Namun, untuk menambahkan dukungan untuk platform seluler, Anda harus:

  • Mendaftarkan platform yang diinginkan di project Firebase
  • Download file konfigurasi khusus platform, lalu tambahkan ke kode.

Di direktori level teratas aplikasi Flutter Anda, ada subdirektori bernama ios dan android. Direktori ini menyimpan masing-masing file konfigurasi khusus platform untuk iOS dan Android.

a35458e5c0dd0acf.png Konfigurasi iOS

Di Firebase console, pilih Project Settings di bagian atas menu navigasi sebelah kiri, lalu klik tombol iOS di bagian Your apps pada halaman General.

Anda akan melihat dialog berikut:

c42139f18fb9a2ee.pngS

  1. Nilai penting yang harus diberikan adalah ID paket iOS. Anda bisa mendapatkan ID paket dengan melakukan tiga langkah berikutnya.
  1. Di alat command line, buka direktori level teratas aplikasi Flutter Anda.
  2. Jalankan perintah open ios/Runner.xcworkspace untuk membuka Xcode.
  1. Di Xcode, klik Runner tingkat teratas di panel kiri untuk menampilkan tab General di panel kanan, seperti yang ditunjukkan. Salin nilai Bundle Identifier.

9733e26be329f329.pngS

  1. Kembali ke dialog Firebase, tempel Bundle Identifier yang disalin ke kolom iOS bundle ID, lalu klik Register App.
  1. Melanjutkan di Firebase, ikuti petunjuk untuk mendownload file konfigurasi GoogleService-Info.plist.
  2. Kembali ke Xcode. Perhatikan bahwa Runner memiliki subfolder yang juga disebut Runner (ditunjukkan di gambar sebelumnya).
  3. Tarik file GoogleService-Info.plist (yang baru saja Anda download) ke subfolder Runner.
  4. Pada dialog yang muncul di Xcode, klik Finish.
  5. Kembali ke Firebase console. Pada langkah penyiapan, klik Next, lewati langkah-langkah yang tersisa, lalu kembali ke halaman utama Firebase console.

Anda telah selesai mengonfigurasi aplikasi Flutter Anda untuk iOS.

84e0b3199bef6d8a.pngMengonfigurasi Android

  1. Di Firebase Console, pilih Setelan Project di bagian atas menu navigasi sebelah kiri, lalu klik tombol Android di bagian Aplikasi Anda di halaman Umum.

Anda akan melihat dialog berikut : 8254fc299e82f528.pngS

  1. Nilai penting yang harus diberikan adalah nama paket Android. Anda akan mendapatkan nama paket saat melakukan dua langkah berikut:
  1. Di direktori aplikasi Flutter, buka file android/app/src/main/AndroidManifest.xml.
  2. Di elemen manifest, temukan nilai string atribut package. Nilai ini adalah nama paket Android (misalnya com.yourcompany.yourproject). Salin nilai ini.
  3. Di dialog Firebase, tempel nama paket yang disalin ke kolom Android package name.
  4. Anda tidak memerlukan Sertifikat penandatanganan debug SHA-1 untuk codelab ini. Biarkan kosong.
  5. Klik Daftarkan Aplikasi.
  6. Melanjutkan di Firebase, ikuti petunjuk untuk mendownload file konfigurasi google-services.json.
  7. Buka direktori aplikasi Flutter Anda, lalu pindahkan file google-services.json (yang baru saja Anda download) ke direktori android/app.
  8. Kembali ke Firebase console, lewati langkah-langkah yang tersisa, lalu kembali ke halaman utama Firebase console.
  9. Semua konfigurasi Gradle sudah diperiksa. Jika aplikasi Anda masih berjalan, tutup dan build ulang, untuk memungkinkan gradle menginstal dependensi.

Anda telah selesai mengonfigurasi aplikasi Flutter Anda untuk Android.

4. Menjalankan aplikasi secara lokal

Anda siap untuk benar-benar mulai mengerjakan aplikasi Anda. Pertama, jalankan aplikasi secara lokal. Sekarang Anda dapat menjalankan aplikasi di platform apa pun yang dikonfigurasi (serta yang perangkat dan emulatornya tersedia).

Temukan perangkat yang tersedia dengan perintah berikut:

flutter devices

Bergantung pada perangkat yang tersedia, {i>output<i} dari perintah sebelumnya terlihat seperti ini:

7d44d7c0837b3e8e.png

Sekarang, jalankan aplikasi secara lokal dengan perintah berikut:

flutter run

Sekarang, Anda akan melihat salinan FriendlyEats terhubung ke project Firebase Anda.

Aplikasi akan otomatis terhubung ke project Firebase dan membuat Anda login secara diam-diam sebagai pengguna anonim.

5. Membuat dan menguji pesan pertama Anda

Mengintegrasikan Firebase In-App Messaging ke aplikasi Anda

Integrasi dasar In-App Messaging sepenuhnya tanpa kode, Anda hanya perlu menambahkan dependensi dan Anda siap menggunakannya. Tambahkan dependensi berikut ke file pubspec.yaml Anda

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

Menulis pesan di Firebase Console

Setelah menambahkan FIAM ke aplikasi, mari kita tulis pesan yang akan dipicu saat aplikasi Anda pertama kali dibuka.

Untuk menulis pesan pertama Anda:

  1. Di bagian Engage Firebase console, klik In-App Messaging.
  2. Klik Create your first campaign di panel In-App Messaging.

4fec02395f89f2a8.pngS

Mari kita tulis pesan Modal dasar untuk memastikan integrasi berfungsi. Jangan ragu untuk menyesuaikan pesan dengan cara apa pun yang Anda inginkan – Anda dapat menambahkan gambar, tombol, atau mengubah warna.

59845004afc26847.pngS

Pastikan untuk menargetkan aplikasi yang ingin diuji, bergantung pada jalur integrasi yang Anda ikuti yang mungkin Anda gunakan di iOS, Android, atau keduanya.

3f1eb7a327a50265.png

Kita ingin memastikan agar pesan terpicu saat aplikasi terbuka, sehingga konfigurasi penjadwalan default akan berfungsi di sini.

8dc5cea0a4c79008.pngS

Setelah penjadwalan selesai, kita dapat memublikasikan pesan. Klik "tinjau" dan Anda akan melihat sesuatu seperti berikut

5bbc987bf63d1f48.png

Melihat pesan di aplikasi

Sekarang, uninstal dan instal ulang aplikasi Anda, dan Anda akan melihat pesan yang Anda buat ditampilkan saat membuka. Selamat, Anda baru saja mengirim pesan dalam aplikasi pertama Anda! Pada langkah berikutnya, Anda akan mempelajari cara menambahkan peristiwa analisis, untuk memicu pesan dalam aplikasi berdasarkan tindakan yang dilakukan pengguna di aplikasi.

6. Mengintegrasikan Firebase Analytics untuk pemicu pesan lanjutan

Mengintegrasikan Firebase Analytics ke dalam aplikasi Anda

Untuk memahami bagaimana pengguna berinteraksi dengan aplikasi kita, dan memicu pesan dalam aplikasi berdasarkan tindakan mereka, sekarang kita akan menambahkan peristiwa Analytics saat pengguna mengklik sebuah restoran.

  1. Tambahkan dependensi Firebase Analytics ke Flutter di pubspec.yaml
dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...
  1. Impor analisis di home_page.dart
import 'package:firebase_analytics/firebase_analytics.dart';
  1. Tambahkan instance Firebase Analytics ke class HomePage di home_page.dart
class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}
  1. Aktifkan peristiwa analisis saat pengguna mengklik kartu restoran di home_page.dart
onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

Edit pesan Anda untuk dipicu pada peristiwa analisis

Setelah memiliki peristiwa "click_restaurant", mari kita picu pesan dalam aplikasi berdasarkan peristiwa tersebut, bukan saat pengguna membuka aplikasi.

Di Firebase Console, kembali ke In-App Message dan edit kampanye yang ada

d1fdc539dfcc6375.png

Sekarang ubah bagian penjadwalan untuk memicu pesan dari acara baru

8e12d8f1f8f166dd.png

Dari sana kita dapat memublikasikan perubahan dengan mengklik tombol "tinjau"

4f7d6bd2960b3ef7.png

Menguji pemicu di aplikasi

Pada tahap ini, Anda seharusnya dapat menjalankan aplikasi dengan

flutter run

Dan saat Anda mengklik restoran, Anda akan melihat In-App Message

a11febda5526263.png

7. Membuat Kampanye FIAM+ABT

Mulai dengan sasaran

Aplikasi Friendlyeats sudah terlihat bagus, tetapi agar bisa berguna, kita perlu mendapatkan beberapa ulasan. Item ini akan berasal dari pengguna Friendlyeats, jadi mari kita temukan cara untuk mendorong pengguna memberikan ulasan.

Pertama, tentukan peristiwa konversi

Karena kita ingin melihat apakah pengguna mengulas restoran, tambahkan peristiwa analisis untuk mengukur perilaku ini.

  1. Impor Firebase Analytics seperti sebelumnya dan tambahkan instance Analytics ke RestaurantPage di 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);
}
  1. Sekarang mari kita picu peristiwa di _onCreateReviewPressed saat kita menyimpan ulasan di 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);
 }

Mengonfigurasi A/B Testing di Firebase Console

Setelah mengetahui cara membuat kampanye in-app messaging, kini saatnya mempertimbangkan perilaku seperti apa yang ingin kita dorong di aplikasi melalui kampanye ini. Untuk FriendlyEats, kami ingin lebih banyak orang memberikan ulasan, yang akan membuat aplikasi ini lebih berguna! Ada beberapa cara yang dapat kita lakukan untuk mendorong hal ini menggunakan pesan dalam aplikasi. Salah satunya adalah melalui pesan dalam aplikasi sederhana yang hanya memberi tahu pengguna bahwa mereka harus memberikan ulasan untuk restoran guna membantu meningkatkan kualitas aplikasi FriendlyEats. Cara lainnya adalah menggunakan pesan dalam aplikasi untuk menawarkan beberapa jenis insentif karena memberikan ulasan, seperti kupon atau kode diskon ke restoran tertentu.

Kedua pendekatan tersebut dapat meningkatkan seberapa sering pengguna memberikan ulasan untuk restoran di FriendlyEats, dan tampaknya memberikan kupon bisa memberikan dampak yang lebih kuat dalam kasus ini. Namun, seberapa besar kemungkinan kupon ini akan membuat pengguna menulis ulasan? Apakah sepadan dengan biaya kupon? Untuk menentukan hal ini, kita akan menjalankan eksperimen in-app messaging. Kita bisa menggunakan Firebase A/B Testing untuk menampilkan secara acak salah satu pesan dalam aplikasi kepada pengguna, dan mengukur efeknya terhadap perilaku pengguna, seperti uji klinis. Bagian terbaiknya, ini bisa dilakukan sepenuhnya melalui Firebase console, tanpa perlu kode.

Untuk membuat eksperimen in-app messaging pertama Anda:

  1. Di bagian Engage Firebase console, klik A/B Testing.
  2. Klik Create experiment, lalu pilih yang ingin digunakan untuk bereksperimen dengan In-App Messaging. Tindakan ini akan mengarahkan Anda ke komposer eksperimen yang ditampilkan di bawah.

a792dfd4f82fee9c.png

Beri nama eksperimen Anda dan deskripsi opsional.

  1. Langkah berikutnya adalah menulis berbagai pesan dalam aplikasi yang akan dikirim kepada pengguna dalam eksperimen Anda. Pesan dalam aplikasi pertama yang akan kita tulis adalah "dasar pengukuran", atau kontrol eksperimen. Kita dapat membuat pesan "harap tinjau" ini:

50e3eb946c56501a.png

  1. Setelah memiliki dasar pengukuran, sekarang kita akan menulis varian, pesan dalam aplikasi yang menawarkan kode kupon kepada pengguna untuk mendorong mereka memberikan ulasan. Hal ini tidak sepenuhnya terlihat pada pratinjau di bawah, tetapi judul Pesannya adalah "Ambil kupon, tinggalkan ulasan!", dan isi pesannya adalah "Lain kali Anda ke Burrito Cafe, gunakan kode kupon friendLYEATS-15 saat checkout untuk mendapatkan diskon 15% untuk pesanan Anda. Dan jangan lupa untuk memberikan ulasan setelahnya!". Semoga hal ini dapat menginspirasi beberapa pengguna untuk mengunjungi Burrito Cafe!

tempat tidur9182080bebb41.png

Pada langkah berikutnya, kita akan menargetkan aplikasi dan menetapkan Eksposur. Ini adalah persentase pengguna yang memenuhi syarat (yang memenuhi kondisi penargetan/pemicu) yang akan melihat salah satu pesan dalam eksperimen. Kita bisa menetapkannya ke 100% untuk contoh ini, karena kita ingin semua pengguna melihat varian dasar pengukuran atau varian kupon. Jika ingin memiliki grup kontrol yang tidak melihat pesan dalam aplikasi sama sekali, Anda dapat mengurangi persentase eksposur ini.

bd96bf5798d227f1.png

  1. Selanjutnya, Anda akan menentukan beberapa sasaran eksperimen. Ini adalah hasil dari eksperimen yang ingin kita ukur. Kita akan menetapkan ini sebagai peristiwa analisis review_success yang kita tentukan di bagian sebelumnya, karena kita ingin melihat dampak dari berbagai pesan dalam aplikasi terhadap pengguna yang meninggalkan ulasan restoran. eb89d3b9f89ab43b.png
  2. Untuk penjadwalan, kita akan membiarkan kampanye segera dimulai, dan menetapkan click_restaurant sebagai kondisi pemicu, sehingga pengguna melihat salah satu dari dua pesan dalam aplikasi saat mereka mengklik restoran.

c57be430d41bfcad.png

  1. Sekarang, Anda hanya perlu meninjau eksperimen kita, lalu klik Mulai eksperimen. Kemudian, kita dapat bersantai dan menunggu data dari eksperimen kita masuk.

566af8bace30c67.pngS

Melihat pengumpulan data secara real time

Setelah kita memulai eksperimen, pengguna FriendlyEats akan secara acak melihat salah satu dari dua pesan dalam aplikasi yang kita susun saat mereka mengklik restoran, baik pesan dasar bawaan maupun pesan varian. Ini akan membagi pengguna menjadi dua grup, berdasarkan pesan yang mereka lihat. Kemudian kita dapat melihat di Firebase console (sekali lagi di bagian A/B Testing) untuk membandingkan data analisis langsung dari kedua grup. Butuh waktu beberapa saat untuk data masuk, karena kita harus menunggu pengguna untuk benar-benar melihat pesan dalam aplikasi dan bertindak dengan sesuai. Berikut ini tampilan hasil Anda setelah memiliki cukup data:

8fa8a0edcd8a8ad4.pngS

Dalam hal ini, varian meningkatkan kualitas dasar pengukuran secara signifikan, sehingga kami dapat memilih Luncurkan varian, yang kemudian akan meluncurkan pesan dalam aplikasi dengan kupon untuk semua pengguna.

8. Selamat

Selamat, Anda telah berhasil membuat dan menjalankan eksperimen in-app messaging pertama Anda. Sekarang Anda dapat menjalankan eksperimen di aplikasi Anda sendiri, dan menggunakan hasilnya untuk membuat kampanye in-app messaging Anda lebih efektif.

Apa selanjutnya?

Lihat beberapa codelab ini...

Bacaan lebih lanjut

Kita baru saja mempelajari apa yang bisa dilakukan dengan Firebase In-App Messaging dan Firebase A/B Testing. Lihat ini jika Anda ingin mempelajari lebih lanjut...

Dokumen referensi