Annunci banner

Le visualizzazioni dei banner sono annunci di testo o illustrati rettangolari che occupano uno spazio sullo schermo. Rimangono sullo schermo mentre gli utenti interagiscono con l'app e possono aggiornarsi automaticamente dopo un determinato periodo di tempo. Se non hai mai utilizzato la pubblicità per il mobile, l'offerta è un ottimo punto di partenza.

Questa guida mostra come integrare le visualizzazioni dei banner in un'app Unity. Oltre a snippet di codice e istruzioni, questa guida include informazioni su come dimensionare correttamente i banner e link a risorse aggiuntive.

Prerequisiti

Esegui sempre test con annunci di prova

Il seguente codice di esempio contiene un ID unità pubblicitaria che puoi utilizzare per richiedere annunci di prova. È stato configurato appositamente per restituire annunci di prova anziché annunci di produzione per ogni richiesta, pertanto è sicuro da usare.

Tuttavia, dopo aver registrato un'app nell'Ad Manager interfaccia web e aver creato i tuoi ID unità pubblicitaria da utilizzare nell'app, configura il dispositivo come dispositivo di prova in modo esplicito durante lo sviluppo.

/6499/example/banner

Inizializzare l'SDK Google Mobile Ads

Prima di caricare gli annunci, fai in modo che la tua app inizializza l'SDK Mobile Ads chiamando MobileAds.Initialize(). Questa operazione deve essere eseguita una sola volta, idealmente al momento del lancio dell'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.
        });
    }
}

Se utilizzi la mediazione, attendi che venga eseguito il callback prima di caricare gli annunci per assicurarti che tutti gli adattatori di mediazione vengano inizializzati.

Esempio di BannerView

Il codice di esempio riportato di seguito illustra in dettaglio come utilizzare la visualizzazione banner. Nell'esempio, crei un'istanza di una visualizzazione banner, utilizzi un AdManagerAdRequest per caricare un annuncio nella visualizzazione banner, quindi ne estendi le funzionalità gestendo gli eventi del ciclo di vita.

Crea una visualizzazione banner

Il primo passaggio nell'utilizzo di una visualizzazione banner consiste nel creare un'istanza di una visualizzazione banner in uno script C# associato 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);
  }

Il costruttore di un elemento AdManagerBannerView ha i seguenti parametri:

  • adUnitId: l'ID unità pubblicitaria da cui AdManagerBannerView deve caricare gli annunci.
  • AdSize: la dimensione dell'annuncio che vuoi utilizzare. Per maggiori dettagli, consulta Dimensioni banner.
  • AdPosition: la posizione in cui devono essere inserite le visualizzazioni del banner. L'enumerazione AdPosition elenca i valori validi per le posizioni dell'annuncio.

Nota come vengono utilizzate diverse unità pubblicitarie, a seconda della piattaforma. Devi utilizzare un'unità pubblicitaria iOS per effettuare richieste di annunci su iOS e un'unità pubblicitaria Android per effettuare richieste su Android.

(Facoltativo) Creare una visualizzazione banner con una posizione personalizzata

Per un maggiore controllo sul punto in cui un elemento AdManagerBannerView viene posizionato sullo schermo rispetto a quello offerto dai valori AdPosition, utilizza il costruttore che ha le coordinate x e y come parametri:

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

L'angolo in alto a sinistra di AdManagerBannerView è posizionato in corrispondenza dei valori x e y passati al costruttore, dove l'origine è la parte superiore sinistra dello schermo.

(Facoltativo) Creare una visualizzazione banner con dimensioni personalizzate

Oltre a utilizzare una costante AdSize, puoi anche specificare una dimensione personalizzata per il tuo annuncio:

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

(Facoltativo) Più dimensioni dell'annuncio

Ad Manager consente di specificare più dimensioni degli annunci che potrebbero essere idonee alla pubblicazione in un AdManagerBannerView. Prima di implementare questa funzionalità nell'SDK, crea un elemento pubblicitario che ha come target le stesse unità pubblicitarie associate a creatività di dimensioni diverse.

Nell'app, trasmetti più parametri AdSize in 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),
};

Se AdManagerAdView cambia dimensione al momento dell'aggiornamento, il layout dovrebbe essere in grado di adattarsi automaticamente alla nuova dimensione. Per impostazione predefinita, AdManagerAdView viene utilizzata la dimensione trasmessa nel primo parametro fino al ritorno dell'annuncio successivo.

Carica un annuncio banner

Dopo aver impostato AdManagerBannerView, procedi al caricamento di un annuncio con il metodo LoadAd() nella classe AdManagerBannerView. Prende un parametro AdManagerAdRequest che contiene informazioni sul runtime, come informazioni di targeting, etichette di esclusione e l'ID fornito dal publisher.

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

Ascolta gli eventi di visualizzazione del banner

Per personalizzare il comportamento dell'annuncio, puoi agganciarti a una serie di eventi nel ciclo di vita dell'annuncio, come il caricamento, l'apertura o la chiusura. Per ascoltare questi eventi, registra un delegato:

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

Elimina la visualizzazione del banner

Quando hai finito di utilizzare la visualizzazione banner, assicurati di chiamare Destroy() per rilasciare le risorse.

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

È tutto. L'app è ora pronta per la pubblicazione degli annunci banner.

Nella tabella seguente sono elencate le dimensioni standard dei banner.

Dimensioni in dp (LxA) Descrizione Disponibilità Costante AdSize
320 x 50 Banner standard Telefoni e tablet BANNER
320 x 100 Banner grande Telefoni e tablet LARGE_BANNER
300 x 250 Rettangolo medio IAB Telefoni e tablet MEDIUM_RECTANGLE
468 x 60 Banner dimensione intera IAB Tablet FULL_BANNER
728 x 90 Classifica IAB Tablet LEADERBOARD
Larghezza fornita x Altezza adattiva Banner adattivo Telefoni e tablet N/A
Larghezza schermo x 32|50|90 Banner intelligente Telefoni e tablet SMART_BANNER
Scopri di più sui banner adattivi, pensati per sostituire i banner intelligenti.

Eventi app

Gli eventi app ti consentono di creare annunci che possono inviare messaggi al codice dell'app. L'app potrà quindi eseguire azioni in base a questi messaggi.

Puoi ascoltare gli eventi dell'app specifici di Ad Manager utilizzando AppEvent. Questi eventi possono verificarsi in qualsiasi momento durante il ciclo di vita dell'annuncio, anche prima della chiamata del caricamento.

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 viene aumentato quando si verifica un evento app in un annuncio. Ecco un esempio di come gestire questo evento nel codice:

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

Ecco un esempio che mostra come modificare il colore di sfondo dell'app in base a un evento app con nome di colore:

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

Ed ecco la creatività corrispondente che invia l'evento dell'app 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>

Altre risorse