Melacak Peristiwa di WebView dengan Google Analytics for Firebase

1. Pengantar

Terakhir Diperbarui: 25-02-2022

Yang akan Anda bangun

Dalam codelab ini, Anda akan mempelajari cara meneruskan peristiwa dari halaman web dalam WebView ke kode native sehingga GA4F dapat melacak peristiwa tersebut.

Kita akan menggunakan aplikasi Android Hybrid contoh yang memanggil halaman web menggunakan WebView.

Yang akan Anda pelajari

• Cara melakukan inisialisasi GA4F (Google Analytics for Firebase) di aplikasi Hybrid
• Cara membuat parameter dan peristiwa kustom di halaman web
• Cara meneruskan peristiwa di halaman web dalam WebView ke kode native
• Cara men-debug
• Cara mengimpor peristiwa dan menggunakannya untuk kampanye tindakan.

Yang Anda butuhkan

• Android Studio 3.6 atau yang lebih tinggi
• Akun Firebase

2. Mempersiapkan

Mendapatkan kode

Panduan resmi Firebase menyediakan contoh kode di GitHub. Kami memerlukannya untuk project ini.

Untuk memulai, Anda harus mendownload kode dan membukanya di lingkungan pengembangan favorit Anda. Kita akan menggunakan 2 direktori : android dan web. Direktori "android" adalah untuk aplikasi Android dan direktori "web" adalah untuk halaman web yang akan dipanggil oleh aplikasi melalui WebView.

3. Membuat dan menyiapkan project Firebase

Untuk memulai Firebase, Anda harus membuat dan menyiapkan project Firebase.

Membuat project Firebase

1. Login ke Firebase.

Di Firebase console, klik Tambahkan Project (atau Buat project), lalu beri nama project Firebase Anda sebagai Webview-test-codelab atau nama apa pun yang Anda suka.

2. Klik opsi pembuatan project. Setujui persyaratan Firebase jika diminta. Anda harus mengaktifkan Google Analytics untuk project ini, karena Anda membutuhkan peristiwa Google Analytics untuk melacak peristiwa tindakan dan menganalisis konversi.

Untuk mempelajari lebih lanjut project Firebase, lihat Memahami project Firebase.

4. Konfigurasi Firebase untuk Android

Mengonfigurasi Android di Firebase Console

1. Di Beranda Firebase Console, Anda dapat mengklik ikon Android seperti di bawah.

Atau, Anda dapat membuka Ringkasan Project di menu navigasi sebelah kiri, lalu mengklik tombol Android di bagian "Mulai dengan menambahkan Firebase ke aplikasi Anda".

Kemudian, Anda akan melihat layar "Tambahkan Firebase ke aplikasi Android Anda" seperti di bawah.

2. Anda dapat menemukan nama paket Android (mis. com.xxxx.myproject) di android/app/src/main/AndroidManifest.xml di direktori aplikasi Anda.

package="com.xxxx.myproject"

3. Kunci SHA-1 tidak diperlukan di sini. Kunci ini hanya diperlukan saat Anda ingin menggunakan Login dengan Google atau Firebase Dynamic Links atau mengimpor data pembelian dalam aplikasi dari Google Play yang bukan cakupan codelab ini.
4. Klik Daftarkan Aplikasi.
5. Download file konfigurasi google-services.json di Firebase console, lalu salin & tempel file ini ke direktori android/app di project aplikasi Anda.
6. Kembali di Firebase console, lewati langkah-langkah yang tersisa, lalu kembali ke halaman utama Firebase console.
7. Terakhir, Anda memerlukan Google Services Gradle plugin untuk membaca file google-services.json yang dihasilkan oleh Firebase
8. Di IDE atau editor Anda, buka android/app/build.gradle, lalu tambahkan baris berikut sebagai baris terakhir di file:

apply plugin: 'com.google.gms.google-services'

13. Buka android/build.gradle. Kemudian, tambahkan dependensi baru di dalam tag buildscript.

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. Jika aplikasi Anda masih berjalan, tutup dan build ulang untuk memungkinkan gradle menginstal dependensi.

Anda telah selesai mengonfigurasi aplikasi untuk Android.

