Anuncios en forma de banner

Las vistas de banner son anuncios de texto o con imágenes rectangulares que ocupan un lugar en la pantalla. Permanecen en la pantalla mientras los usuarios interactúan con la app y se pueden actualizar automáticamente después de un período determinado. Si eres nuevo en la publicidad para dispositivos móviles, este formato es una gran alternativa para comenzar.

En esta guía, se muestra cómo integrar vistas de banners en una app para Unity. Además de fragmentos de código e instrucciones, también incluye información para ajustar el tamaño de los banners correctamente y vínculos a recursos adicionales.

Requisitos previos

• Completa la guía de introducción.

Siempre realiza pruebas con anuncios de prueba

El siguiente código de muestra contiene un ID de unidad de anuncios que puedes usar para solicitar anuncios de prueba. Se configuró de forma especial para mostrar anuncios de prueba en lugar de anuncios de producción para cada solicitud, lo que lo hace seguro de usar.

Sin embargo, después de registrar una app en la interfaz web de Ad Manager y crear tus propios IDs de unidad de anuncios para usar en tu app, configura tu dispositivo como un dispositivo de prueba de forma explícita durante el desarrollo.

/21775744923/example/adaptive-banner

Inicializa el SDK de Mobile Ads

Antes de cargar anuncios, haz que tu app inicialice el SDK de anuncios para dispositivos móviles llamando a MobileAds.Initialize(). Esto solo se debe hacer una vez, idealmente cuando se inicia la app.

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize the Google Mobile Ads SDK.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

Si usas mediación, espera a que se produzca la devolución de llamada antes de cargar los anuncios, ya que de esta manera, se garantizará que se inicialicen todos los adaptadores de mediación.

Ejemplo de BannerView

En el siguiente código de muestra, se detalla cómo usar la vista de banner. En el ejemplo, creas una instancia de una vista de banner, usas un AdManagerAdRequest para cargar un anuncio en la vista de banner y, luego, extiendes sus capacidades controlando los eventos del ciclo de vida.

Crea una vista de banner

El primer paso para usar una vista de banner es crear una instancia de una vista de banner en una secuencia de comandos de C# adjunta a un GameObject.

  // This ad unit is configured to always serve test ads.
  private string _adUnitId = "/21775744923/example/adaptive-banner";

  AdManagerBannerView _bannerView;

  /// <summary>
  /// Creates a 320x50 banner view at top of the screen.
  /// </summary>
  public void CreateBannerView()
  {
      Debug.Log("Creating banner view");

      // If we already have a banner, destroy the old one.
      if (_bannerView != null)
      {
          DestroyAd();
      }

      // Create a 320x50 banner at top of the screen
      _bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
  }

El constructor de un AdManagerBannerView tiene los siguientes parámetros:

• adUnitId: Es el ID de la unidad de anuncios desde el que AdManagerBannerView debe cargar anuncios.
• AdSize: Es el tamaño del anuncio que deseas usar. Consulta Tamaños de los banners para obtener más información.
• AdPosition: Es la posición en la que se deben colocar las vistas de banner. La enumeración AdPosition enumera los valores válidos de la posición del anuncio.

Observa que se usan diferentes unidades de anuncios según la plataforma. Debes usar una unidad de anuncios para iOS para realizar solicitudes de anuncios en iOS y una unidad de anuncios para Android para realizar solicitudes en Android.

Crea una vista de banner con una posición personalizada (opcional)

Para tener un mayor control sobre dónde se coloca un AdManagerBannerView en la pantalla que lo que ofrecen los valores de AdPosition, usa el constructor que tiene coordenadas x e y como parámetros:

// Create a 320x50 banner views at coordinate (0,50) on screen.
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, 0, 50);

La esquina superior izquierda de AdManagerBannerView se posiciona en los valores x e y que se pasan al constructor, donde el origen es la parte superior izquierda de la pantalla.

Crea una vista de banner con un tamaño personalizado (opcional)

Además de usar una constante AdSize, también puedes especificar un tamaño personalizado para tu anuncio:

// Use the AdSize argument to set a custom size for the ad.
AdSize adSize = new AdSize(250, 250);
_bannerView = new AdManagerBannerView(_adUnitId, adSize, AdPosition.Bottom);

Varios tamaños de anuncios (opcional)

Ad Manager te permite especificar varios tamaños de anuncios que podrían ser aptos para publicarse en un AdManagerBannerView. Antes de implementar esta función en el SDK, crea una línea de pedido segmentada para las mismas unidades de anuncios asociadas con creatividades de diferentes tamaños.

En tu app, pasa varios parámetros AdSize a ValidAdSizes:

var adView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
adView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner, new AdSize(120, 20), new AdSize(250, 250),
};

Si AdManagerAdView cambia de tamaño en el momento de la actualización, tu diseño debería poder adaptarse automáticamente al nuevo tamaño. AdManagerAdView usa de forma predeterminada el tamaño que se pasa en el primer parámetro hasta que se muestra el siguiente anuncio.

