Los anuncios de banner son anuncios rectangulares que ocupan una parte del diseño de una aplicación. Permanecen en la pantalla mientras los usuarios interactúan con la app, ya sea intercalados con contenido a medida que el usuario se desplaza o fijos en la parte superior o inferior de la pantalla. 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 × 50. Una vez que especifiques el ancho completo disponible, se mostrará un anuncio con la 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.
Siempre realiza pruebas 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 fácil de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para banners de iOS:
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 Anuncios de prueba.
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
// Initialize the BannerView.
bannerView = BannerView()
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
// Align the banner's bottom edge with the safe area's bottom edge
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
// Center the banner horizontally in the view
bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
SwiftUI
Para usar un BannerView, crea un UIViewRepresentable:
private struct BannerViewContainer: UIViewRepresentable {
typealias UIViewType = BannerView
let adSize: AdSize
init(_ adSize: AdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> BannerView {
let banner = BannerView(adSize: adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
banner.delegate = context.coordinator
return banner
}
func updateUIView(_ uiView: BannerView, context: Context) {}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Agrega tu UIViewRepresentable a la jerarquía de vistas y especifica los valores height y width:
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];
self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
Interface Builder
Puedes agregar un GADBannerView a un archivo de guion gráfico o xib. Cuando uses este método, asegúrate de agregar solo restricciones de posición en el 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
// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
Carga un anuncio
Una vez que se implemente el GADBannerView y se configuren sus propiedades, como adUnitID, es hora de cargar un anuncio. Para ello, llama a loadRequest: en un objeto GADRequest:
Swift
bannerView.load(Request())
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
[self.bannerView loadRequest:[GADRequest request]];
Los objetos GADRequest representan una sola solicitud de anuncio y contienen propiedades para elementos como la información de segmentación.
Actualiza un anuncio
Si configuraste tu unidad de anuncios para que se actualice, no necesitas solicitar otro anuncio cuando no se carga. El SDK de anuncios de Google para dispositivos móviles respeta cualquier frecuencia de actualización que especifiques en la IU de AdMob. Si no habilitaste la actualización, envía una solicitud nueva. Para obtener más detalles sobre la actualización de unidades de anuncios, como la configuración de una frecuencia de actualización, consulta Cómo usar la actualización automática para anuncios de banner.
Eventos de anuncios
Con el uso de GADBannerViewDelegate, puedes detectar eventos del ciclo de vida, como cuando se cierra un anuncio o el usuario sale de la app.
Regístrate para eventos de banners
Para registrarte en eventos de anuncios de banner, configura la propiedad delegate en GADBannerView en un objeto que implemente el protocolo GADBannerViewDelegate. Por lo general, la clase que implementa los anuncios de banner también actúa como la clase delegada, en cuyo caso, la propiedad delegate se puede establecer en self.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
self.bannerView.delegate = self;
Implementa eventos de banner
Cada uno de los métodos de GADBannerViewDelegate está marcado como opcional, por lo que solo debes implementar los métodos que desees. En este ejemplo, se implementa cada método y se registra un mensaje en la consola:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print(#function)
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print(#function + ": " + error.localizedDescription)
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print(#function)
}
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 Ad Delegate para ver una implementación de métodos de delegado de banner en la app de demostración de la API de iOS.
Casos de uso
Estos son 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 recibe un anuncio
Te recomendamos que demores la adición de un GADBannerView a la jerarquía de vistas hasta después de que se reciba un anuncio. Para ello, escucha el evento bannerViewDidReceiveAd::
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// 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 de banner una vez que se muestra, como se muestra en el siguiente ejemplo:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
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;
}];
}
Cómo pausar y reanudar la app
El protocolo GADBannerViewDelegate tiene métodos para notificarte sobre eventos, como cuando un clic hace que se presente o se oculte una superposición. Si deseas hacer un seguimiento de si estos eventos se debieron a los anuncios, regístrate en estos métodos de GADBannerViewDelegate.
Para detectar todos los tipos de presentaciones superpuestas o invocaciones de navegadores externos, no solo los que provienen de clics en anuncios, es mejor que tu app escuche los métodos equivalentes en UIViewController o UIApplication. A continuación, se muestra una tabla con los métodos equivalentes de iOS que se invocan al mismo tiempo que los 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
- Demostración 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 más grandes y altos en comparación con los banners adaptables fijos. Tienen una altura variable y pueden ser tan altos como la pantalla del dispositivo. Se recomiendan los banners adaptables intercalados en lugar de los anuncios de banner adaptables fijos para las apps que colocan anuncios de banner en contenido por el que es posible desplazarse. Consulta Banners adaptables intercalados para obtener más detalles.