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 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 lakukan pengujian dengan iklan percobaan
Saat membuat 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:
Android
ca-app-pub-3940256099942544/9257395921
iOS
ca-app-pub-3940256099942544/5575463023
ID tersebut telah dikonfigurasi secara khusus untuk menampilkan iklan pengujian untuk setiap permintaan, dan Anda bebas menggunakannya di aplikasi Anda sendiri saat membuat kode, menguji, dan men-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 = Platform.isAndroid
? 'ca-app-pub-3940256099942544/9257395921'
: 'ca-app-pub-3940256099942544/5575463023';
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 load
pada class AppOpenAd
. Metode pemuatan memerlukan ID unit iklan, mode
orientasi, objek AdRequest
, 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.load(
adUnitId: adUnitId,
adRequest: AdRequest(),
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 aplikasi yang ditampilkan di 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 waktu berakhir 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.load(
adUnitId: adUnitId,
orientation: AppOpenAd.orientationPortrait,
adRequest: AdRequest(),
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
Dokumentasi sejauh ini mengasumsikan bahwa Anda hanya menampilkan iklan di layar pembuka aplikasi saat pengguna memunculkan aplikasi Anda di latar depan saat aplikasi ditangguhkan dalam memori. "Start cold" terjadi saat aplikasi Anda diluncurkan, tetapi sebelumnya tidak ditangguhkan dalam memori.
Contoh start dingin adalah saat pengguna membuka aplikasi Anda untuk pertama kalinya. Dengan start dingin, Anda tidak akan memiliki iklan buka aplikasi yang dimuat sebelumnya yang siap ditampilkan dengan segera. Penundaan antara saat Anda meminta iklan dan menerima iklan kembali dapat menciptakan situasi di mana pengguna dapat menggunakan aplikasi Anda secara singkat sebelum terkejut dengan iklan di luar konteks. Hal ini harus dihindari karena merupakan pengalaman pengguna yang buruk.
Cara terbaik untuk menggunakan iklan di layar pembuka aplikasi pada cold start adalah dengan menggunakan layar pemuatan untuk memuat aset game atau aplikasi Anda, dan hanya menampilkan iklan dari layar pemuatan. Jika aplikasi Anda telah selesai dimuat dan telah mengarahkan pengguna ke konten utama aplikasi Anda, 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 selama waktu saat pengguna Anda biasanya menunggu aplikasi Anda dimuat.
- Jika Anda memiliki layar pemuatan di belakang iklan di layar pembuka aplikasi dan layar pemuatan selesai dimuat sebelum iklan ditutup, sebaiknya hapus layar pemuatan dalam pengendali peristiwa
onAdDismissedFullScreenContent
.