Eksperimen In-App Messaging Pertama Anda

1. Pengantar

Sasaran

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

Setelah selesai, Anda akan dapat mendesain dan menerapkan eksperimen pesan dalam aplikasi untuk meningkatkan engagement pengguna secara efektif untuk aplikasi iOS atau Android apa pun sambil menulis kode dalam jumlah minimal.

Hal yang akan Anda pelajari

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

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 mempermudah eksperimen produk dan marketing untuk dijalankan, dianalisis, serta diskalakan. Hal ini memberi Anda kemampuan untuk menguji perubahan terhadap UI, fitur, atau kampanye interaksi aplikasi guna melihat apakah perubahan tersebut berdampak signifikan terhadap metrik utama Anda (seperti pendapatan dan retensi) sebelum menerapkannya secara luas.

Yang Anda perlukan

Jika Anda kurang memahami Flutter atau Firestore, selesaikan codelab Firebase untuk Flutter:

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 hal di atas, Anda juga akan memerlukan:

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

2. Memulai persiapan

Mendapatkan kode

Buat 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, ubah ke direktori codelab dan periksa 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 dalam codelab Flutter Firestore 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 mengukur eksperimen pesan dalam aplikasi untuk pengguna aplikasi ini.

Membuat project Firebase

1. Login ke Firebase console menggunakan Akun Google Anda.
2. Klik tombol untuk membuat project baru, lalu masukkan nama project (misalnya, FriendlyEats).
   
3. Klik Lanjutkan.
4. Jika diminta, tinjau dan setujui persyaratan Firebase, lalu klik Continue.
5. (Opsional) Aktifkan bantuan AI di Firebase console (disebut "Gemini di Firebase").
6. Untuk codelab ini, Anda memerlukan Google Analytics agar dapat menggunakan produk Firebase secara optimal. Jadi, tetap aktifkan opsi Google Analytics. Ikuti petunjuk di layar untuk menyiapkan Google Analytics.
7. Klik Buat project, tunggu hingga project Anda disediakan, lalu klik Lanjutkan.

Selamat! Anda baru saja membuat project Firebase pertama Anda.

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

Mengaktifkan Autentikasi Anonim

Meskipun autentikasi bukanlah fokus dalam codelab ini, memiliki bentuk autentikasi di aplikasi merupakan hal yang penting. Anda akan menggunakan Login anonim—yang berarti pengguna login secara otomatis tanpa diminta.

Untuk mengaktifkan Login anonim:

1. Di Firebase console, temukan Authentication di sisi kiri menu navigasi.
2. Klik Authentication, lalu klik Get started dan pilih tab Sign-in method (atau langsung buka Firebase console).
3. Aktifkan Penyedia Login Anonim, lalu klik Simpan.

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

Menyiapkan Cloud Firestore

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

Berikut cara menyiapkan Cloud Firestore di project Firebase Anda:

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Firestore database.
2. Klik Create database.
3. Biarkan Database ID ditetapkan ke (default).
4. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
5. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Di codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
6. Klik Buat.

3. Konfigurasi Firebase khusus seluler

Sebagian besar perubahan kode yang diperlukan untuk mengaktifkan dukungan Firebase sudah diperiksa di project yang sedang Anda kerjakan. Namun, guna menambahkan dukungan untuk platform seluler, Anda perlu:

• Daftarkan platform yang diinginkan di project Firebase
• Download file konfigurasi khusus platform, lalu tambahkan file 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.

Mengonfigurasi iOS

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

Anda akan melihat dialog berikut:

1. Nilai penting yang harus diberikan adalah ID paket iOS. Anda dapat memperoleh ID paket dengan menjalankan tiga langkah berikut.

2. Di alat command-line, buka direktori level teratas aplikasi Flutter Anda.
3. Jalankan perintah open ios/Runner.xcworkspace untuk membuka Xcode.

4. Di Xcode, klik Runner level teratas di panel sebelah kiri untuk menampilkan tab General di panel sebelah kanan seperti yang ditunjukkan pada gambar di bawah ini. Salin nilai ID Paket.

5. Kembali ke dialog Firebase, tempel ID Paket yang disalin ke kolom ID paket iOS, lalu klik Daftarkan Aplikasi.

