Los anuncios de banner son anuncios rectangulares que ocupan una parte del diseño de una aplicación. Ellas permanezcan en la pantalla mientras los usuarios interactúan con la aplicación, ya sea anclados en la en la parte superior o inferior de la pantalla, o bien intercalados con el contenido a medida que el usuario se desplaza. Los anuncios de banner se pueden actualizar automáticamente después de cierto tiempo. Consulta la Descripción general de los anuncios de banner. para obtener más información.
En esta guía, se muestra cómo comenzar a usar los anuncios de banner adaptables fijos, que maximizan el rendimiento optimizando el tamaño del anuncio para cada dispositivo con un ancho de anuncio que especifiques.
Banner adaptable fijo
Los anuncios de banner adaptables fijos son anuncios de relación de aspecto fija, en lugar de los anuncios de tamaño fijo normales. La relación de aspecto es similar al estándar de la industria de 320 x 50. Una vez especificas el ancho completo disponible, se mostrará un anuncio con una altura óptima para ese ancho. La altura óptima no cambia entre las solicitudes del mismo dispositivo, y las vistas circundantes no necesitan moverse cuando se actualiza el anuncio.
Requisitos previos
- Completa la Guía de introducción.
Probar siempre con anuncios de prueba
Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios activos en fase de producción. De lo contrario, podría suspenderse tu cuenta.
La forma más sencilla de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para iOS banners:
ca-app-pub-3940256099942544/2435281174
Se configuró de forma especial para mostrar anuncios de prueba para cada solicitud, y puedes usarlo en tus propias apps mientras codificas, pruebas y depuras. Solo asegúrate de reemplazarlo por tu propio ID de unidad de anuncios antes de publicar la app.
Para obtener más información sobre cómo funcionan los anuncios de prueba del SDK de anuncios para dispositivos móviles, consulta el artículo Anuncios.
Crea un GADBannerView
Los anuncios de banner se muestran en objetos GADBannerView
, por lo que el primer paso para integrarlos es incluir un GADBannerView
en tu jerarquía de vistas. Por lo general, esto se hace de forma programática o a través de Interface Builder.
De manera programática
También se puede crear una instancia de GADBannerView
directamente.
En el siguiente ejemplo, se crea un GADBannerView
:
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
// Here the current interface orientation is used. Use
// GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
// GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
// particular orientation,
let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView = GADBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
}
SwiftUI
Para usar un GADBannerView
, crea un UIViewRepresentable
:
private struct BannerView: UIViewRepresentable {
let adSize: GADAdSize
init(_ adSize: GADAdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> UIView {
// Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
// frame size changes; wrapping in a UIView container insulates the GADBannerView from size
// changes that impact the view returned from makeUIView.
let view = UIView()
view.addSubview(context.coordinator.bannerView)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
context.coordinator.bannerView.adSize = adSize
}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Para administrar la inicialización y el comportamiento de GADBannerView
, crea un elemento
Coordinator
:
class BannerCoordinator: NSObject, GADBannerViewDelegate {
private(set) lazy var bannerView: GADBannerView = {
let banner = GADBannerView(adSize: parent.adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
banner.delegate = self
return banner
}()
let parent: BannerView
init(_ parent: BannerView) {
self.parent = parent
}
Para obtener el ancho de la vista, usa GeometryReader
. Esta clase
calcula el tamaño del anuncio adecuado para la orientación actual del dispositivo. El
frame
se establece en la altura calculada a partir del tamaño del anuncio.
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Objective-C
Ten en cuenta que, en este caso, no proporcionamos restricciones de ancho ni de altura, ya que el tamaño del anuncio proporcionado le dará al banner un tamaño de contenido intrínseco para ajustar el tamaño de la vista.
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Here safe area is taken into account, hence the view frame is used after the
// view has been laid out.
CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
CGFloat viewWidth = frame.size.width;
// Here the current interface orientation is used. If the ad is being preloaded
// for a future orientation change or different orientation, the function for the
// relevant orientation should be used.
GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
// In this case, we instantiate the banner with desired ad size.
self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];
[self addBannerViewToView:self.bannerView];
}
- (void)addBannerViewToView:(UIView *)bannerView {
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bannerView];
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
[self.view addConstraints:@[
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view.safeAreaLayoutGuide
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0],
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]
]];
}
@end
Creador de interfaces
Puedes agregar un GADBannerView
a un guion gráfico o a un archivo .xib. Cuando use
asegúrate de solo agregar restricciones de posición al banner. Por ejemplo, cuando muestres un banner adaptable en la parte inferior de la pantalla, establece la parte inferior de la vista del banner igual a la parte superior de la guía de diseño inferior y establece la restricción centerX
igual a la centerX
de la supervista.
El tamaño del anuncio del banner se sigue configurando de forma programática:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Carga un anuncio
Una vez que GADBannerView
y sus propiedades estén implementados
es momento de cargar un anuncio. Para ello, se debe llamar a loadRequest:
en un objeto GADRequest
:
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Set the ad unit ID and view controller that contains the GADBannerView.
bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
bannerView.rootViewController = self
bannerView.load(GADRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Set the ad unit ID and view controller that contains the GADBannerView.
self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GADRequest request]];
}
Los objetos GADRequest representan una única solicitud de anuncio. contienen propiedades, como la información de segmentación.
Si tu anuncio no se carga, no es necesario que solicites otro de forma explícita, siempre que hayas configurado tu unidad de anuncios para que se actualice. El SDK de Google Mobile Ads respeta cualquier frecuencia de actualización que especifiques en la IU de AdMob. Si no habilitaste la actualización, deberás emitir una solicitud nueva.
Eventos de anuncios
Con el uso de GADBannerViewDelegate
, puedes detectar eventos de ciclo de vida, como cuando se cierra un anuncio o el usuario abandona la app.
Cómo registrarse para eventos de banners
Si deseas realizar un registro para eventos de anuncios de banners, configura la propiedad delegate
en GADBannerView
en un objeto que implemente el protocolo GADBannerViewDelegate
. Por lo general, la clase que implementa banners
Los anuncios también actúan como la clase delegada, en cuyo caso, la propiedad delegate
puede
establecerse en self
.
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ...
self.bannerView.delegate = self;
}
Cómo implementar eventos de banners
Cada uno de los métodos de GADBannerViewDelegate
se marca como opcional, por lo que
solo necesitas implementar los métodos que deseas. En este ejemplo, se implementa cada método
y registra un mensaje en la consola:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
print("bannerViewDidReceiveAd")
}
func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
print("bannerViewDidRecordImpression")
}
func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
print("bannerViewWillPresentScreen")
}
func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewWillDIsmissScreen")
}
func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewDidDismissScreen")
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}
- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
Consulta el ejemplo de delegado de anuncios para ver una implementación de métodos delegados de banners en la aplicación iOS API Demo.
Casos de uso
A continuación, se incluyen algunos ejemplos de casos de uso para estos métodos de eventos de anuncios.
Agrega un banner a la jerarquía de vistas una vez que se reciba un anuncio
Te recomendamos que demores la adición de un GADBannerView
a la jerarquía de vista hasta que se reciba un anuncio. Para ello, escucha el evento bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Cómo animar un anuncio de banner
También puedes usar el evento bannerViewDidReceiveAd:
para animar un anuncio banner una vez.
como se muestra en el siguiente ejemplo:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
Pausar y reanudar la app
El protocolo GADBannerViewDelegate
tiene métodos para notificarte de eventos, como
como cuando un clic hace que se presente o se descarte una superposición. Si deseas hacer un seguimiento de si estos eventos se debieron a anuncios, regístrate para estos métodos de GADBannerViewDelegate
.
Para captar todos los tipos de presentaciones de diseños o invocaciones de navegadores externos, no solo las que se originan por clics de anuncios, es más conveniente para tu app la recepción de los métodos equivalentes en UIViewController
o UIApplication
. Esta es una tabla
que muestra los métodos de iOS equivalentes que se invocan al mismo tiempo que
Métodos GADBannerViewDelegate
:
Método GADBannerViewDelegate | Método de iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: de UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: de UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: de UIViewController |
Recursos adicionales
Ejemplos en GitHub
- Ejemplo de anuncios de banner adaptables fijos: Swift | SwiftUI | Objective-C
- Demo de funciones avanzadas: Swift | Objective-C
Próximos pasos
Banners contraíbles
Los anuncios de banner contraíbles son anuncios de banner que, en un principio, se presentan como una superposición más grande, con un botón para contraer el anuncio a un tamaño más pequeño. Considera usarla para optimizar aún más tu rendimiento. Consulta los anuncios de banner contraíbles para obtener más información.
Banners adaptables intercalados
Los banners adaptables intercalados son banners más grandes y más altos en comparación con los banners adaptables fijos. banners. Tienen una altura variable y pueden ser tan altos como la pantalla del dispositivo. Se recomienda el uso de banners adaptables intercalados en lugar de anuncios de banner adaptable fijos Apps que colocan anuncios de banner en contenido por el que es posible desplazarse. Consulta el ajuste automático intercalado banners para obtener más información más detalles.