App open ads
App open ad is a special advertising format for monetizing your app's splash screens. The ads can be dismissed at any time and are designed to display when users bring your app to the foreground, either at launch or when returning it from the background.
This guide will show how to integrate app open ads into a Flutter app. In addition to code examples and instructions, it contains format-specific recommendations and links to additional resources.
Restriction
App open ads can only be placed in an application with a vertical orientation. For horizontal orientation, the ads will not be selected.
Layout
App open ads include a Go to the app button so users know they're in your app and can close the ad. Here's an example of what an ad looks like:
Prerequisite
- Follow the process in Quick start to integrate the Yandex Mobile Ads Flutter Plugin.
- Make sure you're running the latest Yandex Mobile Ads Flutter Plugin version. If you're using mediation, make sure you're running the latest version of the unified build.
Terms and definitions
- Cold start is starting an app which is not in the RAM, creating a new app session.
- Hot start is switching the app from background mode, when the app is paused in the RAM, to foreground mode.
Implementation
- Create an
AppOpenAdLoader
ad loader and install callback functions for ad loading events. - Set up the ad loading parameters in
AdRequestConfiguration
. - Load the ad with the
AppOpenAdLoader.LoadAd(AdRequestConfiguration)
method. - Use the
didChangeAppLifecycleState
method in theWidgetsBindingObserver
interface to handle app status changes and display app open ads. - Install callback functions for events where users interact with your ad.
- Show the ad by calling the method
AppOpenAd.Show()
. - Release the resources.
Main steps
-
Create an
AppOpenAdLoader
ad loader and register listeners for ad loading events.@override void initState() { super.initState(); MobileAds.initialize(); _appOpenAdLoader = _createAppOpenAdLoader(); } late final Future<AppOpenAdLoader> _appOpenAdLoader; AppOpenAd? _appOpenAd; Future<AppOpenAdLoader> _createAppOpenAdLoader() { return AppOpenAdLoader.create( onAdLoaded: (AppOpenAd appOpenAd) { // The ad was loaded successfully. Now you can handle it. _appOpenAd = appOpenAd; }, onAdFailedToLoad: (error) { // Ad failed for to load with error // Attempting to load a new ad from the OnAdFailedToLoad event is strongly discouraged. }, ); }
-
Set up the ad loading parameters in
AdRequestConfiguration
.final _adUnitId = 'demo-appopenad-yandex'; // Replace with "R-M-XXXXXX-Y" late var _adRequestConfiguration = AdRequestConfiguration(adUnitId: _adUnitId);
AdUnitId
: A unique identifier that is issued in the Partner interface and looks like this: R-M-XXXXXX-Y.Tip
For testing purposes, you can use the demo ad unit ID: "demo-appopenad-yandex". Before publishing your ad, make sure you replace the demo unit ID with a real ad unit ID.
You can expand the ad request parameters using
AdRequestConfiguration
by passing user interests, contextual page data, location details, or other data as additional arguments. Delivering additional contextual data in the request can significantly improve your ad quality. -
Load the ad with the
LoadAd
method, passingAdRequestConfiguration
as an argument.Future<void> _loadAppOpenAd() async { final adLoader = await _appOpenAdLoader; await adLoader.loadAd(adRequestConfiguration: _adRequestConfiguration); }
-
Use the
didChangeAppLifecycleState
method in theWidgetsBindingObserver
interface to handle app status changes and display app open ads.@override void initState() { super.initState(); // ... WidgetsBinding.instance.addObserver(this); } @override void didChangeAppLifecycleState(AppLifecycleState state) { if (state == AppLifecycleState.resumed) { _showAdIfAvailable(); } }
-
Register listeners for events where users interact with your ad.
static var isAdShowing = false; void _setAdEventListener({required AppOpenAd appOpenAd }) { appOpenAd.setAdEventListener( eventListener: AppOpenAdEventListener( onAdShown: () { // Called when an ad is shown. isAdShowing = true; }, onAdFailedToShow: (error) { // Called when an ad failed to show. isAdShowing = false; // Clear resources after an ad is dismissed. _clearAppOpenAd(); // Now you can preload the next ad. _loadAppOpenAd(); }, onAdDismissed: () { // Called when an ad is dismissed. isAdShowing = false; // Clear resources. _clearAppOpenAd(); // Now you can preload the next ad. _loadAppOpenAd(); }, onAdClicked: () { // Called when a click is recorded for an ad. }, onAdImpression: (data) { // Called when an impression is recorded for an ad. } ) ); }
-
Show the ad by calling the method
AppOpenAd.Show()
.Future<void> _showAdIfAvailable() async { var appOpenAd = _appOpenAd; if (appOpenAd != null && !isAdShowing) { _setAdEventListener(appOpenAd: appOpenAd); await appOpenAd.show(); await appOpenAd.waitForDismiss(); } else { _loadAppOpenAd(); } }
-
Clear the links for shown ads if you no longer use them. That releases the resources and prevents memory leaks.
void _clearAppOpenAd() { _appOpenAd?.destroy(); _appOpenAd = null; }
Full code example
class _AppOpenAdPageState extends State<AppOpenAdPage> with WidgetsBindingObserver {
final _adUnitId = 'demo-appopenad-yandex';
late var _adRequestConfiguration = AdRequestConfiguration(adUnitId: _adUnitId);
AppOpenAd? _appOpenAd;
late final Future<AppOpenAdLoader> _appOpenAdLoader = _createAppOpenAdLoader();
static var isAdShowing = false;
static var isColdStartAdShown = false;
Future<AppOpenAdLoader> _createAppOpenAdLoader() {
return AppOpenAdLoader.create(
onAdLoaded: (AppOpenAd appOpenAd) {
// The ad was loaded successfully. Now you can handle it.
_appOpenAd = appOpenAd;
if (!isColdStartAdShown) {
_showAdIfAvailable();
isColdStartAdShown = true;
}
},
onAdFailedToLoad: (error) {
// The ad failed to load
// Attempting to load a new ad from the OnAdFailedToLoad event is strongly discouraged.
},
);
}
@override
void initState() {
super.initState();
MobileAds.initialize();
_appOpenAdLoader = _createAppOpenAdLoader();
_loadAppOpenAd();
WidgetsBinding.instance.addObserver(this);
}
Future<void> _loadAppOpenAd() async {
final adLoader = await _appOpenAdLoader;
await adLoader.loadAd(adRequestConfiguration: _adRequestConfiguration);
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed) {
_showAdIfAvailable();
}
}
void _setAdEventListener({required AppOpenAd appOpenAd }) {
appOpenAd.setAdEventListener(
eventListener: AppOpenAdEventListener(
onAdShown: () {
// Called when an ad is shown.
isAdShowing = true;
},
onAdFailedToShow: (error) {
// Called when an ad failed to show.
// Clear resources after Ad dismissed.
_clearAppOpenAd();
// Now you can preload the next ad.
_loadAppOpenAd();
},
onAdDismissed: () {
// Called when an ad is dismissed.
isAdShowing = false;
// Clear resources.
_clearAppOpenAd();
// Now you can preload the next ad.
_loadAppOpenAd();
},
onAdClicked: () {
// Called when a click is recorded for an ad.
},
onAdImpression: (data) {
// Called when an impression is recorded for an ad.
}
)
);
}
Future<void> _showAdIfAvailable() async {
var appOpenAd = _appOpenAd;
if (appOpenAd != null && !isAdShowing) {
_setAdEventListener(appOpenAd: appOpenAd);
await appOpenAd.show();
await appOpenAd.waitForDismiss();
} else {
loadAppOpenAd();
}
}
void _clearAppOpenAd() {
_appOpenAd?.destroy();
_appOpenAd = null;
}
}
Features of app open ad integration
- Loading can take a while, so don't increase the cold start time if the ad hasn't loaded.
- Pre-load the ad for subsequent display during hot starts.
- We discourage you loading app open ads and other ad formats in parallel during the app launch because the app might be downloading operational data at that time. That could overload the device and the internet connection, making the ad load longer.
- If you received an error in the
onAdFailedToLoad
event, don't try to load a new ad again. If you must do so, limit the number of ad reload attempts. That will help avoid constant unsuccessful requests and connection issues when limitations arise.
Testing ad integration at launch
Using demo ad units for ad testing
We recommend using test ads to test your integration for app open ads and your app itself.
To guarantee that test ads are returned for every ad request, we created a special demo ad placement ID. Use it to check your ad integration.
Demo adUnitId: demo-appopenad-yandex
.
Warning
Before publishing your app in the store, make sure to replace the demo ad placement ID with a real one obtained from the Partner Interface.
You can find the list of available demo ad placement IDs in the Demo ad units for testing section.
Testing ad integration
You can check your integration of app open ads using the SDK's built-in analyzer.
The tool makes sure your app open ads are integrated properly and outputs a detailed report to the log. To view the report, search for the "YandexAds" keyword in the Logcat tool for Android app debugging.
adb logcat -v brief '*:S YandexAds'
If the integration is successful, you'll see this message:
adb logcat -v brief '*:S YandexAds'
mobileads$ adb logcat -v brief '*:S YandexAds'
I/YandexAds(13719): [Integration] Ad type App Open Ad was integrated successfully
If you're having problems integrating ads, you'll get a detailed report on the issues and recommendations for how to fix them.
Using demo ad units for ad testing
We recommend using test ads to test your integration for app open ads and your app itself.
To guarantee that test ads are returned for every ad request, we created a special demo ad placement ID. Use it to check your ad integration.
Demo adUnitId: demo-appopenad-yandex
.
Warning
Before publishing your app in the store, make sure to replace the demo ad placement ID with a real one obtained from the Partner Interface.
You can find the list of available demo ad placement IDs in the Demo ad units for testing section.
Testing ad integration
You can test your ad integration using the native Console tool.
To view detailed logs, call the YMAMobileAds
class's enableLogging
method.
YMAMobileAds.enableLogging()
To view SDK logs, go to the Console tool and set sybsystem = com.yandex.mobile.ads.sdk
. You can also filter logs by category and error level.
If you're having problems integrating ads, you'll get a detailed report on the issues and recommendations for how to fix them.
Recommendations
-
Don't render your app open ad before the splash screen.
By displaying the splash screen, you enhance the user's app experience, making it more seamless and enjoyable. That will keep the user from being surprised or confused, making them sure they opened the right app. On the same screen, you can warn users about the upcoming ad. Use a loading indicator or simply a text message telling the user they will resume viewing app content after the ad.
-
If there's a delay between requesting and rendering the ad, the user might briefly open your app and then unexpectedly see an ad unrelated to the contents. That can negatively impact the user experience, so it is worth avoiding. One solution is to use the splash screen before displaying the main app content and start ad rendering from this screen. If the app opens some content after the splash screen, you're better off not rendering the ad.
-
Wait until new users open the app and use it a few times before rendering an app open ad. Only render the ad to users who have met certain criteria in the app (for example, passed a certain level, opened the app a certain number of times, or are not participating in rewarded offers). Don't render the ad immediately after the app is installed.
-
Regulate ad render frequency based on app user behavior. Don't render the ad at every cold/hot app start.
-
Only render the ad if your app has been in the background for a certain period of time (for example, 30 seconds, two minutes, 15 minutes).
-
Make sure you run thorough tests since each app is unique and requires a special approach to maximize revenue without reducing retention or time spent in the app. User behavior and engagement can change over time, so we recommend periodically testing the strategies you use for your app open ads.
Additional resources
Here you can find the complete examples for integrations: