Cette page a été traduite par l'API Cloud Translation.

Annonces à l'ouverture d'une application

Les annonces à l'ouverture d'une application sont un format publicitaire spécial destiné aux éditeurs qui souhaitent monétiser leurs écrans de chargement d'application. Les annonces à l'ouverture d'une application peuvent être fermées à tout moment et 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 d'une application:

Prérequis

Plug-in Flutter 0.13.6 ou version ultérieure
Suivez les instructions de la section Commencer. Le plug-in Flutter Google Mobile Ads doit déjà être importé dans votre application Flutter.

Effectuez toujours 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 bloc 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 de test pour chaque requête. Vous pouvez les utiliser 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:

Créez une classe utilitaire qui charge une annonce avant de devoir l'afficher.
Chargez une annonce.
Enregistrez les rappels et affichez l'annonce.
Abonnez-vous à AppStateEventNotifier.appStateStream pour afficher l'annonce lors des événements de 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 de l'application doit être prête avant que les utilisateurs n'y accèdent. Implémentez une classe utilitaire pour effectuer des demandes d'annonces avant de devoir diffuser l'annonce.

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 dans votre application après l'avoir quittée en cliquant sur une annonce d'ouverture d'application, assurez-vous qu'aucune autre annonce d'ouverture d'application ne s'affiche.

Écouter les événements de mise en avant d'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 ajouter l'initialisation de 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 à AppOpenAdManager afin de 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

La documentation jusqu'à présent suppose que vous ne diffusez des annonces à l'ouverture d'une application que lorsque les utilisateurs mettent votre application au premier plan lorsqu'elle est suspendue en mémoire. Les "démarrages à froid" se produisent lorsque votre application est lancée, mais qu'elle n'était pas suspendue en mémoire auparavant.

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 d'ouverture d'application précédemment chargée 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 doit être évitée, car elle constitue une mauvaise expérience utilisateur.

La meilleure façon d'utiliser des annonces à l'ouverture d'une application lors des démarrages à froid consiste à utiliser un écran de chargement pour charger les composants de votre jeu ou de votre application, et à n'afficher l'annonce que depuis l'écran de chargement. Si le chargement de votre application est terminé et qu'elle a redirigé l'utilisateur vers le contenu principal, 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, lors du premier lancement de l'application et lors des changements d'application. Toutefois, il est important de garder à l'esprit les bonnes pratiques pour que vos utilisateurs apprécient d'utiliser votre application. Nous vous recommandons de:

Attendez que les utilisateurs aient ouvert votre application quelques fois avant de diffuser votre première annonce à l'ouverture.
Diffuser des annonces à l'ouverture de votre application lorsque vos utilisateurs attendent 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