6. Lanjutkan di Firebase, lalu ikuti petunjuk untuk mendownload file konfigurasi GoogleService-Info.plist.
7. Kembali ke Xcode. Perhatikan bahwa Runner memiliki subfolder yang juga bernama Runner (ditunjukkan di gambar sebelumnya).
8. Seret file GoogleService-Info.plist (yang baru Anda download) ke subfolder Runner.
9. Di dialog yang muncul di Xcode, klik Finish.
10. Kembali ke Firebase console. Pada langkah penyiapan, klik Berikutnya, lewati langkah-langkah yang tersisa, lalu kembali ke halaman utama Firebase console.

Anda telah selesai mengonfigurasi aplikasi Flutter Anda untuk iOS.

Mengonfigurasi 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 :

2. Nilai penting yang harus diberikan adalah Nama paket Android. Anda akan mendapatkan nama paket saat Anda menjalankan dua langkah berikut:

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

Anda telah selesai mengonfigurasi aplikasi Flutter Anda untuk Android.

4. Menjalankan aplikasi secara lokal

Anda sudah siap untuk membuat aplikasi Anda sendiri. Pertama, jalankan aplikasi secara lokal. Anda kini dapat menjalankan aplikasi di platform mana pun yang Anda konfigurasi (serta di emulator dan perangkat Anda yang tersedia).

Temukan perangkat mana yang tersedia dengan perintah berikut:

flutter devices

Bergantung pada perangkat yang tersedia, output perintah sebelumnya terlihat seperti yang berikut ini:

Sekarang, jalankan aplikasi secara lokal dengan perintah berikut:

flutter run

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

Aplikasi menghubungkan ke project Firebase secara otomatis dan membuat Anda login otomatis sebagai pengguna anonim.

5. Membuat dan menguji pesan pertama Anda

Mengintegrasikan Firebase In-App Messaging ke dalam aplikasi Anda

Integrasi dasar In-App Messaging sepenuhnya tanpa kode, yang perlu Anda lakukan hanyalah 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 buat 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 Buat kampanye pertama Anda di panel In-App Messaging.

Mari kita buat pesan Modal dasar untuk memastikan integrasi berfungsi. Anda dapat menyesuaikan pesan sesuai keinginan – Anda dapat menambahkan gambar, tombol, atau mengubah warna.

Pastikan untuk menargetkan aplikasi yang ingin Anda uji, bergantung pada jalur integrasi yang Anda ikuti, Anda mungkin memiliki iOS, Android, atau keduanya.

Kita ingin memastikan pesan dipicu saat aplikasi dibuka, sehingga konfigurasi penjadwalan default akan berfungsi di sini.

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

Melihat pesan di aplikasi Anda

Sekarang, uninstal dan instal ulang aplikasi Anda, dan Anda akan melihat pesan yang Anda buat ditampilkan saat dibuka. 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 pemicuan pesan lanjutan

Mengintegrasikan Firebase Analytics ke dalam aplikasi Anda

Untuk memahami cara pengguna berinteraksi dengan aplikasi kami, dan memicu pesan dalam aplikasi berdasarkan tindakan mereka, kami akan menambahkan peristiwa Analytics saat pengguna mengklik restoran.

1. Tambahkan dependensi Firebase Analytics ke Flutter di pubspec.yaml

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

2. Mengimpor analisis di home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

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

4. Memicu peristiwa Analytics 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 agar dipicu pada peristiwa analisis

Sekarang setelah kita 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

Sekarang ubah bagian penjadwalan untuk memicu pesan dari acara baru

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

Menguji pemicu di aplikasi

Pada tahap ini, Anda dapat menjalankan aplikasi dengan

flutter run

Saat mengklik restoran, Anda akan melihat In-App Message

7. Membuat Kampanye FIAM+ABT

Mulai dengan sasaran

Aplikasi Friendlyeats kita sudah terlihat bagus, tetapi agar bermanfaat, kita perlu memiliki beberapa ulasan. Ulasan ini akan berasal dari pengguna Friendlyeats, jadi mari kita cari cara untuk mendorong pengguna memberikan ulasan.

Pertama, mari kita tentukan peristiwa konversi

Karena kita ingin melihat apakah pengguna mengulas restoran, mari 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);
}

2. Sekarang, mari 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 Pengujian A/B di Firebase Console

Setelah mengetahui cara membuat kampanye in-app messaging, sekarang saatnya mempertimbangkan jenis perilaku 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 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 untuk memberikan ulasan, seperti kupon atau kode diskon untuk restoran tertentu.

