Iklan di layar pembuka aplikasi adalah format iklan khusus yang ditujukan bagi penayang yang ingin memonetisasi layar pemuatan aplikasi mereka. Iklan di layar pembuka aplikasi dapat ditutup kapan pun, dan dirancang untuk ditampilkan saat pengguna menampilkan aplikasi ke latar depan.
Iklan di layar pembuka aplikasi akan otomatis menampilkan area branding kecil sehingga pengguna tahu bahwa mereka berada di aplikasi Anda. Berikut adalah contoh tampilan iklan di layar pembuka aplikasi:
Prasyarat
- Plugin Flutter 0.13.6 atau yang lebih tinggi.
- Selesaikan Mulai. Aplikasi Flutter Anda harus sudah mengimpor plugin Flutter Google Mobile Ads.
Selalu melakukan pengujian dengan iklan percobaan
Saat membangun dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan, bukan iklan produksi langsung. Jika Anda tidak melakukannya, akun Anda dapat ditangguhkan.
Cara termudah untuk memuat iklan percobaan adalah dengan menggunakan ID unit iklan percobaan khusus kami untuk iklan reward Android dan iOS:
/21775744923/example/app-open
Unit iklan ini telah dikonfigurasi secara khusus agar menampilkan iklan percobaan untuk setiap permintaan, dan Anda dapat menggunakannya di aplikasi Anda sendiri saat melakukan coding, pengujian, dan proses debug. Pastikan Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi.
Penerapan
Langkah-langkah utama untuk mengintegrasikan iklan di layar pembuka aplikasi adalah:
- Buat class utilitas yang memuat iklan sebelum Anda perlu menampilkannya.
- Muat iklan.
- Mendaftarkan callback dan menampilkan iklan.
- Berlangganan ke
AppStateEventNotifier.appStateStream
untuk menampilkan iklan selama peristiwa pengaktifan aplikasi.
Membuat class utilitas
Buat class baru bernama AppOpenAdManager
untuk memuat iklan. Kelas ini mengelola
variabel instance untuk terus melacak iklan yang dimuat dan ID unit iklan untuk setiap
platform.
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'dart:io' show Platform;
class AppOpenAdManager {
String adUnitId = '/21775744923/example/app-open';
AppOpenAd? _appOpenAd;
bool _isShowingAd = false;
/// Load an AppOpenAd.
void loadAd() {
// We will implement this below.
}
/// Whether an ad is available to be shown.
bool get isAdAvailable {
return _appOpenAd != null;
}
}
Memuat iklan
Iklan di layar pembuka aplikasi Anda harus siap sebelum pengguna masuk ke aplikasi Anda. Terapkan class utilitas untuk membuat permintaan iklan sebelum Anda perlu menampilkan iklan.
Pemuatan iklan dilakukan menggunakan metode loadWithAdManagerAdRequest
pada class AppOpenAd
. Metode pemuatan memerlukan ID unit iklan, mode
orientasi, objek AdManagerAdRequest
, dan pengendali
penyelesaian yang dipanggil saat pemuatan iklan berhasil atau gagal. Objek AppOpenAd
yang dimuat disediakan sebagai parameter di pengendali penyelesaian. Contoh
berikut menunjukkan cara memuat AppOpenAd
.
public class AppOpenAdManager {
...
/// Load an AppOpenAd.
void loadAd() {
AppOpenAd.loadWithAdManagerAdRequest(
adUnitId: adUnitId,
adManagerAdRequest: AdManagerAdRequest(),
adLoadCallback: AppOpenAdLoadCallback(
onAdLoaded: (ad) {
_appOpenAd = ad;
},
onAdFailedToLoad: (error) {
print('AppOpenAd failed to load: $error');
// Handle the error.
},
),
);
}
}
Menampilkan iklan dan menangani callback layar penuh
Sebelum menampilkan iklan, daftarkan FullScreenContentCallback
untuk setiap peristiwa iklan yang ingin Anda dengarkan.
public class AppOpenAdManager {
...
public void showAdIfAvailable() {
if (!isAdAvailable) {
print('Tried to show ad before available.');
loadAd();
return;
}
if (_isShowingAd) {
print('Tried to show ad while already showing an ad.');
return;
}
// Set the fullScreenContentCallback and show the ad.
_appOpenAd!.fullScreenContentCallback = FullScreenContentCallback(
onAdShowedFullScreenContent: (ad) {
_isShowingAd = true;
print('$ad onAdShowedFullScreenContent');
},
onAdFailedToShowFullScreenContent: (ad, error) {
print('$ad onAdFailedToShowFullScreenContent: $error');
_isShowingAd = false;
ad.dispose();
_appOpenAd = null;
},
onAdDismissedFullScreenContent: (ad) {
print('$ad onAdDismissedFullScreenContent');
_isShowingAd = false;
ad.dispose();
_appOpenAd = null;
loadAd();
},
);
}
}
Jika pengguna kembali ke aplikasi Anda setelah keluar dengan mengklik iklan buka aplikasi, pastikan mereka tidak melihat iklan buka aplikasi lain.
Memproses peristiwa transisi aplikasi ke latar depan
Untuk mendapatkan notifikasi tentang peristiwa latar depan aplikasi, Anda harus berlangganan
AppStateEventNotifier.appStateStream
dan memproses peristiwa foreground
.
import 'package:app_open_example/app_open_ad_manager.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// Listens for app foreground events and shows app open ads.
class AppLifecycleReactor {
final AppOpenAdManager appOpenAdManager;
AppLifecycleReactor({required this.appOpenAdManager});
void listenToAppStateChanges() {
AppStateEventNotifier.startListening();
AppStateEventNotifier.appStateStream
.forEach((state) => _onAppStateChanged(state));
}
void _onAppStateChanged(AppState appState) {
// Try to show an app open ad if the app is being resumed and
// we're not already showing an app open ad.
if (appState == AppState.foreground) {
appOpenAdManager.showAdIfAvailable();
}
}
}
Sekarang Anda dapat menginisialisasi AppLifecycleReactor
dan mulai memproses perubahan siklus proses aplikasi. Misalnya, dari halaman beranda Anda:
import 'package:app_open_example/app_open_ad_manager.dart';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'app_lifecycle_reactor.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'App Open Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'App Open Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
/// Example home page for an app open ad.
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
late AppLifecycleReactor _appLifecycleReactor;
@override
void initState() {
super.initState();
AppOpenAdManager appOpenAdManager = AppOpenAdManager()..loadAd();
_appLifecycleReactor = AppLifecycleReactor(
appOpenAdManager: appOpenAdManager);
}
Pertimbangkan akhir masa berlaku iklan
Untuk memastikan Anda tidak menampilkan iklan yang masa berlakunya sudah habis, tambahkan stempel waktu ke
AppOpenAdManager
sehingga Anda dapat memeriksa durasi iklan sejak dimuat.
Kemudian, gunakan stempel waktu tersebut untuk memeriksa apakah iklan tersebut masih valid.
/// Utility class that manages loading and showing app open ads.
class AppOpenAdManager {
...
/// Maximum duration allowed between loading and showing the ad.
final Duration maxCacheDuration = Duration(hours: 4);
/// Keep track of load time so we don't show an expired ad.
DateTime? _appOpenLoadTime;
...
/// Load an AppOpenAd.
void loadAd() {
AppOpenAd.loadWithAdManagerAdRequest(
adUnitId: adUnitId,
orientation: AppOpenAd.orientationPortrait,
adManagerAdRequest: AdManagerAdRequest(),
adLoadCallback: AppOpenAdLoadCallback(
onAdLoaded: (ad) {
print('$ad loaded');
_appOpenLoadTime = DateTime.now();
_appOpenAd = ad;
},
onAdFailedToLoad: (error) {
print('AppOpenAd failed to load: $error');
},
),
);
}
/// Shows the ad, if one exists and is not already being shown.
///
/// If the previously cached ad has expired, this just loads and caches a
/// new ad.
void showAdIfAvailable() {
if (!isAdAvailable) {
print('Tried to show ad before available.');
loadAd();
return;
}
if (_isShowingAd) {
print('Tried to show ad while already showing an ad.');
return;
}
if (DateTime.now().subtract(maxCacheDuration).isAfter(_appOpenLoadTime!)) {
print('Maximum cache duration exceeded. Loading another ad.');
_appOpenAd!.dispose();
_appOpenAd = null;
loadAd();
return;
}
// Set the fullScreenContentCallback and show the ad.
_appOpenAd!.fullScreenContentCallback = FullScreenContentCallback(...);
_appOpenAd!.show();
}
}
Cold start dan layar pemuatan
Sejauh ini, dokumentasi mengasumsikan bahwa Anda hanya menampilkan iklan di layar pembuka aplikasi saat pengguna menampilkan aplikasi Anda di latar depan saat ditangguhkan dalam memori. "Cold start" terjadi saat aplikasi Anda diluncurkan, tetapi sebelumnya tidak ditangguhkan dalam memori.
Contoh cold start adalah saat pengguna membuka aplikasi Anda untuk pertama kalinya. Dengan cold start, Anda tidak akan memiliki iklan di layar pembuka aplikasi yang dimuat sebelumnya dan siap ditampilkan langsung. Penundaan antara saat Anda meminta iklan dan menerima iklan kembali dapat menciptakan situasi yang memungkinkan pengguna menggunakan aplikasi Anda sesaat sebelum dikejutkan dengan iklan yang tidak sesuai konteks. Hal ini harus dihindari karena merupakan pengalaman pengguna yang buruk.
Cara yang lebih disukai untuk menggunakan iklan di layar pembuka aplikasi saat cold start adalah menggunakan layar pemuatan untuk memuat aset aplikasi atau game, dan hanya menampilkan iklan dari layar pemuatan. Jika aplikasi Anda telah selesai dimuat dan telah mengarahkan pengguna ke konten utama aplikasi, jangan tampilkan iklan.
Praktik terbaik
Iklan di layar pembuka aplikasi membantu Anda memonetisasi layar pemuatan aplikasi, saat aplikasi diluncurkan pertama kali dan selama peralihan aplikasi, tetapi penting untuk mengingat praktik terbaik agar pengguna menikmati penggunaan aplikasi Anda. Sebaiknya:
- Tampilkan iklan di layar pembuka aplikasi pertama setelah pengguna menggunakan aplikasi Anda beberapa kali.
- Tampilkan iklan di layar pembuka aplikasi pada waktu pengguna menunggu aplikasi Anda dimuat.
- Jika Anda memiliki layar pemuatan di bawah iklan di layar pembuka aplikasi dan layar pemuatan
selesai dimuat sebelum iklan ditutup, sebaiknya tutup
layar pemuatan dalam pengendali peristiwa
onAdDismissedFullScreenContent
.