Annonces à l'ouverture d'une application

Sélectionnez la plate-forme : Android (bêta) Nouveau 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 leur application. Elles 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 :

Prérequis

Avant de continuer, procédez comme suit :

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 :

  • /21775744923/example/app-open

Ils ont été spécialement configurés pour renvoyer des annonces tests pour chaque requête. Vous pouvez les utiliser librement dans vos propres applications lors de la programmation, 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 des annonces à l'ouverture :

  1. Créez une classe utilitaire qui charge une annonce avant que vous n'ayez besoin de l'afficher.
  2. Chargez une annonce.
  3. Inscrivez-vous aux rappels et diffusez l'annonce.
  4. 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 = '/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;
  }
}

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 de devoir les diffuser.

Le chargement d'une annonce s'effectue à l'aide de la méthode loadWithAdManagerAdRequest sur la classe AppOpenAd. La méthode de chargement nécessite un ID de bloc d'annonces, un mode d'orientation, un objet AdManagerAdRequest 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.loadWithAdManagerAdRequest(
      adUnitId: adUnitId,
      adManagerAdRequest: AdManagerAdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
          // Handle the error.
        },
      ),
    );
  }
}

Diffuser 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 à l'ouverture, assurez-vous qu'une autre annonce à l'ouverture ne lui est pas présentée.

Écouter les événements de 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 ajouter 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 pouvoir vérifier le temps écoulé depuis le chargement de votre annonce. Utilisez ensuite ce code temporel 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.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();
  }
}

Démarrages à froid et écrans de chargement

La documentation suppose jusqu'à présent que vous ne diffusez des annonces à l'ouverture 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 en mémoire auparavant.

Par exemple, un démarrage à froid se produit lorsqu'un utilisateur ouvre votre application pour la première fois. Dans ce cas, vous ne disposez pas d'une annonce à l'ouverture précédemment 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 dans laquelle les utilisateurs peuvent utiliser brièvement votre application avant d'être surpris par une annonce hors contexte. Cela est à éviter, car cela nuit à l'expérience utilisateur.

La meilleure façon d'utiliser des annonces à l'ouverture lors des démarrages à froid consiste à utiliser un écran de chargement pour charger les éléments de votre jeu ou de votre application, et à n'afficher l'annonce que depuis cet écran. Si votre application a terminé le chargement et a redirigé l'utilisateur vers le contenu principal, ne diffusez pas l'annonce.

Bonnes pratiques

Les annonces à l'ouverture vous aident à monétiser l'écran de chargement de votre application, lors du premier lancement et lorsque l'utilisateur passe d'une application à une autre. 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 procéder comme suit :

  • Diffuser votre première annonce à l'ouverture après que vos utilisateurs ont utilisé votre application plusieurs fois.
  • Diffuser des annonces à l'ouverture 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.