Anuncios de carga de aplicación

Los anuncios de carga de aplicación tienen un formato especial pensado para editores que quieran monetizar las pantallas de carga de sus aplicaciones. Estos anuncios se pueden cerrar en cualquier momento y están diseñados para mostrarse cuando los usuarios ponen tu aplicación en primer plano.

Los anuncios de carga de aplicación muestran automáticamente una pequeña zona de branding para que los usuarios sepan que se encuentran en tu aplicación. Aquí tienes un ejemplo de anuncio de carga de aplicación:

Requisitos previos

  • Tener el complemento para Flutter (versión 0.13.5 o una posterior).
  • Hacer todo lo que se indica en la guía Primeros pasos. Tu aplicación de Flutter ya debería tener importado el complemento de Flutter para anuncios de Google para móviles.

Comprobar siempre las aplicaciones con anuncios de prueba

Cuando crees y pruebes tus aplicaciones, utiliza siempre anuncios de prueba en lugar de anuncios reales que se estén publicando. De lo contrario, podríamos suspender tu cuenta.

La forma más sencilla de cargar anuncios de prueba es utilizar los IDs exclusivos de los bloques de anuncios de prueba para los anuncios bonificados de Android y iOS:

Android

ca-app-pub-3940256099942544/3419835294

iOS

ca-app-pub-3940256099942544/5662855259

Se han configurado especialmente para devolver anuncios de prueba para cada solicitud, y puedes usarlos en tus propias aplicaciones mientras las programas, haces pruebas y depuras los posibles errores. Solo tienes que sustituirlos por el ID de tu bloque de anuncios antes de publicar la aplicación.

Implementación

Los principales pasos para integrar anuncios de carga de aplicación son los siguientes:

  1. Crear una clase de utilidad que cargue los anuncios antes de que deban aparecer.
  2. Cargar anuncios.
  3. Registrar el delegado para recibir retrollamadas y mostrar anuncios.
  4. Esperar a que WidgetsBindingObserver.didChangeAppLifecycleState muestre anuncios durante eventos en primer plano.

Crear una clase de utilidad

Crea una clase llamada AppOpenAdManager para cargar anuncios. Esta clase gestiona una variable de instancia para monitorizar un anuncio cargado y el ID del bloque de anuncios de cada plataforma.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'dart:io' show Platform;

class AppOpenAdManager {

  String adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/3419835294'
    : 'ca-app-pub-3940256099942544/5662855259';

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

Cargar anuncios

Tus anuncios de carga de aplicación deben estar listos antes de que los usuarios accedan a la aplicación. Implementa una clase de utilidad para hacer solicitudes de anuncios antes de que necesites mostrarlos.

Para cargar anuncios, utiliza el método loadAd() en la clase AppOpenAd. El método de carga requiere un ID de bloque de anuncios, un modo de orientación, un objeto AdRequest y un controlador de finalización al que se llama cuando la carga de anuncios se realiza correctamente o da error. El objeto AppOpenAd cargado se proporciona como parámetro en el controlador de finalización. En el siguiente ejemplo se muestra cómo cargar un objeto AppOpenAd.

public class AppOpenAdManager {
  ...

  /// Load an [AppOpenAd].
  void loadAd() {
    AppOpenAd.load(
      adUnitId: adUnitId,
      orientation: AppOpenAd.orientationPortrait,
      request: AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
          // Handle the error.
        },
      ),
    );
  }
}

Mostrar anuncios y gestionar retrollamadas a pantalla completa

Antes de mostrar anuncios, registra un FullScreenContentCallback por cada evento de anuncio que quieras procesar.

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 usuario vuelve a tu aplicación después de haber salido tras hacer clic en un anuncio de carga de aplicación, asegúrate de que no se le muestre ningún otro anuncio de este tipo.

Procesar eventos de aplicación en primer plano

Para recibir notificaciones de eventos de aplicación en primer plano, debes implementar WidgetsBindingObserver y procesar eventos resumed en WidgetsBindingObserver.didChangeAppLifecycleState().

import 'package:app_open_example/app_open_ad_manager.dart';
import 'package:flutter/material.dart';

class AppLifecycleReactor extends WidgetsBindingObserver {
  final AppOpenAdManager appOpenAdManager;

  AppLifecycleReactor({required this.appOpenAdManager});

  @override
  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
    // Try to show an app open ad if the app is being resumed and
    // we're not already showing an app open ad.
    if (state == AppLifecycleState.resumed) {
      appOpenAdManager.showAdIfAvailable();
    }
  }
}

Ahora puedes añadir tu AppLifecycleReactor de observador. Por ejemplo, desde tu página principal:

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;

  @override
  void initState() {
    super.initState();
    
    AppOpenAdManager appOpenAdManager = AppOpenAdManager()..loadAd();
    WidgetsBinding.instance!
        .addObserver(AppLifecycleReactor(appOpenAdManager: appOpenAdManager));
    
  }

Tener en cuenta la caducidad de los anuncios

Para asegurarte de que no se muestran anuncios caducados, añade una marca de tiempo a AppOpenAdManager para comprobar cuánto tiempo ha pasado desde que se han cargado los anuncios. A continuación, utiliza esa marca de tiempo para verificar si los anuncios siguen siendo válidos.

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

Arranques en frío y pantallas de carga

Hasta ahora, nos hemos centrado en los casos en los que solo muestras anuncios de carga de aplicación cuando los usuarios tienen tu aplicación suspendida en la memoria del dispositivo (abierta en segundo plano) y la ponen en primer plano. Sin embargo, el arranque en frío tiene lugar cuando tu aplicación se lanza sin que se encuentre en segundo plano porque se haya abierto previamente.

Un ejemplo de este tipo de arranque se da cuando un usuario abre tu aplicación por primera vez. En el caso de los arranques en frío, no tienes ningún anuncio de carga de aplicación previamente cargado que esté listo para mostrarse. Desde que se solicita el anuncio hasta que se recibe, se produce un retraso de unos instantes. Es posible que, durante ese breve periodo, los usuarios puedan usar tu aplicación antes de que les sorprenda un anuncio fuera de contexto. Este comportamiento debe evitarse porque ofrece una mala experiencia a los usuarios.

La mejor forma de utilizar anuncios de carga de aplicación en arranques en frío es usar una pantalla para cargar los recursos de la aplicación o del juego y mostrar anuncios solo en esa pantalla. Si tu aplicación ha terminado de cargarse y se ha dirigido al usuario al contenido principal, no muestres ningún anuncio.

Prácticas recomendadas

Los anuncios de carga de aplicación te ayudan a obtener ingresos con las pantallas de carga de tu aplicación, cuando la aplicación se lanza por primera vez y durante los cambios de aplicación. No obstante, es importante que tengas presentes las prácticas recomendadas para ofrecer la mejor experiencia posible. En este sentido, recuerda lo siguiente:

  • Muestra tu primer anuncio de carga de aplicación una vez que los usuarios hayan utilizado la aplicación varias veces.
  • Muestra anuncios de carga de aplicación en aquellos momentos en los que, si no lo hicieras, los usuarios tendrían que esperar a que la aplicación se cargara.
  • Si tienes una pantalla de carga debajo del anuncio de carga de la aplicación y la pantalla termina de cargarse antes de que se cierre el anuncio, te recomendamos que la cierres con el gestor de eventos onAdDismissedFullScreenContent.