Kedua pendekatan tersebut dapat meningkatkan frekuensi pengguna memberikan ulasan untuk restoran di FriendlyEats, dan tampaknya pemberian kupon dapat memberikan dampak yang lebih kuat dalam hal ini. Namun, seberapa besar kemungkinan pengguna akan menulis ulasan jika kupon ini diberikan? Apakah biaya kupon sebanding dengan nilai kupon tersebut? Untuk menentukannya, kami akan menjalankan eksperimen pesan dalam aplikasi. Kita dapat menggunakan Pengujian A/B Firebase untuk menampilkan salah satu pesan dalam aplikasi secara acak kepada pengguna, dan mengukur efeknya terhadap perilaku pengguna, seperti uji klinis. Yang terbaik, hal ini dapat dilakukan sepenuhnya melalui Firebase console, tanpa memerlukan kode.

Untuk menyusun eksperimen pesan dalam aplikasi pertama Anda:

1. Di bagian Engage Firebase console, klik A/B Testing.
2. Klik Buat eksperimen, lalu pilih In-App Messaging yang ingin Anda gunakan untuk bereksperimen. Tindakan ini akan membuka komposer eksperimen yang ditunjukkan di bawah.

Beri nama eksperimen Anda beserta deskripsi opsional.

4. Langkah berikutnya adalah tempat Anda akan menyusun berbagai pesan dalam aplikasi yang akan dikirimkan kepada pengguna dalam eksperimen Anda. Pesan dalam aplikasi pertama yang akan kita buat adalah "dasar", atau kontrol eksperimen kita. Kita dapat membuat pesan "berikan ulasan" yang sederhana seperti ini:

5. Setelah memiliki dasar pengukuran, kita akan menyusun varian, yaitu pesan dalam aplikasi yang menawarkan kode kupon kepada pengguna untuk mendorong mereka memberikan ulasan. Meskipun tidak sepenuhnya terlihat dalam pratinjau di bawah, judul Pesan adalah "Dapatkan kupon, berikan ulasan!", dan isi pesan adalah "Lain kali saat Anda berada di Burrito Cafe, gunakan kode kupon FRIENDLYEATS-15 saat checkout untuk mendapatkan diskon 15% untuk pesanan Anda. Jangan lupa berikan ulasan setelahnya.". Semoga hal ini menginspirasi beberapa pengguna untuk mengunjungi Burrito Cafe.

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

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

9. Sekarang, yang tersisa adalah meninjau eksperimen, lalu klik Mulai eksperimen. Kemudian, kita bisa bersantai dan menunggu data dari eksperimen kita masuk.

Memeriksa pengumpulan data secara real time

Setelah memulai eksperimen, pengguna FriendlyEats akan melihat salah satu dari dua pesan dalam aplikasi yang kami buat secara acak saat mereka mengklik restoran, baik pesan dasar maupun pesan varian. Tindakan ini akan membagi pengguna kita 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. Data akan masuk setelah beberapa waktu, karena kita perlu menunggu pengguna benar-benar melihat pesan dalam aplikasi dan bertindak sesuai dengan pesan tersebut. Berikut tampilan hasil Anda setelah data yang cukup:

Dalam hal ini, varian meningkatkan baseline secara signifikan, sehingga kita dapat memilih untuk memilih Roll out variant, yang kemudian akan meluncurkan pesan dalam aplikasi dengan kupon kepada semua pengguna.

8. Selamat

Selamat, Anda telah berhasil membuat dan menjalankan eksperimen pesan dalam aplikasi pertama Anda. Sekarang Anda dapat menjalankan eksperimen di aplikasi Anda sendiri, dan menggunakan hasilnya untuk membuat kampanye pesan dalam aplikasi Anda lebih efektif.

Apa selanjutnya?

Lihat beberapa codelab ini...

• Firestore Flutter Multiplatform
• Menambahkan eksperimen Firebase Remote Config ke aplikasi Android

Bacaan lebih lanjut

Kita baru membahas sebagian kecil dari apa yang dapat dilakukan dengan Firebase In-App Messaging dan Firebase A/B Testing. Lihat artikel ini jika Anda ingin mempelajari lebih lanjut...

• Membuat Eksperimen Messaging dengan Pengujian A/B
• Membuat Eksperimen Remote Config dengan Pengujian A/B
• Mempelajari Kasus Penggunaan Firebase In-App Messaging
• Menyesuaikan pesan Firebase In-App Messaging

Dokumen referensi

• Membuat Eksperimen In-App Messaging dengan A/B Testing