Visualizzazione di un formato di annuncio nativo definito dal sistema
Quando viene caricato un annuncio nativo, la tua app riceverà un oggetto annuncio nativo tramite uno dei messaggi del protocollo GADAdLoaderDelegate
. La tua app è quindi responsabile della visualizzazione dell'annuncio (sebbene non debba necessariamente farlo immediatamente). Per semplificare la visualizzazione dei formati di annunci definiti dal sistema, l'SDK offre alcune risorse utili.
GADNativeAdView
Per GADNativeAd
, esiste una classe "visualizzazione annuncio" corrispondente: GADNativeAdView
. Questa classe di visualizzazione dell'annuncio è una UIView
che i publisher devono utilizzare per visualizzare l'annuncio. Un singolo GADNativeAdView
, ad esempio, può visualizzare una singola istanza di un GADNativeAd
. Ciascuno degli oggetti UIView
utilizzati per visualizzare gli asset dell'annuncio deve essere viste secondarie di quell'oggetto GADNativeAdView
.
Ad esempio, se stavi visualizzando un annuncio in un UITableView
, la gerarchia di visualizzazione per una delle celle potrebbe essere simile a questa:
La classe GADNativeAdView
fornisce anche IBOutlets
utilizzato per registrare la vista utilizzata per ogni singolo asset e un metodo per registrare l'oggetto GADNativeAd
stesso. La registrazione delle viste in questo modo consente all'SDK di gestire automaticamente attività quali:
- Registrazione dei clic.
- Registrazione delle impressioni (quando il primo pixel è visibile sullo schermo).
- Visualizzazione dell'overlay AdChoices.
L'overlay AdChoices
Per gli annunci nativi indiretti (pubblicati tramite il backfill AdMobo tramite Ad Exchange o AdSense), l'SDK aggiunge un overlay AdChoices. Si prega di lasciare spazio nell'angolo preferito della visualizzazione dell'annuncio nativo per il logo AdChoices inserito automaticamente. Inoltre, assicurati che l'overlay AdChoices sia posizionato su un contenuto che consenta di visualizzare facilmente l'icona. Per ulteriori informazioni sull'aspetto e sulla funzione dell'overlay, consulta le linee guida per l'implementazione degli annunci nativi programmatici .
Attribuzione dell'annuncio
Quando visualizzi annunci nativi programmatici, devi visualizzare un'attribuzione dell'annuncio per indicare che la visualizzazione è un annuncio pubblicitario.
Esempio di codice
Diamo un'occhiata a come visualizzare annunci nativi utilizzando visualizzazioni caricate dinamicamente da file xib. Questo può essere un approccio molto utile quando si utilizzano GADAdLoaders
configurati per richiedere più formati.
Disposizione delle UIViews
Il primo passaggio consiste nel disporre le UIViews
che visualizzeranno gli asset degli annunci nativi. Puoi farlo in Interface Builder come faresti quando crei qualsiasi altro file xib. Ecco come potrebbe apparire il layout di un annuncio nativo:
Nota il valore della classe personalizzata in alto a destra nell'immagine. È impostato su
GADNativeAdView
. Questa è la classe di visualizzazione dell'annuncio utilizzata per visualizzare un GADNativeAd
.
Dovrai anche impostare la classe personalizzata per GADMediaView
, che viene utilizzata per visualizzare il video o l'immagine per l'annuncio.
Collegamento di punti vendita alle viste
Una volta che le visualizzazioni sono a posto e hai assegnato la classe di visualizzazione annuncio corretta al layout, collega i punti vendita delle risorse della visualizzazione annuncio alle UIViews
che hai creato. Ecco come puoi collegare gli sbocchi delle risorse della visualizzazione dell'annuncio alle UIViews
create per un annuncio:
Nel pannello outlet, i punti vendita in GADNativeAdView
sono stati collegati alle UIViews
disposte in Interface Builder. Ciò consente all'SDK di sapere quale UIView
mostra quale risorsa. È anche importante ricordare che questi punti vendita rappresentano le visualizzazioni selezionabili nell'annuncio.
Visualizzazione dell'annuncio
Una volta completato il layout e collegati i punti vendita, l'ultimo passaggio consiste nell'aggiungere codice alla tua app che visualizza un annuncio una volta caricato. Ecco un metodo per visualizzare un annuncio nella vista definita sopra:
Veloce
// Mark: - GADNativeAdLoaderDelegate func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) { print("Received native ad: \(nativeAd)") refreshAdButton.isEnabled = true // Create and place ad in view hierarchy. let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first guard let nativeAdView = nibView as? GADNativeAdView else { return } setAdView(nativeAdView) // Set ourselves as the native ad delegate to be notified of native ad events. nativeAd.delegate = self // Populate the native ad view with the native ad assets. // The headline and mediaContent are guaranteed to be present in every native ad. (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent // This app uses a fixed width for the GADMediaView and changes its height to match the aspect // ratio of the media it displays. if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 { let heightConstraint = NSLayoutConstraint( item: mediaView, attribute: .height, relatedBy: .equal, toItem: mediaView, attribute: .width, multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio), constant: 0) heightConstraint.isActive = true } // These assets are not guaranteed to be present. Check that they are before // showing or hiding them. (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body nativeAdView.bodyView?.isHidden = nativeAd.body == nil (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal) nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image nativeAdView.iconView?.isHidden = nativeAd.icon == nil (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars( fromStarRating: nativeAd.starRating) nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil (nativeAdView.storeView as? UILabel)?.text = nativeAd.store nativeAdView.storeView?.isHidden = nativeAd.store == nil (nativeAdView.priceView as? UILabel)?.text = nativeAd.price nativeAdView.priceView?.isHidden = nativeAd.price == nil (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil // In order for the SDK to process touch events properly, user interaction should be disabled. nativeAdView.callToActionView?.isUserInteractionEnabled = false // Associate the native ad view with the native ad object. This is // required to make the ad clickable. // Note: this should always be done after populating the ad views. nativeAdView.nativeAd = nativeAd }
Obiettivo-C
#pragma mark GADNativeAdLoaderDelegate implementation - (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd { NSLog(@"Received native ad: %@", nativeAd); self.refreshButton.enabled = YES; // Create and place ad in view hierarchy. GADNativeAdView *nativeAdView = [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject; [self setAdView:nativeAdView]; // Set the mediaContent on the GADMediaView to populate it with available // video/image asset. nativeAdView.mediaView.mediaContent = nativeAd.mediaContent; // Populate the native ad view with the native ad assets. // The headline is guaranteed to be present in every native ad. ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline; // These assets are not guaranteed to be present. Check that they are before // showing or hiding them. ((UILabel *)nativeAdView.bodyView).text = nativeAd.body; nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES; [((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction forState:UIControlStateNormal]; nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES; ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image; nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES; ((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating]; nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES; ((UILabel *)nativeAdView.storeView).text = nativeAd.store; nativeAdView.storeView.hidden = nativeAd.store ? NO : YES; ((UILabel *)nativeAdView.priceView).text = nativeAd.price; nativeAdView.priceView.hidden = nativeAd.price ? NO : YES; ((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser; nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES; // In order for the SDK to process touch events properly, user interaction // should be disabled. nativeAdView.callToActionView.userInteractionEnabled = NO; // Associate the native ad view with the native ad object. This is // required to make the ad clickable. nativeAdView.nativeAd = nativeAd; }
Il nostro repository GitHub ha le implementazioni complete perannunci nativi avanzati scritti sia in Swift che in Objective-C.
Scarica l'esempio avanzato nativoGADMediaView
Le risorse di immagini e video vengono visualizzate agli utenti tramite GADMediaView
. Questo è un UIView
che può essere definito in un file xib o costruito dinamicamente. Dovrebbe essere posizionato all'interno della gerarchia di visualizzazione di un GADNativeAdView
, come con qualsiasi altra visualizzazione di risorse.
Come per tutte le visualizzazioni delle risorse, la visualizzazione multimediale deve avere il contenuto popolato. Questo viene impostato utilizzando la proprietà mediaContent
su GADMediaView
. La proprietà mediaContent
di GADNativeAd
contiene contenuto multimediale che può essere passato a un GADMediaView
.
Ecco uno snippet dall'esempioNative Advanced ( Swift | Objective-C )che mostra come popolare GADMediaView
con gli asset degli annunci nativi utilizzando GADMediaContent
da GADNativeAd
:
Veloce
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Obiettivo-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
Assicurati che nel tuo file di interfaccia per la visualizzazione dell'annuncio nativo di avere la classe personalizzata delle visualizzazioni impostata su GADMediaView
e di averlo collegato all'outlet mediaView
.
Modifica della modalità del contenuto dell'immagine
La classe GADMediaView
rispetta la proprietà UIView
contentMode
durante la visualizzazione delle immagini. Se desideri modificare il modo in cui un'immagine viene ridimensionata in GADMediaView
, imposta la UIViewContentMode
corrispondente sulla proprietà contentMode
di GADMediaView
per ottenere questo risultato.
Ad esempio, per riempire GADMediaView
quando viene visualizzata un'immagine (l'annuncio non ha video):
Veloce
nativeAdView.mediaView?.contentMode = .aspectFill
Obiettivo-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
La classe GADMediaContent
contiene i dati relativi al contenuto multimediale dell'annuncio nativo, che viene visualizzato utilizzando la classe GADMediaView
. Quando è impostato sulla proprietà GADMediaView
mediaContent
:
Se una risorsa video è disponibile, viene memorizzata nel buffer e inizia la riproduzione all'interno di
GADMediaView
. Puoi sapere se una risorsa video è disponibile controllandohasVideoContent
.Se l'annuncio non contiene una risorsa video, la risorsa immagine principale viene scaricata e inserita all'interno
GADMediaView
mainImage