Gli annunci banner sono annunci rettangolari che occupano una parte del layout dell'app. Loro rimangono sullo schermo mentre gli utenti interagiscono con l'app, ancorati al nella parte superiore o inferiore dello schermo oppure in linea con i contenuti mentre l'utente scorre la pagina. Banner gli annunci possono aggiornarsi automaticamente dopo un determinato periodo di tempo. Consulta la Panoramica degli annunci banner per ulteriori informazioni.
Questa guida spiega come iniziare a utilizzare le tecnologie di ancoraggio annunci banner adattivi, che massimizza il rendimento ottimizzando le dimensioni dell'annuncio per ogni dispositivo utilizzando la larghezza di un annuncio da te specificata.
Banner adattivo ancorato
Gli annunci banner adattivi ancorati sono annunci con proporzioni fisse anziché i normali annunci con dimensioni fisse. Le proporzioni sono simili a quelle dello standard di settore 320 x 50. Una volta specifichi l'intera larghezza disponibile, ti restituisce un annuncio con altezza per quella larghezza. L'altezza ottimale non cambia da una richiesta all'altra da sullo stesso dispositivo e le viste circostanti non devono spostarsi quando l'annuncio vengono aggiornate.
Prerequisiti
- Completa la Guida introduttiva.
Effettua sempre test con annunci di prova
Durante la creazione e il test delle tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione attivi. In caso contrario, l'account verrà sospeso.
Il modo più semplice per caricare annunci di prova è utilizzare il nostro ID unità pubblicitaria di prova dedicato per iOS. banner:
/21775744923/example/adaptive-banner
È stato appositamente configurato per restituire annunci di prova per ogni richiesta Puoi usarlo senza costi nelle tue app durante la programmazione, i test e il debug. Crea assicurati di sostituirlo con il tuo ID unità pubblicitaria prima di pubblicare l'app.
Per ulteriori informazioni sul funzionamento degli annunci di prova dell'SDK Mobile Ads, consulta la sezione Test Google Ads.
Crea una GAMBannerView
Gli annunci banner vengono visualizzati in GAMBannerView
oggetti, quindi il primo passo per integrare gli annunci banner è includere un GAMBannerView
nella gerarchia delle visualizzazioni. Questa operazione viene in genere eseguita in modo programmatico
tramite Interface Builder.
In modo programmatico
È anche possibile creare un'istanza direttamente di un'istanza GAMBannerView
.
Ecco un esempio di come creare un GAMBannerView
,
allineata in basso al centro dell'area di sicurezza dello schermo:
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GAMBannerView! 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 = GAMBannerView(adSize: adaptiveSize) addBannerViewToView(bannerView) } func addBannerViewToView(_ bannerView: GAMBannerView) { bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(bannerView) 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) ]) } }
Objective-C
@import GoogleMobileAds; @interface ViewController () @property(nonatomic, strong) GAMBannerView *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 = [[GAMBannerView alloc] initWithAdSize:adaptiveSize]; [self addBannerViewToView:self.bannerView]; } - (void)addBannerViewToView:(UIView *)bannerView { bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:bannerView]; [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
Tieni presente che in questo caso non assegniamo vincoli di larghezza o altezza, poiché la dimensione annuncio fornita fornirà al banner una dimensione intrinseca dei contenuti per vista.
Builder di interfacce
Un GAMBannerView
può essere aggiunto a uno storyboard o a un xib
. Quando utilizzi questo metodo, assicurati di aggiungere vincoli di posizione solo
il banner. Ad esempio, quando visualizzi un banner adattivo nella parte inferiore
Sullo schermo, imposta la parte inferiore della visualizzazione banner uguale a quella della parte superiore della parte inferiore
Guida al layout e imposta il centro X uguale al centro X della superview.
Le dimensioni dell'annuncio del banner sono ancora impostate in modo programmatico:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Carica un annuncio
Una volta che GAMBannerView
è attivo e le sue proprietà
configurato, è il momento di caricare un annuncio. Per farlo, chiama loadRequest:
su un
GAMRequest
:
Swift
override func viewDidLoad() { super.viewDidLoad() ... // Set the ad unit ID and view controller that contains the GAMBannerView. bannerView.adUnitID = "/21775744923/example/adaptive-banner" bannerView.rootViewController = self bannerView.load(GAMRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... // Set the ad unit ID and view controller that contains the GAMBannerView. self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GAMRequest request]]; }
Gli oggetti GAMRequest rappresentano una singola richiesta di annuncio e contengono proprietà relative a elementi come le informazioni di targeting.
Se il tuo annuncio non viene caricato, non devi richiederne esplicitamente un altro. purché tu abbia configurato l'unità pubblicitaria per aggiornarsi; L'SDK Google Mobile Ads rispetti la frequenza di aggiornamento specificata in Ad Manager nell'interfaccia utente. Se non hai abilitato l'aggiornamento, dovrai inviare una nuova richiesta.
Eventi annuncio
Utilizzando GADBannerViewDelegate
, puoi ascoltare eventi del ciclo di vita,
ad esempio quando un annuncio viene chiuso o l'utente esce dall'app.
Registrazione per gli eventi banner
Per registrarti agli eventi di annunci banner, imposta la proprietà delegate
su
GAMBannerView
a un oggetto che implementa
protocollo GADBannerViewDelegate
. In genere, la classe che implementa i banner
Google Ads agisce anche come classe delegata, nel qual caso la proprietà delegate
può
essere impostato su self
.
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController, GADBannerViewDelegate { var bannerView: GAMBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GAMBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
Implementazione di eventi banner
Ciascun metodo in GADBannerViewDelegate
è contrassegnato come facoltativo, quindi
di implementare solo i metodi che desideri. Questo esempio implementa ogni metodo
e registra un messaggio nella console:
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"); }
Vedi l'esempio del delegato annunci per l'implementazione dei metodi di delega banner in l'app iOS API Demo.
Casi d'uso
Di seguito sono riportati alcuni casi d'uso di esempio per questi metodi degli eventi annuncio.
L'aggiunta di un banner alla gerarchia di visualizzazione dopo la ricezione di un annuncio
Ti consigliamo di ritardare l'aggiunta di GAMBannerView
a
nella gerarchia delle visualizzazioni fino a quando non viene ricevuto un annuncio. Puoi farlo ascoltando
per l'evento bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. addBannerViewToView(bannerView) }
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView { // Add bannerView to view and add constraints as above. [self addBannerViewToView:self.bannerView]; }
Animazione di un annuncio banner
Puoi anche utilizzare l'evento bannerViewDidReceiveAd:
per animare un annuncio banner una volta sola
che viene restituito, come illustrato nell'esempio seguente:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { bannerView.alpha = 0 UIView.animate(withDuration: 1, animations: { bannerView.alpha = 1 }) }
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView { bannerView.alpha = 0; [UIView animateWithDuration:1.0 animations:^{ bannerView.alpha = 1; }]; }
Mettere in pausa e riprendere l'app
Il protocollo GADBannerViewDelegate
prevede metodi per inviarti notifiche sugli eventi, ad esempio
ad esempio quando un clic attiva la presentazione o la chiusura di un overlay. Se vuoi
monitorare se questi eventi sono dovuti ad annunci, registrati per questi
GADBannerViewDelegate
metodi.
Per rilevare tutti i tipi di presentazioni di overlay o chiamate esterne al browser, non
solo a quelli provenienti dai clic sugli annunci, è meglio che la tua app ascolti
metodi equivalenti su UIViewController
o UIApplication
. Ecco una tabella
che mostra i metodi iOS equivalenti che vengono richiamati contemporaneamente
GADBannerViewDelegate
metodi:
Metodo GADBannerViewDelegate | Metodo iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: di UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: di UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: di UIViewController |
Conteggio manuale delle impressioni
Puoi inviare manualmente ping delle impressioni ad Ad Manager se disponi di server
le condizioni in cui deve essere registrata un'impressione. Questa operazione può essere eseguita
Attiva un GAMBannerView
per le impressioni manuali prima di caricare un annuncio:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
Quando stabilisci che un annuncio è stato restituito correttamente e viene visualizzato sullo schermo, puoi attivare manualmente un'impressione:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
Eventi app
Gli eventi app ti consentono di creare annunci che possono inviare messaggi al loro codice dell'app. La l'app può quindi eseguire azioni basate su questi messaggi.
Puoi ascoltare gli eventi delle app specifici di Ad Manager utilizzando GADAppEventDelegate
.
Questi eventi possono verificarsi in qualsiasi momento durante il ciclo di vita dell'annuncio, anche prima
Viene chiamato l'elemento bannerViewDidReceiveAd:
dell'oggetto GADBannerViewDelegate
.
Swift
// Implement your app event within this method. The delegate will be // notified when the SDK receives an app event message from the ad. // Called when the banner receives an app event. optional public func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String, withInfo info: String?)
Objective-C
// Implement your app event within this method. The delegate will be // notified when the SDK receives an app event message from the ad. @optional // Called when the banner receives an app event. - (void)bannerView:(GAMBannerView *)banner didReceiveAppEvent:(NSString *)name withInfo:(NSString *)info;
I metodi degli eventi app possono essere implementati in un controller di visualizzazione:
Swift
import GoogleMobileAds class ViewController: UIViewController, GADAppEventDelegate { }
Objective-C
@import GoogleMobileAds; @interface ViewController : UIViewController <GADAppEventDelegate> { } @end
Ricordati di impostare il delegato utilizzando la proprietà appEventDelegate
prima di effettuare
la richiesta di un annuncio.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
Ecco un esempio che mostra come modificare il colore di sfondo di un'app specificando il colore tramite un evento app:
Swift
func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String, withInfo info: String?) { if name == "color" { guard let info = info else { return } switch info { case "green": // Set background color to green. view.backgroundColor = UIColor.green case "blue": // Set background color to blue. view.backgroundColor = UIColor.blue default: // Set background color to black. view.backgroundColor = UIColor.black } } }
Objective-C
- (void)bannerView:(GAMBannerView *)banner didReceiveAppEvent:(NSString *)name withInfo:(NSString *)info { if ([name isEqual:@"color"]) { if ([info isEqual:@"green"]) { // Set background color to green. self.view.backgroundColor = [UIColor greenColor]; } else if ([info isEqual:@"blue"]) { // Set background color to blue. self.view.backgroundColor = [UIColor blueColor]; } else // Set background color to black. self.view.backgroundColor = [UIColor blackColor]; } } }
Questa è la creatività corrispondente che invia messaggi di evento app a colori
appEventDelegate
:
<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>
Guarda l'esempio di eventi app di Ad Manager per un'implementazione di eventi app nella app demo API per iOS.
Risorse aggiuntive
Esempi su GitHub
- Esempio di annunci banner adattivi ancorati: Swift | Obiettivo-C
- Demo sulle funzionalità avanzate: Swift | Obiettivo-C
Passaggi successivi
Banner comprimibili
Gli annunci banner comprimibili sono annunci banner inizialmente presentati come annunci più grandi con un pulsante che consente di comprimere l'annuncio riducendolo a una dimensione inferiore. Valuta l'uso per ottimizzare ulteriormente il rendimento. Per ulteriori dettagli, consulta la sezione sugli annunci banner comprimibili.
Banner adattivi in linea
I banner adattivi in linea sono banner più grandi e più alti rispetto agli adattivi ancorati banner. Sono di altezza variabile e possono essere alti quanto lo schermo del dispositivo. I banner adattivi in linea sono consigliati rispetto agli annunci banner adattivi ancorati per app che inseriscono annunci banner in contenuti scorrevoli. Vedi Adattivi in linea banner per saperne di più i dettagli.