Agrega un anuncio de aplicación abierta de AdMob a una app para Unity

1. Introducción

En este codelab, implementarás un anuncio de aplicación abierta de AdMob en una app para Unity.

Qué compilarás

Este codelab te guiará para que puedas implementar un anuncio de aplicación abierta de AdMob en una app para Unity con el complemento Google Mobile Ads para Unity,

Si al realizar este codelab encuentras algún problema (errores de código, errores gramaticales, frases poco claras, etc.), notifícalo mediante el vínculo Informar un error, que se encuentra en la esquina inferior izquierda del codelab.

Qué aprenderás

• Cómo configurar el complemento Google Mobile Ads para Unity
• Cómo implementar un anuncio de aplicación abierta en una app para Unity

Qué necesitarás

• Unity 2018.4 o posterior
• Xcode 12 o posterior, así como CocoaPods (para implementar en iOS)

¿Cómo calificarías tu nivel de experiencia con AdMob?

Principiante Intermedio Avanzado

2. Configura el entorno de desarrollo

Descarga el código

Descargar el código fuente Ver el repositorio en GitHub

Después de descargar el archivo ZIP, extrae su contenido. Incluirá una carpeta llamada admob-appopen-unity-main.

Como alternativa, puedes clonar el repositorio de GitHub con esta línea de comandos:

$ git clone https://github.com/googlecodelabs/admob-appopen-unity

El repositorio incluye dos carpetas:

• starter: Código inicial que compilarás en este codelab
• complete: Código completo para este codelab

3. Configura la app y las unidades de anuncios de AdMob

Dado que Unity es un SDK multiplataforma, tendrás que agregar una app y unidades de anuncios para Android y para iOS en AdMob.

Nota: Si deseas seguir el codelab en lugar de crear una aplicación y unidades de anuncios nuevas por tu cuenta, ve a la sección Utiliza la app y las unidades de anuncios de AdMob de prueba.

Configuración para Android

En la configuración para Android, tienes que agregar una app para Android y crear unidades de anuncios.

Agrega una app para Android

1. En la consola de AdMob, haz clic en AGREGAR APLICACIÓN, en el menú Aplicaciones.
2. Selecciona Android como la plataforma. Cuando veas la pregunta ¿Figura la aplicación en una tienda de aplicaciones disponible?, haz clic en NO.
3. Ingresa AdMob app open ad en el campo de nombre de la app.
4. No es necesario habilitar las métricas del usuario para completar este codelab. Sin embargo, te recomendamos que lo hagas, ya que te permitirá comprender mejor el comportamiento de los usuarios. Haz clic en AGREGAR para completar el proceso.

Crea una unidad de anuncios

1. Selecciona la app AdMob app open ad (Android) en el menú Aplicaciones de la consola de AdMob.
2. Haz clic en el menú Unidades de anuncios.

Haz clic en AGREGAR UNIDAD DE ANUNCIOS. Selecciona Aplicación abierta como el formato. Ingresa android-appopen en el campo Nombre de la unidad de anuncios. Haz clic en CREAR UNA UNIDAD DE ANUNCIOS para completar el proceso.

Importante: Cuando compiles y pruebes tus apps, asegúrate de utilizar anuncios de prueba en vez de anuncios activos en fase de producción. De lo contrario, tu cuenta podría suspenderse. Consulta el artículo Cómo habilitar anuncios de prueba para obtener más información sobre cómo funcionan esos anuncios del SDK de anuncios para dispositivos móviles.

Las unidades de anuncios nuevas suelen demorar algunas horas hasta que empiezan a publicar anuncios.

Si deseas probar el comportamiento de los anuncios de inmediato, utiliza los IDs de app y de unidad de anuncios de prueba que se indican en las tablas de ID de app/ID unidad de anuncios para Android y de ID de app/ID de unidad de anuncios para iOS.

Configuración para iOS

En la configuración para iOS, tienes que agregar una app para iOS y crear unidades de anuncios.

Agrega una app para iOS

