Eksperimen In-App Messaging Pertama Anda

1. Pengantar

Sasaran

Dalam codelab ini, Anda akan membuat instrumen 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.

b284c40acc99b994.png

Hal yang akan Anda pelajari

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

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 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 kunci 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 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 hidup 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. 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, beralihlah ke direktori codelab dan lihat cabang fiam-abt:

git checkout fiam-abt

Cabang ini berisi semua kode yang diperlukan untuk codelab ini, termasuk versi yang sudah selesai di folder done. Cabang lain dalam repositori ini berisi kode untuk membangun aplikasi FriendlyEats, seperti yang ditunjukkan di codelab Firestore Flutter multi-platform. 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 memanfaatkan eksperimen pesan dalam aplikasi 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 Anda).
  2. Pastikan Google Analytics diaktifkan untuk project, 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 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 secara anonim:

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

fee6c3ebdf904459.png

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:

  1. Di panel kiri Firebase console, luaskan Build, lalu pilih Firestore database.
  2. Klik Buat database.
  3. Biarkan Database ID disetel ke (default).
  4. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
    Untuk aplikasi yang sebenarnya, Anda ingin 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, untuk menambahkan dukungan untuk platform seluler, Anda harus:

  • Daftarkan 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 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:

c42139f18fb9a2ee.png

  1. Nilai penting yang harus diberikan adalah ID paket iOS. Anda dapat memperoleh ID paket dengan menjalankan tiga langkah berikut.
  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 ID Paket.

9733e26be329f329.png

  1. Kembali ke dialog Firebase, tempel Bundle Identifier yang disalin ke kolom iOS bundle ID, lalu klik Register App.
  1. Lanjutkan di Firebase, lalu 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 Anda download) ke subfolder Runner.
  4. Di dialog yang muncul di Xcode, klik Finish.
  5. 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.

84e0b3199bef6d8a.pngSMengonfigurasi Android

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