5. Mengembangkan Antarmuka Web Analytics di web dan mencatat peristiwa kustom

Untuk melacak peristiwa di webview dengan Google Analytics, Anda harus memasukkan kode ke aplikasi web dan Android.

Di bagian ini, mari kita lihat kode yang perlu Anda masukkan ke halaman web.

Pertama, buat file javascript untuk digunakan dalam file html. Dalam kode contoh, file js diberi nama index.js. Anda perlu membuat fungsi "logEvent" untuk memanggil "AnayticsWebInterface" untuk Android, dan "messageHander" untuk iOS seperti kode di bawah.

Panggil fungsi ini di tempat Anda ingin melacak peristiwa dalam file html seperti di bawah.

Saat peristiwa dipicu di WebView dalam aplikasi Android, "window.AnalyticsWebInterface" akan dipanggil dan akan meneruskan peristiwa ke kode WebInterface di aplikasi.

6. Direktori web host untuk mendapatkan URL halaman web

Sebelum memanggil halaman web dalam WebView di aplikasi, Anda memerlukan URL halaman web. Ada banyak metode untuk menghosting halaman web. Dalam codelab ini, kita akan menggunakan layanan hosting Firebase hanya untuk kemudahan.

• Di terminal Anda, masukkan direktori web (mis. cd web) dan jalankan perintah berikut:
• npm install -g firebase-tools

Tindakan ini akan menginstal Firebase CLI.

• firebase login
• firebase init
• Pilih 'Hosting' saat ditanya fitur mana yang ingin Anda siapkan.
• Pilih project yang Anda siapkan untuk aplikasi Android Anda.
• Terima setelan default untuk semua perintah yang tersisa.
• firebase deploy --only hosting - men-deploy ke Firebase Hosting.

• Setelah mendapatkan URL halaman web, buka project aplikasi Anda di Android Studio dan masukkan URL web yang baru saja dibuat pada langkah ini dalam WebView seperti di bawah.

7. Mengembangkan kode antarmuka di Aplikasi Android

Untuk melacak peristiwa di WebView dengan GA4F, Anda harus memasukkan kode ke web dan Android. Di bagian ini, mari kita lihat kode mana yang perlu Anda masukkan ke aplikasi Android untuk menerima peristiwa dari halaman web di WebView.

Buat file "AnalyticsWebInterface.java" untuk membuat class "AnalyticsWebInterface". Di class ini, Anda perlu membuat kode @JavascriptInterface untuk menghubungkan fungsi logEvent di file js web seperti di bawah.

Selanjutnya, Anda perlu menambahkan antarmuka JavaScript di Aktivitas yang memanggil WebView seperti di bawah.

Untuk melihat seluruh kodenya, lihat kode contoh yang Anda download dari GitHub di langkah "Menyiapkan".

8. Memeriksa dan men-debug peristiwa

Untuk men-debug peristiwa, Anda dapat menggunakan kode berikut di terminal Android Studio setelah menghubungkan perangkat pengujian atau meluncurkan emulator.

> adb shell setprop debug.firebase.analytics.app [nama paket aplikasi]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

Klik "LOG EVENT 1" di aplikasi Anda, dan jika kode Anda berfungsi dengan baik, Anda akan melihat log seperti di bawah.

Jika ingin memeriksa di Firebase console, Anda juga dapat menggunakan tab Realtime. Buka Firebase console dan klik tab Realtime seperti di bawah.

Kemudian, filter peristiwa platform Android menggunakan fungsi "Tambahkan perbandingan".

Anda akan melihat peristiwa dari aplikasi Android di tab Real-Time jika kode Anda diterapkan dengan benar.

Dalam beberapa jam, Anda akan dapat melihat peristiwa yang dicatat ke dalam log di tab Events di Firebase console. Cukup klik tab Peristiwa dari Bagian Analytics yang ada di Firebase Console. Anda juga dapat memeriksa nilai di dalam event1 peristiwa hanya dengan mengklik peristiwa tersebut.

Untuk mengimpor event1 sebagai konversi di Google Ads, Tandai sebagai konversi dengan menggeser tombol Tandai sebagai konversi ke kanan.

