Meluncurkan Kampanye Google Ads dengan Peristiwa Kustom dan Flutter Google Analytics

1. Pengantar

Terakhir Diperbarui: 25-01-2021

Yang akan Anda bangun

Dalam codelab ini, Anda akan mempelajari cara menerapkan peristiwa kustom dengan GA4F, dan meluncurkan kampanye tindakan melalui aplikasi Google Ads untuk Flutter.

Kita akan menggunakan aplikasi Flutter default dengan widget penghitung sederhana. Kita akan mengiklankan aplikasi kepada calon pengguna yang kemungkinan akan mengklik widget penghitung.

bdbf1fc3cbf49ac7.png

Yang akan Anda pelajari

  • Cara melakukan inisialisasi GA4F (Google Analytics for Firebase) di Flutter
  • Cara membuat peristiwa dan parameter kustom
  • Cara mengimpor peristiwa dari Firebase ke Google Ads
  • Cara meluncurkan kampanye tindakan dengan peristiwa kustom

Yang Anda butuhkan

  • Android Studio 3.6 atau yang lebih tinggi
  • Xcode (untuk dukungan iOS)
  • Akun Firebase
  • Akun Google Ads

2. Memulai project Flutter baru

Membuat aplikasi Flutter dengan template sederhana. Anda akan memodifikasi aplikasi awal ini untuk codelab ini.

Luncurkan Android Studio.

  1. Jika Anda tidak memiliki project yang terbuka, pilih Start a new Flutter app dari halaman selamat datang. Jika tidak, pilih File > Baru > Project Flutter Baru.
  2. Pilih Flutter Application sebagai jenis project, lalu klik Next.
  3. Verifikasi bahwa jalur Flutter SDK menentukan lokasi SDK. (Pilih Install SDK jika kolom teks kosong.)
  4. Masukkan nama project, lalu klik Next.
  5. Gunakan nama paket default yang disarankan oleh Android Studio, lalu klik Next.
  6. Klik Finish.
  7. Tunggu Android Studio menginstal SDK dan membuat project tersebut.

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), dan beri nama project Firebase sebagai Firebase-Flutter-Ads atau nama apa pun yang Anda inginkan.

e9a8e1b1c7c52125.png

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

e58151a081f0628.png

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

4. Konfigurasi Firebase khusus platform (Android)

3e5b8f1b6ca538c4.png

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.

3b7d3b33d81fe8ea.png

  1. Nilai penting yang harus diberikan adalah nama paket Android, yang akan Anda dapatkan mengikuti langkah berikut.
  1. Di direktori aplikasi Flutter Anda, buka file android/app/src/main/AndroidManifest.xml.
  2. Di elemen manifest, temukan nilai string atribut package. Nilai ini adalah nama paket Android (misalnya com.yourcompany.yourproject). Salin nilai ini.
  3. Di dialog Firebase, tempelkan nama paket yang disalin ke kolom Android package name.
  4. 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.
  5. Klik Register App.
  6. Melanjutkan di Firebase, ikuti petunjuk untuk mendownload file konfigurasi google-services.json.

52f08aa18c8d59d0.png

  1. Buka direktori aplikasi Flutter, lalu pindahkan file google-services.json (yang baru saja Anda download) ke direktori android/app.
  2. Kembali di Firebase console, lewati langkah-langkah yang tersisa, lalu kembali ke halaman utama Firebase console.
  3. Terakhir, Anda memerlukan Google Services Gradle plugin untuk membaca file google-services.json yang dihasilkan oleh Firebase.
  4. 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'
  1. Buka android/build.gradle, lalu di dalam tag buildscript, tambahkan dependensi baru:
buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}
  1. Jika aplikasi Anda masih berjalan, tutup dan build ulang untuk memungkinkan gradle menginstal dependensi.

Anda telah selesai mengonfigurasi aplikasi Flutter Anda untuk Android. Untuk iOS, sebaiknya baca codelab ini ( Mengenal Firebase untuk Flutter)

5. Mengonfigurasi Firebase Analytics di Flutter

Pada langkah ini, Anda akan mulai menggunakan paket Firebase Analytics bernama firebase_analytics, yang berisi fitur Firebase Analytics.

File pubspec mengelola aset untuk aplikasi Flutter. Di pubspec.yaml, tambahkan firebase_analytics: ^6.2.0 (firebase_analytics 6.2.0 atau yang lebih tinggi) ke daftar dependensi:

dependencies: 
   flutter: 
      sdk: flutter 
   cupertino_icons: ^0.1.2 
   firebase_analytics: ^6.2.0   # add this line

Saat melihat pubspec di tampilan editor Android Studio, klik Packages get. Tindakan ini akan menarik paket ke dalam project Anda. Anda akan melihat tampilan berikut di konsol:

flutter packages get 
Running "flutter packages get" in startup_namer... 
Process finished with exit code 0

Dengan menjalankan Pub get, file pubspec.lock akan otomatis dibuat dengan daftar semua paket yang ditarik ke dalam project beserta nomor versinya.