Anda akan melihat dialog berikut : 8254fc299e82f528.pngS

  1. Nilai penting yang harus diberikan adalah Android package name. Anda akan mendapatkan nama paket saat melakukan dua langkah berikut:
  1. Di direktori aplikasi Flutter Anda, buka file android/app/src/main/AndroidManifest.xml.
  2. Dalam elemen manifest, temukan nilai string atribut package. Nilai ini adalah nama paket Android (seperti 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. Lanjutkan 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 di 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 lalu build ulang untuk memungkinkan gradle menginstal dependensi.

Anda telah selesai mengonfigurasi aplikasi Flutter untuk Android.

4. Menjalankan aplikasi secara lokal

Anda sudah siap untuk mulai mengerjakan aplikasi Anda. 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 yang tersedia dengan perintah berikut:

flutter devices

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

7d44d7c0837b3e8e.pngS

Sekarang, jalankan aplikasi secara lokal dengan perintah berikut:

flutter run

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

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

5. Buat dan uji pesan pertama Anda

Mengintegrasikan Firebase In-App Messaging ke aplikasi Anda

Integrasi dasar In-App Messaging benar-benar tanpa kode. Anda hanya perlu menambahkan dependensi dan 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 pertama kali dibuka.

Untuk menulis pesan pertama Anda:

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

4fec02395f89f2a8.png

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

59845004afc26847.png

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

3f1eb7a327a50265.pngS

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

8dc5cea0a4c79008.png

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

5bbc987bf63d1f48.png

Melihat pesan di aplikasi

Sekarang, uninstal dan instal ulang aplikasi Anda, dan Anda akan melihat tampilan pesan yang Anda buat saat membuka. Selamat, Anda baru saja mengirim pesan dalam aplikasi yang pertama! 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

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

  1. Menambahkan 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 memicu 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 peristiwa baru

8e12d8f1f8f166dd.pngS

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

4f7d6bd2960b3ef7.png

Menguji pemicu di aplikasi

Pada tahap ini, Anda seharusnya dapat menjalankan aplikasi dengan

flutter run

Dan ketika Anda mengeklik restoran, Anda seharusnya melihat Pesan Dalam Aplikasi

a11febda5526263.pngS

7. Membuat Kampanye FIAM+ABT

Mulailah dengan sasaran

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

Pertama, mari kita 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 pesan dalam aplikasi, 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 bermanfaat! Ada beberapa cara yang bisa kami 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 restoran untuk membantu meningkatkan aplikasi FriendlyEats. Cara lainnya adalah menggunakan pesan dalam aplikasi untuk menawarkan beberapa jenis insentif untuk memberikan ulasan, seperti kupon atau kode diskon ke restoran tertentu.

Kedua pendekatan tersebut dapat meningkatkan frekuensi pengguna memberikan ulasan untuk restoran di FriendlyEats, dan tampaknya memberikan kupon dapat memiliki dampak yang lebih kuat dalam hal ini. Namun, seberapa besar kemungkinan pengguna akan menulis ulasan jika kupon ini diberikan? Apakah biaya kuponnya sepadan? Untuk menentukan hal ini, kami akan menjalankan eksperimen in-app messaging. Kita dapat menggunakan Firebase A/B Testing untuk menampilkan salah satu pesan dalam aplikasi secara acak kepada pengguna, dan mengukur pengaruhnya terhadap perilaku pengguna, seperti uji klinis. Hebatnya, ini dapat dilakukan sepenuhnya melalui Firebase console, tanpa memerlukan kode.

Untuk menulis eksperimen pesan dalam aplikasi pertama Anda:

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

a792dfd4f82fee9c.png

Beri nama dan deskripsi opsional untuk eksperimen Anda.

  1. Langkah berikutnya adalah tempat Anda akan menulis berbagai pesan dalam aplikasi yang akan dikirimkan kepada pengguna dalam eksperimen Anda. Pesan dalam aplikasi pertama yang akan kita tulis adalah "dasar pengukuran", atau kontrol eksperimen kita. Kita dapat menjadikannya pesan "buat ulasan" sederhana:

50e3eb946c56501a.pngS

  1. Setelah memiliki dasar pengukuran, sekarang kita akan membuat varian, yaitu pesan dalam aplikasi yang menawarkan kode kupon kepada pengguna untuk mendorong mereka memberikan ulasan. Ini tidak sepenuhnya terlihat dalam pratinjau di bawah, tetapi judul Pesannya adalah "Dapatkan kupon, berikan ulasan", dan isi pesannya adalah "Saat Anda berkunjung ke Burrito Cafe lagi, gunakan kode kupon FRIENDLYEATS-15 saat checkout untuk mendapatkan diskon 15% untuk pesanan Anda. Dan ingatlah untuk memberikan ulasan setelah itu!". Hal ini diharapkan akan menginspirasi beberapa pengguna untuk mengunjungi Burrito Cafe!

bed9182080bebb41.pngS

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 menetapkan ini ke 100% untuk contoh ini, karena kita ingin semua pengguna melihat dasar pengukuran atau varian kupon. Jika ingin memiliki grup kontrol yang tidak ditampilkan pesan dalam aplikasi sama sekali, Anda dapat mengurangi persentase eksposur ini.

bd96bf5798d227f1.png

  1. Selanjutnya, Anda akan menentukan beberapa sasaran untuk eksperimen tersebut. Ini adalah hasil eksperimen yang ingin kita ukur. Kita akan menetapkan ini sebagai peristiwa analisis review_success yang ditentukan di bagian sebelumnya, karena kita ingin melihat dampak berbagai pesan dalam aplikasi terhadap pengguna yang memberikan ulasan restoran. eb89d3b9f89ab43b.pngS
  2. Untuk penjadwalan, kita akan mengizinkan 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.pngS

  1. Sekarang, langkah terakhir adalah meninjau eksperimen kita, dan klik Start experiment. Kemudian, kita dapat bersantai dan menunggu data dari eksperimen kita masuk.

566af8bace30c67.pngS

Melihat pengumpulan data secara real time

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

8fa8a0edcd8a8ad4.png

Dalam hal ini, varian meningkat berdasarkan dasar pengukuran secara signifikan, sehingga kita dapat 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 menjadi lebih efektif.

Apa selanjutnya?

Lihat beberapa codelab ini...

Bacaan lebih lanjut

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

Dokumen referensi