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 contoh aplikasi Android Hybrid yang memanggil halaman web menggunakan WebView.

Yang akan Anda pelajari

• Cara melakukan inisialisasi GA4F (Google Analytics for Firebase) di aplikasi Hybrid
• Cara membuat peristiwa dan parameter 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 kode contoh di GitHub. Kami membutuhkannya untuk proyek ini.

Untuk memulai, Anda harus mendownload kode dan membukanya di lingkungan pengembangan favorit Anda. Kita akan menggunakan 2 direktori : android dan web. "Android" untuk aplikasi Android dan "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 Add Project (atau Create a project), dan beri nama project Firebase sebagai Webview-test-codelab atau nama apa pun yang Anda inginkan.

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 ini.

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

Kemudian Anda akan melihat pesan "Tambahkan Firebase ke aplikasi Android Anda" seperti di bawah ini.

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

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 in_app_purchase dari Google Play yang tidak termasuk dalam 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 plugin Gradle Layanan Google 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 web dan aplikasi Android.

Di bagian ini, mari kita lihat kode mana yang harus 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 di bawah ini.

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

Saat suatu peristiwa dipicu di WebView pada 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. Akan ada banyak metode untuk menghosting halaman web. Dalam codelab ini, kita akan menggunakan layanan hosting Firebase hanya untuk memudahkan.

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

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.
• Setujui setelan default untuk semua dialog yang tersisa.
• firebase deploy --only hosting - men-deploy ke hosting Firebase.

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

7. Mengembangkan kode antarmuka di Aplikasi Android

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

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

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

Untuk melihat seluruh kodenya, lihat kode contoh yang Anda unduh dari GitHub di bagian "Menyiapkan" langkah waktu ini.

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 PANJANG

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

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

Klik "CATAT ACARA 1" di aplikasi Anda, dan jika kode Anda berfungsi dengan baik, Anda akan melihat log seperti di bawah ini.

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

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

Anda akan melihat peristiwa dari aplikasi Android di tab Realtime jika kode Anda diterapkan dengan benar.

Dalam beberapa jam, Anda dapat melihat peristiwa yang dicatat ke dalam log pada tab Events di Firebase console. Cukup klik tab Events 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 sekarang 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 selesai, Anda siap meluncurkan kampanye aplikasi dengan peristiwa tindakan. Mulai 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 Firebase Settings dengan mengklik tombol di samping Project Overview.
2. Dalam tab Integrasi, 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 dengan benar sebagai konversi.

Sekarang, bagian Firebase sudah selesai.

Buka Google Ads.

1. Login, dan buka Alat & Pengaturan > 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 tindakannya, 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 saat ini, dan mulai kampanye baru dengan mengklik tombol +. Klik [Kampanye baru], lalu klik Lanjutkan.
7. Luncurkan kampanye Promosi aplikasi dengan opsi Instal 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 disediakan. Tetapkan Target biaya per tindakan, dan selesaikan opsi tambahan.

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 peristiwa dan parameter 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

Firebase & Penyiapan Google Ads

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