Di lib/main.dart, impor paket baru:

import 'package:firebase_analytics/firebase_analytics.dart';

Di class MyApp, mulai objek FirebaseAnalytics dengan memanggil konstruktor.

class MyApp extends StatelessWidget {
 static FirebaseAnalytics analytics = FirebaseAnalytics();
   ...
}

Sekarang Anda siap untuk mengaktifkan beberapa log peristiwa kustom.

6. Mencatat log peristiwa kustom dengan Firebase Analytics

Jika akan membuat template baru di aplikasi Flutter, Anda akan melihat variabel _counter, dan metode _incrementCounter() di dalam class State default. Sekarang, Anda ingin mencatat peristiwa khusus ketika tombol penambahan diklik lebih dari lima kali dari pengguna yang terlalu antusias. Nanti, kita akan meluncurkan kampanye aplikasi untuk menarik calon pengguna yang antusias

Pertama, kita ingin meneruskan objek analisis yang telah kita inisialisasi ke widget Stateful. Kita mulai dengan menambahkan parameter analisis ke konstruktor MyHomePage.

MyHomePage({Key key, this.title, this.analytics}) : super(key: key);

Anda juga akan menambahkan parameter analisis saat memanggil konstruktor.

home: MyHomePage(
   title: 'Flutter Demo Home Page',
   analytics: analytics,
),

Sekarang, Anda dapat dengan mudah mencatat peristiwa ke dalam log dengan metode logEvent(). Tambahkan metode dan tambahkan variabel _counter.

void _incrementCounter() {
 setState(() {
   _counter++;

   //add this
   if(_counter > 5) { 
     widget.analytics.logEvent(name: "clicked_counter"); 
   }

 });
}

Sekarang aplikasi Anda sudah siap untuk mengaktifkan log peristiwa kustom.

Anda juga dapat menggunakan metode yang telah di-build sebelumnya untuk mengaktifkan peristiwa.

f0742c956977df1d.png

Sekarang semuanya sudah siap. Di Android Studio, jalankan "main.dart".

(Opsional) Mengirim informasi tambahan ke Firebase Analytics menggunakan parameter

Anda dapat mengirim informasi tambahan melalui parameter. Parameter kustom dapat didaftarkan untuk pelaporan di laporan Analytics Anda. Parameter juga dapat digunakan sebagai filter di definisi audience yang dapat diterapkan ke setiap laporan. Jika aplikasi Anda ditautkan ke project BigQuery, parameter kustom juga akan ditemukan di BigQuery (lihat BigQuery Export for Firebase).

Kita menetapkan nilai _counter sebagai parameter di sini.

void _incrementCounter() {
 setState(() {
   _counter++;

   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
   }
 });
}

Memeriksa dan men-debug peristiwa

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

32b01a1412ab2ba5.png

Tandai clicked_counter sebagai konversi dengan menggeser tombol Tandai sebagai konversi ke kanan.

e6b420a73db88f03.png

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.

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

b711bf2e94fa0895.png

  1. Pilih akun Google Ads.

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.

73cec8d2e80eab03.png

  1. Pilih properti Google Analytics 4 (Firebase), lalu klik Lanjutkan.

4b1d8f6a712b2ac6.png

  1. Anda dapat melihat semua peristiwa analisis yang ditandai sebagai konversi. Temukan peristiwa clicked_counter yang kita terapkan sebelumnya.

ba1bbe6b2924fac8.png

  1. Periksa tindakannya, klik Impor, lalu klik Lanjutkan.

ab35e341dff32e48.png

Setelah menetapkan clicked_counter sebagai tindakan konversi, Anda akan meluncurkan kampanye tindakan yang dapat menargetkan pengguna yang kemungkinan mengaktifkan peristiwa clicked_counter lebih dari 5 kali.

8. Meluncurkan kampanye tindakan aplikasi dengan peristiwa yang diimpor

  1. Buka tab kampanye di akun Anda saat ini, dan mulai kampanye baru dengan mengklik tombol +. Klik [Kampanye baru], lalu klik Lanjutkan.
  2. Luncurkan kampanye Promosi aplikasi dengan opsi Instal Aplikasi.

af98c44d1476558.png

  1. Temukan aplikasi Anda dengan mengetik nama aplikasi, nama paket, atau penayang.
  2. Di bagian Bidding, pilih Tindakan dalam aplikasi di menu dropdown.
  3. Temukan peristiwa kustom Anda di daftar yang disediakan. Tetapkan Target biaya per tindakan, dan selesaikan opsi tambahan.

885956ad00592eb3.png

  1. Selesaikan setelan kampanye Anda.

9. 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 Mengonfigurasi Firebase Analytics untuk Flutter
  • Cara mencatat peristiwa kustom ke dalam log dengan Firebase Analytics di aplikasi Flutter.
  • Cara mengimpor peristiwa dan menggunakannya untuk kampanye tindakan.