Anuncios para inicio de aplicación

Selecciona la plataforma: Android iOS Unity Flutter

Los anuncios para inicio de aplicación son un formato de anuncio especial diseñado para los publicadores que desean monetizar las pantallas de carga de sus apps. Estos anuncios se pueden cerrar en cualquier momento y se muestran cuando los usuarios ponen tu app en primer plano.

Los anuncios para inicio de aplicación muestran automáticamente un elemento de tu marca para que los usuarios sepan que se encuentran en tu app. El siguiente ejemplo ilustra la apariencia de un anuncio para inicio de aplicación:

Requisitos previos

• Complemento de Flutter 0.13.6 o posterior
• Completa la introducción. Tu app de Flutter ya debería tener importado el complemento de anuncios para dispositivos móviles de Google para Flutter

Haz siempre una comprobación con anuncios de prueba

Al compilar y verificar tus apps, asegúrate de usar anuncios de prueba en vez de anuncios activos en fase de producción. De lo contrario, tu cuenta podría suspenderse.

La forma más sencilla de cargar anuncios de prueba es utilizar nuestros IDs de unidades de anuncios de prueba específicos para anuncios recompensados de iOS y Android:

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

Están configurados especialmente para devolver anuncios de prueba en cada solicitud, y puedes usarlos en tus propias apps mientras realizas tus tareas de programación, prueba y depuración. Solo asegúrate de reemplazarlo por tu propio ID de unidad de anuncios antes de publicar tu app.

Implementación

Estos son los pasos principales para integrar los anuncios para inicio de aplicación:

1. Crea una clase de utilidad que cargue un anuncio antes de que necesites mostrarlo.
2. Carga un anuncio.
3. Regístrate para recibir devoluciones de llamada y mostrar el anuncio.
4. Suscríbete a AppStateEventNotifier.appStateStream para mostrar el anuncio durante los eventos en primer plano.

Crea una clase de utilidad

Crea una clase nueva llamada AppOpenAdManager para cargar el anuncio. Esta clase administra una variable de instancia para hacer un seguimiento de un anuncio cargado y el ID de unidad 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/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;
  }
}

Carga un anuncio

Tu anuncio para inicio de aplicación debe estar listo antes de que los usuarios ingresen a tu app. Implementa una clase de utilidad para realizar solicitudes de anuncios antes de que necesites mostrar el anuncio.

Para cargar un anuncio, debes utilizar el método load en la clase AppOpenAd. El método de carga requiere un ID de unidad 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 falla o se realiza correctamente. El objeto AppOpenAd cargado se incluye 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,
      adRequest: AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          _appOpenAd = ad;
        },
        onAdFailedToLoad: (error) {
          print('AppOpenAd failed to load: $error');
          // Handle the error.
        },
      ),
    );
  }
}

Muestra el anuncio y administra las devoluciones de llamada de pantalla completa

Antes de mostrar el anuncio, registra un FullScreenContentCallback para cada evento de anuncio que quieras escuchar.

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 regresa a tu app después de haberla abandonado al hacer clic en un anuncio para inicio de aplicación, asegúrate de que no se le muestre otro anuncio de este tipo.

Escucha los eventos de app en primer plano

Para recibir notificaciones sobre los eventos de app en primer plano, debes suscribirte a AppStateEventNotifier.appStateStream y escuchar los eventos de 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();
    }
  }
}

Ahora puedes inicializar tu AppLifecycleReactor y comenzar a escuchar los cambios del ciclo de vida de la app. 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;
  late AppLifecycleReactor _appLifecycleReactor;

  @override
  void initState() {
    super.initState();
    
    AppOpenAdManager appOpenAdManager = AppOpenAdManager()..loadAd();
    _appLifecycleReactor = AppLifecycleReactor(
      appOpenAdManager: appOpenAdManager);
  }

Ten en cuenta el vencimiento de los anuncios

Punto clave: Después de cuatro horas, se agotará el tiempo de espera de las referencias de anuncios en la versión beta abierta de la app. Los anuncios renderizados más de cuatro horas después de la hora de la solicitud dejarán de ser válidos y posiblemente no generen ingresos. Este límite de tiempo se está considerando cuidadosamente y podría cambiar en futuras versiones beta del formato de anuncio para inicio de aplicación.

Para asegurarte de no mostrar un anuncio vencido, agrega una marca de tiempo al objeto AppOpenAdManager, lo que te permitirá verificar cuánto tiempo transcurrió desde que se cargó tu anuncio. Luego utiliza esa marca de tiempo para comprobar si el anuncio aún es válido.

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

Inicios en frío y pantallas de carga

Hasta ahora, en la documentación, se da por hecho que solo muestras anuncios para inicio de aplicación cuando los usuarios ponen tu app en primer plano después de haber estado suspendida en la memoria. Los "inicios en frío" se producen cuando se inicia tu app, pero sin haber estado suspendida en la memoria previamente.

Un ejemplo de inicio en frío es cuando un usuario abre tu app por primera vez. Con los inicios en frío, no tendrás un anuncio para inicio de aplicación cargado previamente que esté listo para mostrarse de inmediato. La demora entre el momento en que solicitas un anuncio y el momento en que lo recibes puede generar una situación en la que los usuarios utilizan tu app brevemente y son sorprendidos con un anuncio fuera de contexto. Deberías evitar esto, ya que da lugar a una mala experiencia del usuario.

En lo que respecta a un anuncio para inicio de aplicación, la manera preferida de aprovecharlo en los inicios en frío es utilizar una pantalla de carga de los recursos de tu juego o app, y mostrar el anuncio únicamente desde esa pantalla de carga. Si tu app terminó de cargarse y envió al usuario al contenido principal, no muestres el anuncio.

Punto clave: Siempre carga los recursos de aplicación en un subproceso en segundo plano si quieres que se sigan cargando mientras se muestra un anuncio para inicio de aplicación.

Prácticas recomendadas

Los anuncios para inicio de aplicación te ayudan a monetizar la pantalla de carga de tu app cuando se inicia por primera vez y durante los cambios de app, pero es importante tener en cuenta las prácticas recomendadas para que los usuarios puedan disfrutar de tu app. Lo mejor es que hagas lo siguiente:

• Muestra tu primer anuncio para inicio de aplicación después de que los usuarios hayan utilizado tu aplicación varias veces.
• Muestra anuncios para inicio de aplicación en los momentos en que los usuarios estén esperando a que se cargue tu app.
• Si tienes una pantalla de carga debajo del anuncio para inicio de aplicación y esta termina de cargarse antes de que se descarte el anuncio, te recomendamos que la descartes en el controlador de eventos onAdDismissedFullScreenContent.

Ejemplo completo en GitHub

Anuncio para inicio de aplicación