Jika peristiwa ada di tab Konversi, berarti Anda telah berhasil menandai peristiwa sebagai konversi. Google Ads kini akan dapat mengimpor peristiwa ini dari Firebase.

Untuk tujuan proses debug, gunakan DebugView Firebase. Untuk detail selengkapnya, lihat Proses Debug Peristiwa.

9. Mengimpor peristiwa analisis di Google Ads

Setelah penyiapan Firebase Anda selesai, Anda siap meluncurkan kampanye aplikasi dengan peristiwa tindakan. Mulailah dengan menautkan Firebase ke Google Ads. Dengan menautkan Firebase ke Google Ads, kampanye aplikasi dapat mengimpor peristiwa Firebase. Proses ini juga membantu Google Ads untuk meningkatkan kampanye aplikasi dengan memungkinkannya mempelajari lebih lanjut audiens mereka.

1. Buka Setelan Firebase dengan mengklik tombol di samping Ringkasan Project.
2. Di tab Integrations, Anda akan melihat Google Ads dan tombol Tautkan. Klik Tautkan, lalu klik Lanjutkan.

3. Pilih akun Google Ads.

Perhatian: Jika peristiwa target tidak ditandai sebagai peristiwa konversi, Google Ads tidak akan dapat mengimpornya. Pastikan peristiwa ditandai sebagai konversi dengan benar.

Sekarang, bagian Firebase sudah selesai.

Buka Google Ads.

1. Login, lalu buka Alat & Setelan > Pengukuran > Konversi untuk mengimpor peristiwa kustom sebagai konversi.
2. Klik tombol + untuk menambahkan tindakan konversi baru.

3. Pilih Properti Google Analytics 4 (Firebase), lalu klik Lanjutkan.

4. Anda dapat melihat semua peristiwa analisis yang ditandai sebagai konversi. Temukan peristiwa event1 yang kita terapkan sebelumnya.

5. Periksa tindakan, klik Impor, lalu klik Lanjutkan.

Setelah menetapkan event1 sebagai tindakan konversi, Anda dapat meluncurkan kampanye tindakan aplikasi dengan peristiwa event1.

10. Meluncurkan kampanye tindakan aplikasi dengan peristiwa yang diimpor

Penting: Agar berhasil meluncurkan kampanye aplikasi, Anda harus mendapatkan aplikasi level produksi di Google Play. Namun, jika Anda belum siap untuk publikasi, Anda dapat melewati langkah ini untuk sekarang.

6. Buka tab kampanye di akun Anda sekarang, dan mulai kampanye baru dengan mengklik tombol +. Klik [Kampanye baru], lalu klik Lanjutkan.
7. Luncurkan kampanye promosi Aplikasi dengan opsi Penginstalan Aplikasi.

8. Temukan aplikasi Anda dengan mengetik nama aplikasi, nama paket, atau penayang.
9. Di bagian Bidding, pilih Tindakan dalam aplikasi di menu dropdown.
10. Temukan peristiwa kustom Anda di daftar yang diberikan. Tetapkan Target biaya per tindakan, dan selesaikan opsi tambahan lainnya.

11. Selesaikan setelan kampanye Anda.

11. Selamat

Selamat, Anda telah berhasil mengintegrasikan Firebase dan Google Ads Anda. Hal ini akan membantu Anda meningkatkan performa kampanye dengan peristiwa Firebase yang diimpor.

Anda telah mempelajari

• Cara melakukan inisialisasi GA4F (Google Analytics for Firebase) di aplikasi Hybrid
• Cara membuat parameter dan peristiwa kustom di halaman web
• Cara meneruskan peristiwa di halaman web dalam WebView ke kode native
• Cara men-debug
• Cara mengimpor peristiwa dan menggunakannya untuk kampanye tindakan.

12. Referensi

Panduan Resmi

• Menggunakan Analytics di WebView - Firebase - Google

Penyiapan Firebase & Google Ads

• Google Ads dengan peristiwa kustom Google Analytics for Firebase - Android
• Meluncurkan Kampanye Google Ads dengan Peristiwa Kustom dan Flutter Google Analytics