1. En la consola de AdMob, haz clic en AGREGAR APLICACIÓN, en el menú Aplicaciones.
2. Selecciona iOS como plataforma. Cuando veas la pregunta ¿Figura la aplicación en una tienda de aplicaciones disponible?, haz clic en NO.
3. Ingresa AdMob app open ad en el campo de nombre de la app.
4. No es necesario habilitar las métricas del usuario para completar este codelab. Sin embargo, te recomendamos que lo hagas, ya que te permitirá comprender mejor el comportamiento de los usuarios. Haz clic en AGREGAR para completar el proceso.

Crea una unidad de anuncios

1. Selecciona la app AdMob inline ads (iOS) en el menú Aplicaciones de la consola de AdMob.
2. Haz clic en el menú Unidades de anuncios.

Haz clic en AGREGAR UNIDAD DE ANUNCIOS. Selecciona Aplicación abierta como el formato. Ingresa ios-appopen en el campo Nombre de la unidad de anuncios. Haz clic en CREAR UNA UNIDAD DE ANUNCIOS para completar el proceso.

Importante: Cuando compiles y pruebes tus apps, asegúrate de utilizar anuncios de prueba en vez de anuncios activos en fase de producción. De lo contrario, tu cuenta podría suspenderse. Consulta el artículo Cómo habilitar anuncios de prueba para obtener más información sobre cómo funcionan esos anuncios del SDK de anuncios para dispositivos móviles.

Las unidades de anuncios nuevas suelen demorar algunas horas hasta que empiezan a publicar anuncios.

Si deseas probar el comportamiento de los anuncios de inmediato, utiliza los IDs de app y de unidad de anuncios de prueba que se indican en la siguiente tabla.

Opcional: Utiliza la app y las unidades de anuncios de AdMob de prueba

Si deseas seguir el codelab en lugar de crear una aplicación y unidades de anuncios nuevas por tu cuenta, puedes consultar las tablas siguientes para utilizar los IDs de app y de unidad de anuncios de AdMob de prueba.

ID de app/IDs de unidad de anuncios para Android

Elemento	ID de app/unidad de anuncios
ID de app de AdMob	ca-app-pub-3940256099942544~3347511713
ID de unidad de anuncios	ca-app-pub-3940256099942544/3419835294

ID de app/ID de unidad de anuncios para iOS

Elemento	ID de app/unidad de anuncios
ID de app de AdMob	ca-app-pub-3940256099942544~1458002511
ID de unidad de anuncios	ca-app-pub-3940256099942544/5662855259

En la documentación para desarrolladores, puedes consultar los artículos sobre anuncios de prueba para Android y anuncios de prueba para iOS si deseas obtener más información al respecto.

4. Agrega el complemento Google Mobile Ads para Unity

El primer paso para mostrar anuncios de AdMob y obtener ingresos es integrar el complemento Google Mobile Ads para Unity.

Descarga el complemento Mobile Ads para Unity

El complemento Google Mobile Ads para Unity permite que los desarrolladores de Unity publiquen fácilmente, en apps para Android y para iOS, anuncios de Google para dispositivos móviles. El complemento proporciona una interfaz de lenguaje C# para solicitar anuncios, utilizada en tu proyecto de Unity por secuencias de comandos en ese mismo lenguaje.

Usa el siguiente vínculo para descargar el paquete de Unity del complemento.

Descargar el complemento

Abre el proyecto inicial

1. Inicia Unity Hub.
2. En la pestaña Projects, haz clic en el botón ADD.
3. Navega a la carpeta en la que extrajiste el código descargado en el paso Configura el entorno de desarrollo.
4. Abre la carpeta starter.
5. Ahí verás el proyecto starter en la lista de proyectos. Haz clic en el proyecto para abrirlo en Unity Editor.

Importa el complemento Mobile Ads para Unity

1. En Unity Editor, selecciona Assets > Import Package > Custom Package en el menú.
2. Selecciona el GoogleMobileAds-{VERSION}.unitypackage que descargaste en el paso anterior.
3. Asegúrate de que todos los archivos estén seleccionados y haz clic en Import.

Configura tu ID de app de AdMob

