Anuncios en forma de banner

Las vistas de banner son anuncios rectangulares de imagen o texto que ocupan un lugar en la pantalla. Permanecen en la pantalla mientras los usuarios interactúan con la aplicación y pueden actualizar la página. automáticamente después de un período determinado. Si es la primera vez que utilizas dispositivos móviles publicidad, son un excelente punto de partida.

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

Requisitos previos

Probar siempre 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 mostrar anuncios de producción para cada solicitud, por lo que es seguro de usar.

Sin embargo, después de registrar una app en la de Ad Manager y creaste tu propia unidad de anuncios IDs para usar en tu app, configura tu dispositivo como una prueba de manera explícita dispositivo durante en el desarrollo de software.

/6499/example/banner

Inicializa el SDK de Mobile Ads

Antes de cargar anuncios, haz que tu app inicialice el SDK de anuncios para dispositivos móviles mediante una llamada MobileAds.Initialize(). Esto debe hacerse una sola 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 utiliza la mediación, espere hasta que se produzca la devolución de llamada antes de cargar anuncios como Esto 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, crear una instancia de una vista de banner, usar una AdManagerAdRequest para cargar un anuncio en la vista de banner y, luego, ampliar sus capacidades mediante eventos de ciclo de vida.

Cómo crear 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 = "/6499/example/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 lo siguiente: parámetros:

  • adUnitId: Es el ID de la unidad de anuncios desde el que AdManagerBannerView debería cargar anuncios.
  • AdSize: El tamaño del anuncio que desea utilizar. Consulta el artículo sobre tamaños de banners. para conocer los detalles.
  • AdPosition: Es la posición en la que se deben colocar las vistas del banner. El La enumeración AdPosition enumera los valores de posición del anuncio válidos.

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

(Opcional) Cómo crear una vista de banner con una posición personalizada

Para obtener un mayor control sobre la ubicación de un AdManagerBannerView colocar en la pantalla que la que ofrecen los valores de AdPosition, usa el constructor con 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 es se posiciona en los valores x e y pasados al constructor, donde el origen es la parte superior izquierda de la pantalla.

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

Además de usar una constante AdSize, también puedes especificar un tamaño personalizado para su 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 anuncio (opcional)

Ad Manager te permite especificar varios tamaños de anuncios que podrían ser aptos para publicarse. en un objeto AdManagerBannerView. Antes de implementar esta función en el SDK, crea Una línea de pedido segmentada para las mismas unidades de anuncios asociadas a 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. El tamaño de AdManagerAdView se establece de forma predeterminada. el primer parámetro hasta que se muestre el siguiente anuncio.

Carga un anuncio banner

Una vez que AdManagerBannerView esté implementado, continúa con la carga un anuncio con el método LoadAd() en AdManagerBannerView clase. Toma un parámetro que contiene la información del entorno de ejecución, como la información de segmentación, las etiquetas de exclusión y el publicador el ID proporcionado.

/// <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 banner

Para personalizar el comportamiento de tu anuncio, puedes relacionarte con varios eventos el ciclo de vida del anuncio, como la carga, la apertura o el cierre. Para escuchar estas canciones, haz lo siguiente: registra a 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 del banner

Cuando termines de usar la vista de banner, asegúrate de llamar a Destroy() para liberarlo de Google Cloud.

/// <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 ya está lista para mostrar anuncios de banner.

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

Tamaño en dp (Ancho x Alto) Descripción Disponibilidad Constante de AdSize
320 x 50 Banner estándar Teléfonos y tablets BANNER
320 x 100 Banner grande Teléfonos y tablets LARGE_BANNER
300 x 250 Rectángulo mediano de IAB Teléfonos y tablets MEDIUM_RECTANGLE
468 x 60 Banner de tamaño completo de IAB Tablets FULL_BANNER
728 x 90 Tabla de clasificación de IAB Tablets LEADERBOARD
Ancho proporcionado × Altura adaptable Banner adaptable Teléfonos y tablets N/A
Ancho de pantalla x 32|50|90 Banner inteligente Teléfonos y tablets SMART_BANNER
Obtén más información sobre los banners adaptables. para reemplazar los banners inteligentes.

Eventos de aplicaciones

Los eventos de aplicaciones le permiten crear anuncios que pueden enviar mensajes a su código de aplicación. 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 puede ocurrir en cualquier momento del 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;
}

Se genera un OnAppEventReceived cuando se produce un evento de aplicación 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}.");
};

En este ejemplo, se muestra cómo cambiar el color de fondo de tu app según un evento de la aplicación con 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;
    }
  }
};

Y esta es la creatividad correspondiente que envía un evento de color de la app:

<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