Skip to content
This repository has been archived by the owner on Mar 12, 2022. It is now read-only.

Creating an interstitial ad

Bruno D'Luka edited this page Mar 6, 2021 · 7 revisions

Interstitial ads are full-screen ads that cover the interface of their host app. They're typically displayed at natural transition points in the flow of an app, such as between scrrens or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app.

Creating an ad object

To create an interstitial ad, use the class InterstitialAd:

// You can set the unit id on the constructor
InterstitialAd interstitialAd = InterstitialAd(/* unitId: MobileAds.interstitialAdVideoTestUnitId */);

A single InterstitialAd object can be used to request and display multiple interstitial ads, so you only need to construct it once.

Load the ad

In order to show an ad, it needs to be loaded first. You can use load() to load the ad:

interstitialAd.load();

You can load an ad right when you initalize the ad:

InterstitialAd interstitialAd = InterstitialAd()..load(timeout: Duration(minutes: 1));

Show the ad

Interstitial ads should be displayed during natural pauses in the flow of an app. Between levels of a game is a good example, or after the user completes a task. To show an interstitial, use the isLoaded method to verify that it's done loading, then call show(). The interstitial ad from the previous code example could be shown in a button's onPressed like this:

FlatButton(
  child: Text('Open interstitial ad'),
  onPressed: () async {
    // Load only if not loaded
    (!interstitialAd.isAvailable) await interstitialAd.load();
    (interstitialAd.isAvailable) interstitialAd.show();
  },
),

Ad events

To further customize the behavior of your ad, you can hook onto a number of events in the ad's lifecycle: loading, opening, closing, and so on. You can listen for these events using interstitialAd.onEvent.listen((_) {...}):

interstitialAd.onEvent.listen((e) {
  final event = e.keys.first;
  switch (event) {
    case FullScreenAdEvent.loading:
      print('loading');
      break;
    case FullScreenAdEvent.loaded:
      print('loaded');
      break;
    case FullScreenAdEvent.loadFailed:
      final errorCode = e.values.first;
      print('loadFailed $errorCode');
      break;
    case FullScreenAdEvent.showed:
      print('ad showed');
      break;
    case FullScreenAdEvent.closed:
      print('ad closed');
      break;
    case FullScreenAdEvent.failedToShow;
      final errorCode = e.values.first;
      print('ad failed to show $errorCode');
      break;
    default:
      break;
  }
});

Using an AdListener to reload

InterstitialAdEvent.closed is a handy place to load a new interstitial after displaying the previous one:

interstitialAd.onEvent.listen((e) {
  final event = e.keys.first;
  switch (event) {
    case FullScreenAdEvent.closed:
      interstitialAd.load();
      break;
    default:
      break;
  }
});

Do NOT show a new ad in FullScreenAdEvent.closed, because it'll become infinite.

You can find a complete example here

Consider whether interstitial ads are the right type of ad for your app.

Interstitial ads work best in apps with natural transition points. The conclusion of a task within an app, like sharing an image or completing a game level, creates such a point. Because the user is expecting a break in the action, it's easy to present an interstitial ad without disrupting their experience. Make sure you consider at which points in your app's workflow you'll display interstitial ads and how the user is likely to respond.

Remember to pause the action when displaying an interstitial ad.

There are a number of different types of interstitial ads: text, image, video, and more. It's important to make sure that when your app displays an interstitial ad, it also suspends its use of some resources to allow the ad to take advantage of them. For example, when you make the call to display an interstitial ad, be sure to pause any audio output being produced by your app.

Allow for adequate loading time.

Just as it's important to make sure you display interstitial ads at an appropriate time, it's also important to make sure the user doesn't have to wait for them to load. Loading the ad in advance by calling load() before you intend to call show() can ensure that your app has a fully loaded interstitial ad at the ready when the time comes to display one.

Don't flood the user with ads.

While increasing the frequency of interstitial ads in your app might seem like a great way to increase revenue, it can also degrade the user experience and lower clickthrough rates. Make sure that users aren't so frequently interrupted that they're no longer able to enjoy the use of your app.

Clone this wiki locally