Annonces à l'ouverture d'une application

Sélectionnez une plate-forme : Android iOS Unity Flutter

Les annonces à l'ouverture sont un format d'annonce spécial destiné aux éditeurs qui souhaitent monétiser les écrans de chargement de leurs applications. Les annonces à l'ouverture d'une application peuvent être fermées à tout moment. Elles sont conçues pour s'afficher lorsque vos utilisateurs mettent votre application au premier plan.

Les annonces à l'ouverture affichent automatiquement une petite zone de branding pour faire savoir aux utilisateurs qu'ils se trouvent dans votre application. Voici un exemple d'annonce à l'ouverture :

Prérequis

  • Plug-in Flutter 0.13.6 ou version ultérieure.
  • Suivez les instructions de la section Commencer. Votre application Flutter doit déjà avoir importé le plug-in Flutter Google Mobile Ads.

Toujours effectuer des tests avec des annonces tests

Lorsque vous créez et testez vos applications, assurez-vous d'utiliser des annonces tests plutôt que des annonces de production. À défaut, votre compte risque d'être suspendu.

Le moyen le plus simple de charger des annonces tests consiste à utiliser nos ID de blocs d'annonces tests dédiés pour les annonces avec récompense Android et iOS :

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

Ils ont été spécialement configurés pour renvoyer des annonces tests à chaque requête. Vous pouvez les utiliser librement dans vos propres applications lors du codage, des tests et du débogage. Veillez simplement à les remplacer par votre propre ID de bloc d'annonces avant de publier votre application.

Implémentation

Voici les principales étapes à suivre pour intégrer les annonces à l'ouverture de l'application :

  1. Créez une classe utilitaire qui charge une annonce avant que vous n'ayez besoin de l'afficher.
  2. Chargez une annonce.
  3. Enregistrez-vous pour les rappels et affichez l'annonce.
  4. Abonnez-vous à AppStateEventNotifier.appStateStream pour afficher l'annonce lors des événements de mise au premier plan.

Créer une classe utilitaire

Créez une classe appelée AppOpenAdManager pour charger l'annonce. Cette classe gère une variable d'instance pour suivre une annonce chargée et l'ID du bloc d'annonces pour chaque plate-forme.

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;
  }
}

Charger une annonce

Votre annonce à l'ouverture doit être prête avant que les utilisateurs n'accèdent à votre application. Implémentez une classe utilitaire pour effectuer des demandes d'annonces avant le moment où vous devez les diffuser.

Pour charger une annonce, la méthode load doit être utilisée sur la classe AppOpenAd. La méthode de chargement nécessite un ID de bloc d'annonces, un mode d'orientation, un objet AdRequest et un gestionnaire d'achèvement appelé lorsque le chargement de l'annonce réussit ou échoue. L'objet AppOpenAd chargé est fourni en tant que paramètre dans le gestionnaire d'achèvement. L'exemple suivant montre comment charger un 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.
        },
      ),
    );
  }
}

Afficher l'annonce et gérer les rappels en plein écran

Avant de diffuser l'annonce, enregistrez un FullScreenContentCallback pour chaque événement d'annonce que vous souhaitez écouter.

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();
      },
    );
  }
}

Si un utilisateur revient à votre application après l'avoir quittée en cliquant sur une annonce d'ouverture d'application, assurez-vous qu'une autre annonce d'ouverture d'application ne lui est pas présentée.

Écouter les événements de mise au premier plan de l'application

Pour être informé des événements de premier plan de l'application, vous devez vous abonner à AppStateEventNotifier.appStateStream et écouter les événements 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();
    }
  }
}

Vous pouvez maintenant initialiser votre AppLifecycleReactor et commencer à écouter les modifications du cycle de vie de l'application. Par exemple, depuis votre page d'accueil :

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);
  }

Prendre en compte l'expiration des annonces

Pour vous assurer de ne pas diffuser une annonce arrivée à expiration, ajoutez un code temporel à l'AppOpenAdManager pour vérifier le temps écoulé depuis le chargement de votre annonce. Utilisez ensuite cet horodatage pour vérifier si l'annonce est toujours valide.

/// 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();
  }
}

Démarrages à froid et écrans de chargement

Jusqu'à présent, la documentation suppose que vous n'affichez des annonces à l'ouverture d'une application que lorsque les utilisateurs mettent votre application au premier plan alors qu'elle est suspendue en mémoire. Les "démarrages à froid" se produisent lorsque votre application est lancée, mais n'a pas été suspendue précédemment en mémoire.

Un démarrage à froid se produit, par exemple, lorsqu'un utilisateur ouvre votre application pour la première fois. Avec les démarrages à froid, vous n'aurez pas d'annonce interstitielle déjà chargée et prête à être diffusée immédiatement. Le délai entre le moment où vous demandez une annonce et celui où vous la recevez peut créer une situation où les utilisateurs peuvent utiliser brièvement votre application avant d'être surpris par une annonce hors contexte. Cette pratique est à éviter, car elle nuit à l'expérience utilisateur.

La méthode recommandée pour utiliser les annonces à l'ouverture d'une application lors d'un démarrage à froid consiste à utiliser un écran de chargement pour charger les éléments de votre jeu ou de votre application, et à n'afficher l'annonce qu'à partir de l'écran de chargement. Si votre application a fini de se charger et a redirigé l'utilisateur vers le contenu principal de votre application, n'affichez pas l'annonce.

Bonnes pratiques

Les annonces à l'ouverture d'une application vous aident à monétiser l'écran de chargement de votre application, lorsque l'application est lancée pour la première fois et lors des changements d'application. Toutefois, il est important de garder à l'esprit les bonnes pratiques pour que vos utilisateurs apprécient votre application. Il est préférable de :

  • Attendez que les utilisateurs aient ouvert votre application quelques fois avant de diffuser votre première annonce à l'ouverture.
  • Affichez des annonces à l'ouverture de votre application lorsque vos utilisateurs doivent attendre que votre application se charge.
  • Si votre écran de chargement se trouve sous l'annonce à l'ouverture d'une application et qu'il finit de charger avant la fermeture de l'annonce, vous pouvez le fermer dans le gestionnaire d'événements onAdDismissedFullScreenContent.

Exemple complet sur GitHub

Annonce à l'ouverture