1. En Unity Editor, selecciona Assets > Google Mobile Ads > Settings en el menú.
2. Ingresa tu ID de app de AdMob para Android y para iOS en cada campo. Si deseas seguir el codelab en lugar de crear una aplicación y unidades de anuncios nuevas por tu cuenta, ingresa el ID de app de AdMob de prueba como se indica a continuación.

Importante: No ingresar el ID de app de AdMob hará que falle la app.

5. Crea una clase de utilidad

Crea una clase nueva llamada AppOpenAdManager en la carpeta Scripts. 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.

AppOpenAdManager.cs

using System;
using GoogleMobileAds.Api;
using UnityEngine;

public class AppOpenAdManager
{
#if UNITY_ANDROID
    // Test ad unit ID: ca-app-pub-3940256099942544/3419835294
    private const string AD_UNIT_ID = "<YOUR_ANDROID_APPOPEN_AD_UNIT_ID>";
#elif UNITY_IOS
    // Test ad unit ID: ca-app-pub-3940256099942544/5662855259
    private const string AD_UNIT_ID = "<YOUR_IOS_APPOPEN_AD_UNIT_ID>";
#else
    private const string AD_UNIT_ID = "unexpected_platform";
#endif

    private static AppOpenAdManager instance;

    private AppOpenAd ad;

    private bool isShowingAd = false;

    public static AppOpenAdManager Instance
    {
        get
        {
            if (instance == null)
            {
                instance = new AppOpenAdManager();
            }

            return instance;
        }
    }

    private bool IsAdAvailable
    {
        get
        {
            return ad != null;
        }
    }

    public void LoadAd()
    {
        // TODO: Load an app open ad.
    }
}

Carga un anuncio

Para cargar un anuncio, puedes utilizar el método estático AppOpenAd.LoadAd(). En particular, el método de carga requiere un ID de unidad de anuncios, un modo ScreenOrientation, 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. Implementa el método LoadAd() como se indica a continuación.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    public void LoadAd()
    {
        AdRequest request = new AdRequest.Builder().Build();

        // Load an app open ad for portrait orientation
        AppOpenAd.LoadAd(AD_UNIT_ID, ScreenOrientation.Portrait, request, ((appOpenAd, error) =>
        {
            if (error != null)
            {
                // Handle the error.
                Debug.LogFormat("Failed to load the ad. (reason: {0})", error.LoadAdError.GetMessage());
                return;
            }

            // App open ad is loaded.
            ad = appOpenAd;
        }));
    }
}

Muestra el anuncio

Antes de mostrar el anuncio, haz el registro necesario para que cada controlador de eventos escuche cada evento de anuncio.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    public void ShowAdIfAvailable()
    {
        if (!IsAdAvailable || isShowingAd)
        {
            return;
        }

        ad.OnAdDidDismissFullScreenContent += HandleAdDidDismissFullScreenContent;
        ad.OnAdFailedToPresentFullScreenContent += HandleAdFailedToPresentFullScreenContent;
        ad.OnAdDidPresentFullScreenContent += HandleAdDidPresentFullScreenContent;
        ad.OnAdDidRecordImpression += HandleAdDidRecordImpression;
        ad.OnPaidEvent += HandlePaidEvent;

        ad.Show();
    }

    private void HandleAdDidDismissFullScreenContent(object sender, EventArgs args)
    {
        Debug.Log("Closed app open ad");
        // Set the ad to null to indicate that AppOpenAdManager no longer has another ad to show.
        ad = null;
        isShowingAd = false;
        LoadAd();
    }

    private void HandleAdFailedToPresentFullScreenContent(object sender, AdErrorEventArgs args)
    {
        Debug.LogFormat("Failed to present the ad (reason: {0})", args.AdError.GetMessage());
        // Set the ad to null to indicate that AppOpenAdManager no longer has another ad to show.
        ad = null;
        LoadAd();
    }

    private void HandleAdDidPresentFullScreenContent(object sender, EventArgs args)
    {
        Debug.Log("Displayed app open ad");
        isShowingAd = true;
    }

    private void HandleAdDidRecordImpression(object sender, EventArgs args)
    {
        Debug.Log("Recorded ad impression");
    }

    private void HandlePaidEvent(object sender, AdValueEventArgs args)
    {
        Debug.LogFormat("Received paid event. (currency: {0}, value: {1}",
                args.AdValue.CurrencyCode, args.AdValue.Value);
    }
}

