Anúncios em banner

As visualizações de banner são anúncios gráficos ou de texto retangulares que ocupam um lugar na tela. Eles permanecem na tela enquanto os usuários interagem com o app e podem ser atualizados automaticamente após um determinado período. Se você está começando na publicidade para dispositivos móveis, eles são um ótimo ponto de partida.

Este guia mostra como integrar visualizações de banner a um app Unity. Além de snippets de código e instruções, ele também inclui informações sobre o dimensionamento correto de banners e links para outros recursos.

Pré-requisitos

• Leia o Guia explicativo.

Sempre faça testes com anúncios de teste

A amostra de código a seguir contém um ID de bloco de anúncios que pode ser usado para solicitar anúncios de teste. Ele foi configurado especialmente para retornar anúncios de teste em vez de anúncios de produção para cada solicitação, o que torna o uso seguro.

No entanto, depois de registrar um aplicativo na interface da Web do Ad Manager e criar seus próprios IDs de blocos de anúncios para uso no aplicativo, configure seu dispositivo como um teste explicitamente durante o desenvolvimento.

/6499/example/banner

Inicializar o SDK de anúncios para dispositivos móveis

Antes de carregar os anúncios, seu app precisa inicializar o SDK dos anúncios para dispositivos móveis chamando MobileAds.Initialize(). Isso precisa ser feito apenas uma vez, de preferência na inicialização do 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 você estiver usando a mediação, aguarde até que o callback ocorra antes de carregar os anúncios. Isso garante que todos os adaptadores de mediação sejam inicializados.

Exemplo de BannerView

O exemplo de código abaixo detalha como usar a visualização do banner. No exemplo, você cria uma instância de uma visualização de banner, usa um AdManagerAdRequest para carregar um anúncio nessa visualização e amplia os recursos processando eventos de ciclo de vida.

Criar uma visualização de banner

A primeira etapa para usar uma visualização de banner é criar uma instância de uma visualização de banner em um script C# anexado a um 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);
  }

O construtor de um AdManagerBannerView tem os seguintes parâmetros:

• adUnitId: o ID do bloco de anúncios do qual a AdManagerBannerView precisa carregar os anúncios.
• AdSize: o tamanho do anúncio que você quer usar. Consulte Tamanhos de banner para mais detalhes.
• AdPosition: a posição em que as visualizações do banner precisam ser colocadas. O tipo enumerado AdPosition lista os valores válidos de posição do anúncio.

Observe como diferentes blocos de anúncios são usados, dependendo da plataforma. Você precisa usar um bloco de anúncios do iOS para fazer solicitações de anúncios no iOS e um bloco de anúncios do Android para fazer solicitações no Android.

(Opcional) Criar uma visualização de banner com uma posição personalizada

Para ter mais controle sobre onde uma AdManagerBannerView é colocada na tela do que o que é oferecido pelos valores de AdPosition, use o construtor que tem as 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);

O canto superior esquerdo do AdManagerBannerView é posicionado nos valores x e y transmitidos ao construtor, em que a origem é o canto superior esquerdo da tela.

(Opcional) Criar uma visualização de banner com um tamanho personalizado

Além de usar uma constante AdSize, você também pode especificar um tamanho personalizado para seu anúncio:

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

(Opcional) Vários tamanhos de anúncio

O Ad Manager permite especificar vários tamanhos de anúncio que podem ser qualificados para veiculação em uma AdManagerBannerView. Antes de implementar esse recurso no SDK, crie um item de linha segmentando os mesmos blocos de anúncios associados a criativos de tamanhos diferentes.

No seu app, transmita vários parâmetros AdSize para 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 o AdManagerAdView mudar de tamanho no momento da atualização, o layout precisará se adaptar automaticamente ao novo tamanho. O padrão de AdManagerAdView é o tamanho transmitido no primeiro parâmetro até que o próximo anúncio seja retornado.

Carregar um anúncio de banner

Depois que a AdManagerBannerView estiver pronta, carregue um anúncio com o método LoadAd() na classe AdManagerBannerView. Ele usa um parâmetro que contém informações do ambiente de execução, como informações de segmentação, rótulos de exclusão e o ID fornecido pelo editor.

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

Dica:é possível usar chamadas de carregamento de anúncios para criar um cache de anúncios pré-carregados antes da exibição deles. Assim, os anúncios poderão ser exibidos com latência zero, quando necessário. Como os anúncios expiram após uma hora, limpe esse cache e atualize a página com novos anúncios a cada hora.

Detectar eventos de visualização de banner

Para personalizar o comportamento do seu anúncio, você pode vincular vários eventos no ciclo de vida dele, como carregamento, abertura ou fechamento. Para detectar esses eventos, registre um 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.");
    };
}

Destruir a visualização do banner

Ao terminar de usar a visualização do banner, chame Destroy() para liberar os recursos.

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

Pronto! Seu app está pronto para exibir anúncios de banner.

Tamanhos de banner

A tabela abaixo lista os tamanhos padrão de banner.

Tamanho em dp (L x A)	Descrição	Disponibilidade	Constante "AdSize"
320 x 50	Banner padrão	Telefones e tablets	BANNER
320 x 100	Banner grande	Telefones e tablets	LARGE_BANNER
300 x 250	Retângulo médio IAB	Telefones e tablets	MEDIUM_RECTANGLE
468 x 60	Banner de tamanho real IAB	Tablets	FULL_BANNER
728 x 90	Cabeçalho IAB	Tablets	LEADERBOARD
Largura fornecida x Altura adaptável	Banner adaptativo	Telefones e tablets	N/A
Largura da tela x 32|50|90	Banner inteligente	Telefones e tablets	SMART_BANNER
Saiba mais sobre os banners adaptativos, que substituem os banners inteligentes.

Observação: se um app Android tentar carregar um banner muito grande para o layout, o SDK não vai mostrá-lo, registrando uma mensagem de erro.

Eventos de apps

Com os eventos de aplicativos, você pode criar anúncios que enviam mensagens ao código do aplicativo. O app pode realizar ações com base nessas mensagens.

É possível detectar eventos específicos de aplicativos do Ad Manager usando AppEvent. Esses eventos podem ocorrer a qualquer momento durante o ciclo de vida do anúncio, mesmo antes de o carregamento ser chamado.

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 é gerado quando um evento no app ocorre em um anúncio. Confira um exemplo de como processar esse evento no seu código:

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

Confira um exemplo que mostra como mudar a cor de fundo do seu app dependendo de um evento do app com um nome de cor:

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

Confira o criativo correspondente que envia o evento de app de cor:

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

Outros recursos

• Exemplo do HelloWorld: uma implementação mínima de todos os formatos de anúncio.