As visualizações de banner são anúncios gráficos ou de texto retangulares que ocupam um lugar na tela. Enquanto os usuários interagem com o app, eles permanecem na tela e podem atualizar a página automaticamente após um determinado período. Se você começou a usar os anúncios para dispositivos móveis agora, saiba que eles são um bom lugar para começar.
Este guia mostra como integrar visualizações de banner em um app Unity. Além disso, a snippets de código e instruções, também inclui informações sobre dimensionamento banners corretamente e links para recursos adicionais.
Pré-requisitos
- Leia o Guia explicativo.
Sempre teste com anúncios de teste
O exemplo de código a seguir contém um ID de bloco de anúncios, que você pode usar para solicitar anúncios de teste. Ele foi configurado especificamente para retornar anúncios de teste em vez de anúncios de produção para cada solicitação, o que o torna seguro para uso.
No entanto, depois de registrar um aplicativo no na interface da Web do Ad Manager e criou seu próprio bloco de anúncios para uso no app, configure o dispositivo como um teste de forma explícita. dispositivo durante no desenvolvimento de software.
/21775744923/example/adaptive-banner
Inicializar o SDK de anúncios para dispositivos móveis
Antes de carregar os anúncios, faça com que seu app inicialize 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 anúncios, porque 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 de banner. No exemplo,
crie uma instância de uma exibição de banner, use um
AdManagerAdRequest
para carregar um anúncio na visualização do banner.
e ampliar os recursos dele lidando com 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 uma 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);
}
O construtor de um AdManagerBannerView
tem os seguintes
parâmetros:
adUnitId
: o ID do bloco de anúncios do qual oAdManagerBannerView
deve carregar 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 A enumeraçãoAdPosition
lista os valores válidos de posição do anúncio.
Observe como blocos de anúncios diferentes são usados, dependendo da plataforma. Você precisa usar um bloco de anúncios iOS para fazer solicitações de anúncios no iOS e um bloco de anúncios no 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 um AdManagerBannerView
é
colocado na tela do que o que é oferecido pelos valores 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 da AdManagerBannerView
é
posicionado nos valores x e y passados para o construtor, onde a origem é
no canto superior esquerdo da tela.
(Opcional) Criar uma visualização de banner com um tamanho personalizado
Além de usar uma constante AdSize
, também é possível 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 um 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á ser capaz de:
se adaptam automaticamente ao novo tamanho. O padrão de AdManagerAdView
é o tamanho
passados no primeiro parâmetro até que o próximo anúncio seja retornado.
Carregar um anúncio de banner
Depois que o AdManagerBannerView
estiver em vigor, 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 editor
ID fornecido.
/// <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);
}
Detectar eventos de visualização de banner
Para personalizar o comportamento de seu anúncio, você pode vincular vários eventos em o ciclo de vida do anúncio, como carregamento, abertura ou fechamento. Para ouvir , 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
do Google Cloud.
/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyAd()
{
if (_bannerView != null)
{
Debug.Log("Destroying banner view.");
_bannerView.Destroy();
_bannerView = null;
}
}
Pronto! Agora seu app está pronto para exibir anúncios de banner.
Tamanhos de banner
A tabela abaixo lista os tamanhos de banner padrão.
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 | Placar de líderes do 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. para substituir os banners inteligentes. |
Eventos de apps
Com os eventos de aplicativos, é possível criar anúncios que enviam mensagens ao código do aplicativo. O app podem 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. Veja um
exemplo de como processar este evento em seu código:
_bannerview.OnAppEventReceived += (AppEvent args) =>
{
Debug.Log($"Received app event from the ad: {args.Name}, {args.Value}.");
};
Confira um exemplo de como mudar a cor do plano de fundo do 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.