Ten en cuenta el vencimiento de los anuncios

Después de transcurridas cuatro horas se agotará el tiempo de espera de las referencias de anuncios en la aplicación abierta. Los anuncios renderizados más de cuatro horas después del momento de la solicitud dejarán de ser válidos y posiblemente no generarán ingresos.

Para asegurarte de no mostrar un anuncio vencido, modifica la propiedad IsAdAvailable de la clase AppOpenAdManager que controla cuánto tiempo transcurrió desde que se cargó tu anuncio. Luego utiliza ese método para comprobar si el anuncio sigue siendo válido.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    // TODO: Add loadTime field
    private DateTime loadTime;

    private bool IsAdAvailable
    {
        get
        {
            // TODO: Consider ad expiration
            return ad != null && (System.DateTime.UtcNow - loadTime).TotalHours < 4;
        }
    }

    public void LoadAd()
    {
        if (IsAdAvailable)
        {
            return;
        }

        AdRequest request = new AdRequest.Builder().Build();
        AppOpenAd.LoadAd(AD_UNIT_ID, ScreenOrientation.Portrait, request, ((appOpenAd, error) =>
        {
            if (error != null)
            {
                Debug.LogFormat("Failed to load the ad. (reason: {0})", error.LoadAdError.GetMessage());
                return;
            }

            ad = appOpenAd;
            Debug.Log("App open ad loaded");

            // TODO: Keep track of time when the ad is loaded.
            loadTime = DateTime.UtcNow;
        }));
    }
}

6. Actualiza la escena para cargar o mostrar el anuncio

Actualiza el método Start() en la clase MainScene para cargar un anuncio de aplicación abierta cuando se inicia la escena.

Para recibir notificaciones sobre los eventos que ocurren en primer plano en la app, te recomendamos que escuches el singleton AppStateEventNotifier. Si implementas el delegado AppStateEventNotifier.AppStateChanged, tu app recibirá una alerta relacionada con el inicio y los eventos en primer plano de la app, por lo que podrá mostrar el anuncio.

MainScene.cs

using GoogleMobileAds.Api;
using GoogleMobileAds.Common;
using UnityEngine;

public class MainScene : MonoBehaviour
{
    public void Start()
    {
        // TODO: Request an app open ad.
        MobileAds.Initialize((initStatus) =>
        {
            AppOpenAdManager.Instance.LoadAd();
            AppStateEventNotifier.AppStateChanged += OnAppStateChanged;
        });
    }

    public void OnAppStateChanged(AppState state)
    {
        if (state == AppState.Foreground)
        {
            // TODO: Show an app open ad if available.
            AppOpenAdManager.Instance.ShowAdIfAvailable();
        }
    }
}

Importante: Se recomienda usar AppStateEventNotifier, ya que OnApplicationPause activará indicadores falsos en primero y segundo plano cuando la app muestre un anuncio de pantalla completa.

Nota: Los anuncios de aplicación abierta se pueden mostrar cuando el usuario vuelve a la app después de utilizar otra app distinta (p. ej., para elegir una foto de la galería). Esto es así porque también se considera un evento de "cambio de app". Por lo tanto, es recomendable inhabilitar o habilitar los anuncios de aplicación abierta para evitar que se muestren en medio de un flujo de usuarios importante.

¡Eso es todo! Compila y ejecuta el proyecto en un dispositivo o emulador. Una vez que se inicie la app, espera unos segundos para permitir que el anuncio se cargue por completo.

Luego, cuando regreses a la app después de visitar cualquier otra app o pantalla principal, el anuncio de aplicación abierta se mostrará como se indica a continuación.

7. ¡Listo!

Acabas de completar el codelab. Ahora podrás encontrar el código completo de este codelab en la carpeta complete.