Carga un anuncio de banner

Después de que se implemente AdManagerBannerView, continúa cargando un anuncio con el método LoadAd() en la clase AdManagerBannerView. Toma un parámetro que contiene información del entorno de ejecución, como la información de segmentación, las etiquetas de exclusión y el ID proporcionado por el publicador.

/// <summary>
/// Creates the banner view and loads a banner ad.
/// </summary>
public void LoadAd()
{
    // create an instance of a banner view first.
    if(_bannerView == null)
    {
        CreateAdManagerBannerView();
    }

    // create our request used to load the ad.
    var adRequest = new AdManagerAdRequest();

    // send the request to load the ad.
    Debug.Log("Loading banner ad.");
    _bannerView.LoadAd(adRequest);
}

Cómo escuchar eventos de vista de banners

Para personalizar el comportamiento de tu anuncio, puedes conectarte a varios eventos del ciclo de vida del anuncio, como la carga, la apertura o el cierre. Para detectar estos eventos, registra un delegado:

/// <summary>
/// listen to events the banner view may raise.
/// </summary>
private void ListenToAdEvents()
{
    // Raised when an ad is loaded into the banner view.
    _bannerView.OnBannerAdLoaded += () =>
    {
        Debug.Log("Banner view loaded an ad with response : "
            + _bannerView.GetResponseInfo());
    };
    // Raised when an ad fails to load into the banner view.
    _bannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
    {
        Debug.LogError("Banner view failed to load an ad with error : "
            + error);
    };
    // Raised when the ad is estimated to have earned money.
    _bannerView.OnAdPaid += (AdValue adValue) =>
    {
        Debug.Log(String.Format("Banner view paid {0} {1}.",
            adValue.Value,
            adValue.CurrencyCode));
    };
    // Raised when an impression is recorded for an ad.
    _bannerView.OnAdImpressionRecorded += () =>
    {
        Debug.Log("Banner view recorded an impression.");
    };
    // Raised when a click is recorded for an ad.
    _bannerView.OnAdClicked += () =>
    {
        Debug.Log("Banner view was clicked.");
    };
    // Raised when an ad opened full screen content.
    _bannerView.OnAdFullScreenContentOpened += () =>
    {
        Debug.Log("Banner view full screen content opened.");
    };
    // Raised when the ad closed full screen content.
    _bannerView.OnAdFullScreenContentClosed += () =>
    {
        Debug.Log("Banner view full screen content closed.");
    };
}

Destruye la vista de banner

Cuando termines de usar la vista de banner, asegúrate de llamar a Destroy() para liberar los recursos.

/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyAd()
{
    if (_bannerView != null)
    {
        Debug.Log("Destroying banner view.");
        _bannerView.Destroy();
        _bannerView = null;
    }
}

Eso es todo. Tu app ahora está lista para mostrar anuncios gráficos.

Actualiza un anuncio

Si configuraste tu unidad de anuncios para que se actualice, no necesitas solicitar otro anuncio cuando este no se carga. El SDK de anuncios de Google para dispositivos móviles respeta cualquier frecuencia de actualización que especifiques en la IU de Ad Manager. Si no habilitaste la actualización, envía una solicitud nueva. Para obtener más detalles sobre la actualización de unidades de anuncios, como la configuración de una frecuencia de actualización, consulta Frecuencia de actualización de los anuncios en apps para dispositivos móviles.

Tamaños de banner

En la siguiente tabla, se enumeran los tamaños de banner estándar.

Eventos de aplicaciones

Los eventos de aplicaciones te permiten crear anuncios que pueden enviar mensajes al código de la aplicación. Luego, la app puede tomar medidas en función de estos mensajes.

Puedes escuchar eventos de apps específicos de Ad Manager con AppEvent. Estos eventos pueden ocurrir en cualquier momento durante el ciclo de vida del anuncio, incluso antes de que se llame a la carga.

namespace GoogleMobileAds.Api.AdManager;

/// The App event message sent from the ad.
public class AppEvent
{
    // Name of the app event.
    string Name;
    // Argument passed from the app event.
    string Value;
}

OnAppEventReceived se activa cuando se produce un evento de app en un anuncio. Este es un ejemplo de cómo controlar este evento en tu código:

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
    Debug.Log($"Received app event from the ad: {args.Name}, {args.Value}.");
};

Este es un ejemplo que muestra cómo cambiar el color de fondo de tu app según un evento de app con un nombre de color:

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
  if (args.Name == "color")
  {
    Color color;
    if (ColorUtility.TryParseColor(arg.Value, out color))
    {
      gameObject.GetComponent<Renderer>().material.color = color;
    }
  }
};

Esta es la creatividad correspondiente que envía el evento de aplicación de color:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Recursos adicionales

• Ejemplo de HelloWorld: Representación minimalista de todos los formatos de anuncios.