Melacak Peristiwa di WebView dengan Google Analytics

1. Pengantar

Terakhir diperbarui: 22-12-2021

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

Dokumen panduan Firebase menyediakan kode contoh yang kami perlukan untuk project ini ke github.

Untuk memulai, Anda harus mengambil kode dan membukanya di lingkungan pengembangan favorit Anda. Kita akan menggunakan 2 direktori : android, web. "Android" untuk aplikasi Android dan "web" adalah untuk laman 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 Android

Mengonfigurasi Android

1. Di Firebase Console, Pilih Project Overview di panel navigasi sebelah kiri, lalu klik tombol Android di bagian "Get started by menambahkan Firebase ke aplikasi Anda"

Anda akan melihat dialog yang ditampilkan di layar berikut.

2. Nilai penting yang harus diberikan adalah nama paket Android, yang akan Anda dapatkan mengikuti langkah berikut.

Tips: Baca Set the application ID untuk informasi selengkapnya mengenai ID paket dan aplikasi.

3. Di direktori aplikasi, 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, tempelkan nama paket yang disalin ke kolom Android package name.
6. Kita tidak memerlukan kunci SHA-1 di sini, kecuali Anda berencana untuk menggunakan Login dengan Google atau Firebase Dynamic Links (perlu diketahui bahwa ini bukan bagian dari codelab ini). Jika Anda berencana mengimpor data in_app_purchase dari Google Play, Anda akan harus menetapkan kuncinya nanti.
7. Klik Register App.
8. Melanjutkan di Firebase, ikuti petunjuk untuk mendownload file konfigurasi google-services.json.

9. Buka direktori aplikasi 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. Terakhir, Anda memerlukan Google Services Gradle plugin untuk membaca file google-services.json yang dihasilkan oleh Firebase.
12. 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, lalu di dalam tag buildscript, tambahkan dependensi baru:

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 perlu Anda masukkan ke dalam web.

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

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

Saat peristiwa dipicu di webview di Android, "window.AnalyticsWebInterface" akan dipanggil dan menghubungkan peristiwa ke aplikasi native.

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, tetapi dalam codelab ini, kami akan memandu Anda 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.
• Setujui setelan default untuk semua dialog yang tersisa.
• firebase deploy --only hosting - men-deploy ke hosting Firebase.

7. Mengembangkan kode antarmuka di Aplikasi Android

Untuk melacak peristiwa di webview dengan Google Analytics, Anda harus memasukkan kode ke web dan Android. Di bagian ini, mari kita lihat kode mana yang harus Anda masukkan ke aplikasi Android.

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 {i>javascript<i} dalam Aktivitas yang memanggil webview seperti di bawah ini.

Untuk melihat seluruh kodenya, lihat kode contoh yang Anda download di bagian "Persiapan" 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.

&gt; adb shell setprop debug.firebase.analytics.app [nama paket aplikasi]

&gt; adb shell setprop log.tag.FA PANJANG

&gt; adb shell setprop log.tag.FA-SVC VERBOSE

&gt; adb logcat -v time -s FA FA-SVC

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

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.

Tandai event1 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-Flutter Anda 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 akan meluncurkan kampanye tindakan yang dapat menargetkan pengguna yang kemungkinan mengaktifkan peristiwa event1 lebih dari 5 kali.

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.