Quảng cáo khi mở ứng dụng là một định dạng quảng cáo đặc biệt dành cho những nhà xuất bản muốn kiếm tiền từ màn hình tải ứng dụng của họ. Quảng cáo khi mở ứng dụng được thiết kế để xuất hiện khi người dùng chạy ứng dụng của bạn trên nền trước và họ có thể đóng quảng cáo này bất cứ lúc nào.
Quảng cáo khi mở ứng dụng tự động hiển thị một vùng nhỏ chứa thông tin thương hiệu để người dùng biết họ đang mở ứng dụng của bạn. Dưới đây là một ví dụ về cách hiển thị của quảng cáo khi mở ứng dụng:
Điều kiện tiên quyết
- Trình bổ trợ Flutter phiên bản 0.13.6 trở lên.
- Hoàn tất phần Bắt đầu sử dụng. Ứng dụng Flutter của bạn phải nhập sẵn trình bổ trợ Flutter dành cho Quảng cáo trên thiết bị di động của Google.
Luôn thử nghiệm bằng quảng cáo thử nghiệm
Khi tạo và thử nghiệm ứng dụng, hãy nhớ sử dụng quảng cáo thử nghiệm thay vì quảng cáo đang chạy trong thực tế. Nếu không làm như vậy, tài khoản của bạn có thể bị tạm ngưng.
Cách dễ nhất để tải quảng cáo thử nghiệm là sử dụng mã đơn vị quảng cáo thử nghiệm dành riêng cho quảng cáo có tặng thưởng trên Android và iOS:
/21775744923/example/app-open
Các mã này được định cấu hình đặc biệt để trả về quảng cáo thử nghiệm cho mọi yêu cầu và bạn có thể sử dụng các mã này trong ứng dụng của mình khi lập trình, chạy thử nghiệm và gỡ lỗi. Bạn chỉ cần nhớ thay thế mã này bằng mã đơn vị quảng cáo của mình trước khi xuất bản ứng dụng.
Triển khai
Các bước chính để tích hợp quảng cáo khi mở ứng dụng là:
- Tạo một lớp tiện ích sẽ tải quảng cáo trước khi bạn cần hiển thị quảng cáo đó.
- Tải một quảng cáo.
- Đăng ký các lệnh gọi lại và hiển thị quảng cáo.
- Đăng ký
AppStateEventNotifier.appStateStreamđể hiển thị quảng cáo trong các sự kiện đưa lên nền trước.
Tạo một lớp tiện ích
Tạo một lớp mới có tên là AppOpenAdManager để tải quảng cáo. Lớp này sẽ quản lý một biến thực thể để theo dõi một quảng cáo đã tải và mã đơn vị quảng cáo cho từng nền tảng.
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;
}
}
Tải quảng cáo
Bạn phải chuẩn bị sẵn quảng cáo khi mở ứng dụng trước khi người dùng mở ứng dụng của bạn. Hãy triển khai một lớp tiện ích để thực hiện các yêu cầu quảng cáo trước khi bạn cần hiển thị quảng cáo.
Bạn có thể tải một quảng cáo bằng cách sử dụng phương thức loadWithAdManagerAdRequest trên lớp AppOpenAd. Phương thức tải này yêu cầu một mã đơn vị quảng cáo, một chế độ hướng, một đối tượng AdManagerAdRequest và một trình xử lý hoàn thành để gọi khi tải quảng cáo thành công hoặc không thành công. Đối tượng AppOpenAd đã tải được cung cấp dưới dạng một thông số trong trình xử lý hoàn thành. Ví dụ sau đây cho thấy cách tải một 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.
},
),
);
}
}
Hiển thị quảng cáo và xử lý các lệnh gọi lại toàn màn hình
Trước khi hiển thị quảng cáo, hãy đăng ký FullScreenContentCallback cho mỗi sự kiện quảng cáo mà bạn muốn theo dõi.
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();
},
);
}
}
Nếu người dùng quay lại ứng dụng của bạn sau khi rời khỏi bằng cách nhấp vào một quảng cáo khi mở ứng dụng, thì hãy đảm bảo rằng ứng dụng đó không hiển thị một quảng cáo khi mở ứng dụng khác cho người dùng.
Theo dõi các sự kiện đưa ứng dụng lên nền trước
Để được thông báo về các sự kiện đưa ứng dụng lên nền trước, bạn cần đăng ký AppStateEventNotifier.appStateStream và theo dõi các sự kiện 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();
}
}
}
Bây giờ, bạn có thể thêm AppLifecycleReactor và bắt đầu theo dõi các thay đổi trong vòng đời của ứng dụng. Ví dụ: trên trang chủ của bạn:
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);
}
Xem xét thời hạn của quảng cáo
Để đảm bảo bạn không hiển thị một quảng cáo đã hết hạn, hãy thêm một dấu thời gian vào AppOpenAdManager để kiểm tra thời lượng kể từ khi quảng cáo của bạn được tải.
Sau đó, hãy sử dụng dấu thời gian đó để kiểm tra xem quảng cáo có còn hợp lệ hay không.
/// 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();
}
}
Khởi động nguội và màn hình tải
Từ đầu đến giờ, tài liệu này giả định rằng bạn chỉ hiển thị quảng cáo khi mở ứng dụng vào lúc người dùng đưa ứng dụng của bạn lên nền trước khi ứng dụng bị tạm ngưng trong bộ nhớ. Quy trình "Khởi động nguội" xảy ra khi người dùng chạy ứng dụng của bạn nhưng trước đó, ứng dụng không bị tạm ngưng trong bộ nhớ.
Một ví dụ về khởi động nguội là khi người dùng mở ứng dụng của bạn lần đầu tiên. Trong trường hợp khởi động nguội, quảng cáo khi mở ứng dụng chưa được tải trước lần nào nên chưa sẵn sàng để hiển thị ngay lập tức. Một tình huống có thể xảy ra trong khoảng thời gian từ khi bạn yêu cầu quảng cáo cho đến khi nhận được quảng cáo (gọi là độ trễ), đó là người dùng vừa mới sử dụng ứng dụng của bạn trong chốc lát thì một quảng cáo không phù hợp đột ngột xuất hiện khiến họ bị bất ngờ. Bạn nên tránh làm như vậy vì điều này sẽ tạo ra trải nghiệm kém cho người dùng.
Để sử dụng quảng cáo khi mở ứng dụng vào lúc khởi động nguội, cách tốt nhất là bạn nên dùng màn hình tải để tải các thành phần trò chơi hoặc ứng dụng và chỉ nên hiển thị quảng cáo trên màn hình tải. Nếu ứng dụng đã tải xong và đã đưa người dùng đến nội dung chính của ứng dụng, thì bạn đừng hiển thị quảng cáo.
Các phương pháp hay nhất
Quảng cáo khi mở ứng dụng giúp bạn kiếm tiền từ màn hình tải của ứng dụng, khi ứng dụng chạy lần đầu và khi chuyển đổi ứng dụng. Tuy nhiên, bạn cần ghi nhớ các phương pháp hay nhất để làm cho người dùng thích sử dụng ứng dụng của bạn. Tốt nhất là bạn nên:
- Hiển thị quảng cáo khi mở ứng dụng đầu tiên sau khi người dùng đã sử dụng ứng dụng của bạn vài lần.
- Hiển thị quảng cáo khi mở ứng dụng trong thời gian người dùng chờ ứng dụng của bạn tải.
- Nếu bạn có màn hình tải trong quảng cáo khi mở ứng dụng và màn hình tải đó đã tải xong trước khi quảng cáo bị đóng, thì bạn có thể đóng màn hình tải trong trình xử lý sự kiện
onAdDismissedFullScreenContent.